Bar Graph - Graphs #1

A bar graph is a chart that uses either horizontal or vertical bars to show comparisons among categories. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Some bar graphs present bars clustered in groups of more than one (grouped bar graphs), and others show the bars divided into subparts to show cumulative effect (stacked bar graphs).

Input

The main function will be createBarGraph in the Graph class but the process to get there is as follows:

var graph = new Graph();
graph.addGraph(item);
graph.createBarGraph(0);
var myBarGraph = graph.getGraph(0)

Firs the class must be initialized then the item must be added to the unprocessedGraph array by calling the addGraph function with the parameter of a RawGraph object. Finally the graph must be processed as a Bar Graph so createBarGraph with the input parameter of the id of the bar graph that was inputed into the addGraph function. Then to receive the getGraph function must be called with the id specified.

Output

Output for all functions listed below:

getGraph this function must either return an object in the barGraphs array that matches the id or if none are found must return false.

addGraph this function must search all arrays for an object that contains the same item id if some are found it is invalid and should return false. If you none are found then add the item to the unprocessedGrpahs array then return this.

createBarGraph this function must first search for the object with the matching id in the unprocessedGraphs array if none are found then return false. If one is found then you must process the raw graph data and convert it to the Bar Graph format.

Preload

Data

You will be preloaded with a Data class this Data class has two properties name,value.

The name property will hold a string which will be a reference to each bar on the graph (for each data with a unique name there must be a seperate bar).

The value property will be an array with data in it. Each piece of data must be of the same type as the type property in the RawGraph object which will be explained below.

RawGraph You will also be preloaded with the RawGraph Class which will be your input for the function addGraph inside the Graph class.
Parameters:

title the title parameter is used to hold the title of the graph

id the id paremter is what is used to reference the graph and must be passed on to the new graph objects you will create (examples to follow).

compare the compare parameter is basically the title for each X and Y axis it is not used but must be passed on (examples to follow).

type the type parameter is important because it defines the type of the input data if any of the input data does not match the type then ignore it.

items the items parameter will be an array of Data Objects this is basically the datasource for the graph.

BarGraph The BarGraph class is what the output is expecting from the function createBarGraph in the Graph class.
Parameters:

id the id parameter must be passed into this class the id should be the same as the input id.

title the title parameter also must be passed from the input object to the output object.

compare the compare parameter must be passed as well to the output parameter from the input parameter.

graph the graph parameter must be a dynmaic object with specialised property names (examples below).

Examples

This is an example of the BarGraph object as an output.

Input: {title:'test',
        id:0,
        compare:{X:'X axis',Y:'Y axis'},
        type:0,
        items:[{name:'item1',value:5},
        {name:'item1',value:7},
        {name:'item1',value:5},     
        {name:'item2',value:5},
        {name:'item1',value:7},
        {name:'item2',value:5}]}

Output: {  id:0,
           title:'test',
           compare:{X:'X axis',Y:'Y axis'},
           graph:{
             groups:{
               'item1':{
                 label:{
                   '5':[1,1],
                   '7':[1,1]
                 }
               },
               'item2':{
                 label:{
                   '5':[1,1]
                 }
               }
             }
           }
         }

So as you can see from the input items groups are made for each type of name there is then inside each group there is a label which has a property name of that value and the arrays are generated from the amount of items that contain that label so in this example there are two items with a name of item1 and a value of 5 so an array of [1,1] is created to represent a bar of height 2.

Reference: Wikipedia: Bar Graph