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!
精彩评论