Data Format

The graphing library will display data in the form of a bar, pie, or line chart. The library expects the data to contain an array of objects, each with at least two properties with the same property names and data types (at least one of which is numeric):

    var wordCounts = [{
        word: "the",
        count: 15130,
        value: 33
    }, {
        word: "of",
        count: 8260,
        value: 21
    }, {
        word: "and",
        count: 7285,
        value: 19
    }, {
        word: "a",
        count: 6588,
        value: 1
    }, {
        word: "to",
        count: 5043,
        value: 35
    }, {
        word: "in",
        count: 5004,
        value: 23
    }, {
        word: "he",
        count: 4226,
        value: 13
    }, {
        word: "his",
        count: 3333,
        value: 36
    }, {
        word: "i",
        count: 3009,
        value: 9
    }, {
        word: "s",
        count: 2837,
        value: 19
    }];

Seeing the Data

To create the default bar graph in the window showing the data above, use the following command:

graph.bar(wordCounts);

If not specified, the first property with a non-numeric value is selected for the x-axis and the next property with a numeric value is used for the y-axis.

To add a title to the graph, pass in an object with a title property containing the name:

options = { title: "Top Ten Words in Gutenberg Text" };

To format the labels of the x-axis values, set the “orientation” property of the options object to angle of rotation in degrees:

options.orientation = 45;
graph.bar(wordCounts, options);

Similarly, a pie chart can be created to show the same set of data:

graph.pie(wordCounts, options);

Unlike the pie and the bar charts, the line graph requires a date or numeric value for the x-axis because that axis is scaled. One or both of x and y properties of the options object can be used to specify which columns should be used for the respective axes. 

options.x = "count";
options.y = "value";

        
        
options.title = "Frequency of Word Values"
graph.line(wordCounts, options);

If the x-axis of the line or bar chart begins to looks a little cluttered, the tickInterval property can be set to specify the fraction of x-axis value labels are kept. By setting the tickInterval to 2, every other x-axis label is kept.

options.tickInterval = 2;
options.orientation = 0;
graph.line(wordCounts, options);

Using the Graph

By clicking on the graph, it will open in a new window. From here, it can be moved as an object within the new window, resized as desired, printed, saved, and copied as a picture.