Iterating over json object for drawing a column chart?

試著忘記壹切 提交于 2019-12-23 22:02:32

问题


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.visualization.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" }
    ]
}

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


来源:https://stackoverflow.com/questions/3529630/iterating-over-json-object-for-drawing-a-column-chart

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!