Iterating over json object for drawing a column chart?
I use,
google.load('visualization', '1', {'packages': ['columnchart']});
//google.setOnLoadCallback(drawChart);
function drawChart(response) {
alert(response.customerlist);
var data = new google.visualization.DataTable();
data.addColumn('string', 'dbZipcode');
data.addColumn('string', 'countusers');
data.addRows(response.customerlist.length);
for (var i = 0; i < response.customerlist.length; i++) {
data.setValue(i, 0, response.customerlist[i].dbZipcode);
data.setValue(i, 1, response.customerlist[i].countusers);
}
var container = document.getElementById('spnChart');
container.innerHTML = "";
var chart = new google.visualizati开发者_JS百科on.ColumnChart(container);
chart.draw(data, {width: 800, height: 300, is3D: true, title: 'Page Views',
legend:'none', titleX:'ZipCode', titleY:'Total Users'});
}
But my chart doesn't contain the drawn graph. Any suggestion.
and my json data,
{
"customerlist": [
{ "dbZipcode": "21313213", "countusers": "1" },
{ "dbZipcode": "2313213", "countusers": "1" },
{ "dbZipcode": "23324324", "countusers": "1" },
{ "dbZipcode": "2342432", "countusers": "1" },
{ "dbZipcode": "32424422343", "countusers": "1" },
{ "dbZipcode": "324324324", "countusers": "1" },
{ "dbZipcode": "324324324324", "countusers": "1" },
{ "dbZipcode": "3244324", "countusers": "1" },
{ "dbZipcode": "3422344", "countusers": "1" },
{ "dbZipcode": "342424324", "countusers": "1" },
{ "dbZipcode": "3424324", "countusers": "1" },
{ "dbZipcode": "435345", "countusers": "1" },
{ "dbZipcode": "627028", "countusers": "1" },
{ "dbZipcode": "641030", "countusers": "2" },
{ "dbZipcode": "642582", "countusers": "1" }
]
}
Just change,
data.addColumn('number', 'countusers');
data.addRows(response.customerlist.length);
for (var i = 0; i < response.customerlist.length; i++) {
data.setValue(i, 0, response.customerlist[i].dbZipcode);
data.setValue(i, 1, response.customerlist[i].countusers-0);
}
精彩评论