Google line chart visualization with JSON blob

Question

So I have a google line chart visualization with a data set that has been converted to JSON

Here is some code with properties:

var chartOptions = {curveType: 'none',
    width: 1200, height: 768,
    vAxis: {maxValue: 8000, title: 'Load time in ms'},
    hAxis: {title: 'Date and Time'},
    title: 'A Line Graph Example',
    titlePosition: 'out', 
    titleTextStyle: {fontSize: 14,textIndent: 10},
    fontSize: 12
};
    //Load core chart visualization
    google.load('visualization', '1', {packages: ['corechart']});

    //On load call back invoke function
    google.setOnLoadCallback(getData);

The JSON blob that I have to iterate through and display in the line chart looks something like this:

{
    "cols": [
        {
            "id": "formatted_timestamp",
            "label": "Formatted timestamp",
            "type": "number"
        },
        {
            "id": "fully_loaded",
            "label": "Fully loaded",
            "type": "number"
        },
        {
            "id": "load_time",
            "label": "Load time",
            "type": "number"
        },
        {
            "id": "location",
            "label": "Test location",
            "type": "string"
        },
        {
            "id": "time_to_first_byte",
            "label": "Time to first byte",
            "type": "number"
        },
        {
            "id": "timestamp",
            "label": "Timestamp",
            "type": "datetime"
        },
        {
            "id": "url",
            "label": "URL",
            "type": "string"
        },
        {
            "id": "view",
            "label": "View #",
            "type": "number"
        }
    ],
    "rows": [
        {
            "c": [
                {
                    "v": 1288888570000
                },
                {
                    "v": 9236
                },
                {
                    "v": 6348
                },
                {
                    "v": "Dulles, VA USA"
                },
                {
                    "v": 466
                },
                {
                    "v": "Date(2010, 10, 4, 16, 36, 10)"
                },
                {
                    "v": "http://example.com"
                },
                {
                    "v": 1
                }
            ]
        },
        {
            "c": [
                {
                    "v": 1288888592000
                },
                {
                    "v": 4499
                },
                {
                    "v": 3630
                },
                {
                    "v": "Dulles, VA USA"
                },
                {
                    "v": 322
                },
                {
                    "v": "Date(2010, 10, 4, 16, 36, 32)"
                },
                {
                    "v": "http://example2.com"
                },
                {
                    "v": 2
                }
            ]
        },
        {
            "c": [
                {
                    "v": 1288888582000
                },
                {
                    "v": 4499
                },
                {
                    "v": 3630
                },
                {
                    "v": "Dulles, VA USA"
                },
                {
                    "v": 322
                },
                {
                    "v": "Date(2010, 10, 4, 16, 36, 32)"
                },
                {
                    "v": "http://example3.com"
                },
                {
                    "v": 2
                }
            ]
        },

For the sake of brevity, I abbreviated the rows because there are a lot of them but they pretty much repeat with different data.

My question is how would I iterate through this blob and then display it in the google line chart visualization? Also how would I select different sets of data from this and display it over other data plotted on the same graph?

Thanks in advance.

Answer 1

There is a really slick library called underscore.js for exactly this type of challenge. Use the "pluck" function to pluck and join properties from sibling objects. Also, you can use a combination of datawrangler and jsondata.com to really make life sweet!

Answer 2

So after some trial and error with the Google Visualization API I figured out how to display data from the JSON data set.

    //Load core chart visualization package
    google.load('visualization', '1', {packages: ['corechart']});

    //On load call back initiate function
    google.setOnLoadCallback(getData);


    function getData() {

        //get Google vis data
        var query = new google.visualization.Query('/example/datatable');

        //set query parameters
        query.setQuery('select timestamp, this_time, foo group by foo');

        //send parameters and initiate function
        query.send(drawTable);

    }


function drawTable(response) {
        //error checking
        if (response.isError()){
        alert('Error in query: ' + response.getMessage() + '' + response.getDetailedMessage());
        return;
    }

    //convert response to JSON string
    var googleDataQuery = response.getDataTable().toJSON();

    //Convert JSON to google Data table
    var convertedData = new google.visualization.DataTable(googleDataQuery, 0.5);

    //Initialize a specific data table sub set view and store into a variable  
    var view = new google.visualization.DataView(convertedData);

    /*specify rows you want to see, in this case rows 1 through 100.  You can use an array for 
    specific rows ie [0,3,5]*/
    view.setRows(1, 100);

    //specify column data
    view.setColumns([1,2]); 

    //initiate type of chart. in this case a line chart
    visualization = new google.visualization.LineChart(document.getElementById('gchart'));

    //draw data table sub set with chart options
visualization.draw(view, chartOptions);
    }