Google line chart visualization with JSON blob

So I have a g开发者_如何学Gooogle 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.

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);
    }

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!