VisualsAplenty.js Documentation

Getting Started

Welcome to the world of VisualsAplenty.js! We'll get you started in a pinch, but first we have to make sure you're good to go.

Please ensure that you have Font Awesome v5.15.4+ included in your webpage to make use of VisualsAplenty.js's full functionality.

Now, let's let's walk through how to create instances of the objects that VisualsAplenty.js provides.

// in your HTML file, include the tag: <script>defer src="/path/to/VisualsAplenty.js"></script>

// sample bar graph

// here is a sample array of objects containing the data to be displayed
const tvData = [
    {
        Show: "LOST",
        Count: 145
    },
    {
        Show: "Sherlock",
        Count: 99,
    }
]

const tvTableDiv = document.querySelector('.tvTableDiv'); // get the parent element you want the graph to be displayed in

// create the BarGraph instance, resulting in the BarGraph to be drawn within the parent element specified
const favTVShow = new BarGraph("Favourite TV Show", tvData, "Count", "Show", tvTableDiv);

//------------------------------------------------------------------------------------------------------------------------------------------------------
// sample scatter plot
const winLoseData = [
    {
        Name: "Toronto Maple Leafs",
        Wins: 50,
        Losses: 80
    },
    {
        Name: "Toronto Raptors",
        Wins: 30,
        Losses: 90
    }
]

const numWinLoseDiv = document.querySelector('.numWinLoseDiv');

// create the ScatterPlot instance, resulting in the ScatterPlot to be drawn within the parent element specified
const winLose = new ScatterPlot("Toronto Team 2021 Win Rate", winLoseData, "Wins", "Losses", numWinLoseDiv, 'Name');
winLose.setLegendVisibility(true); // ScatterPlot by default has no legend, but we can enable it

//------------------------------------------------------------------------------------------------------------------------------------------------------
// sample pie chart
const birdWatchData = [
    {
        Count: 50,
        Name: "Sparrow"
    },
    {
        Count: 30,
        Name: "Falcon"
    }
]

const pieChartDiv = document.querySelector('.pieChartDiv');

// create the PieChart instance, resulting in the PieChart to be drawn within the parent element specified
const pieChartExample = new PieChart("Bird Watching Data 2021", birdWatchData, "Count", "Name", pieChartDiv);
    

Now, go out and create!

Legend Class

new Legend(parentElement)

Parameters:

Name	Type	Description
parentElement	HTMLElement	the parent element for this Legend

Methods

setVisibility(isVisible) → {boolean}

Parameters:

Name	Type	Description
isVisible	boolean	optional (otherwise, simply toggle setting) boolean indicating whether display or not

Returns:

updateLegend(data, labelProperty, colours, height) → {Array}

Parameters:

Name	Type	Description
data	Object	the data to be drawn, with elements that have property labelProperty
labelProperty	string	a property in all elements of data
colours	Array	an array of colour code strings
height	number	the pixel height of the parent element

Returns:

BarGraph Class

new BarGraph(title, data, vertAxis, horAxis, parentElement)

Parameters:

Name	Type	Description
title	string	the title of the graph
data	object	array of objects containing the data to be displayed; data[vertAxis] and data[horAxis] must be numerical
vertAxis	string	string representing the attribute in all elements of data to be represented vertically
horAxis	string	string representing the attribute in all elements of data to be represented horizontally
parentElement	HTMLElement	element that is to be the parent element of the graph

Methods

addData(dataToAdd)

Parameters:

Name	Type	Description
dataToAdd	array	an array of objects with keys corresponding to horAxis and verAxis

changeTableDimensions(width, height) → {boolean}

Parameters:

Name	Type	Description
width	number	numerical pixel value > 0 or null if current width is to be maintained
height	number	numerical pixel value > 0 or null if current height is to be maintained

Returns:

drawData()

removeData(dataToRemove)

Parameters:

Name	Type	Description
dataToRemove	array	an array of objects with keys corresponding to horAxis and verAxis

setMaxValueHonour(enable) → {boolean}

Parameters:

Name	Type	Description
enable	boolean	optional (otherwise, simply toggle setting) boolean indicating whether to honour maximum value bar or not

Returns:

sortData(state) → {boolean}

Parameters:

Name	Type	Default	Description
state	number	1	1 if to be sorted ascending, 0 if no sorting is to occur (or to revert sorting), -1 if to be sorted descending

Returns:

updateScale() → {number}

Returns:

ScatterPlot Class

Methods

changeTableDimensions(width, height) → {boolean}

Parameters:

Name	Type	Description
width	number	numerical pixel value > 0 or null if current width is to be maintained
height	number	numerical pixel value > 0 or null if current height is to be maintained

Returns:

drawData()

updateDotSize(newSize) → {boolean}

Parameters:

Name	Type	Description
newSize	number	the size (> 0) in pixels to change the dot size to

Returns:

updateScale()

PieChart Class

Methods

addData(dataToAdd)

Parameters:

Name	Type	Description
dataToAdd	array	an array of objects with keys corresponding to horAxis and verAxis

changeTableDimensions(diameter) → {boolean}

Parameters:

Name	Type	Description
diameter	number	numerical pixel value > 0

Returns:

clearColours()

drawData()

removeData(dataToRemove)

Parameters:

Name	Type	Description
dataToRemove	array	an array of objects with keys corresponding to horAxis and verAxis

setColours(colours) → {boolean}

Parameters:

Name	Type	Description
colours		array with length this.data.length containing colour value strings

Returns:

setLegendVisibility(isVisible) → {boolean}

Parameters:

Name	Type	Description
isVisible	boolean	optional (otherwise, simply toggle setting) boolean indicating whether display or not

Returns:

sortData(state) → {boolean}

Parameters:

Name	Type	Default	Description
state	number	1	1 if to be sorted ascending clockwise, 0 if no sorting is to occur (or to revert sorting), -1 if to be sorted descending clockwise

Returns:

updateLegend()

generateColours(num) Function

generateColours(num) → {array}

Parameters:

Name	Type	Description
num	number	the integer number of colours to be returned

Returns: