使用Google Chart API可视化JSON数据

时间:2014-09-09 12:18:52

标签: c# asp.net json google-visualization visualization

我需要在ASP.NET中使用谷歌图表API可视化动态的json数据字符串。但我无法将这些数据放在数据表中以用于可视化。事实上,这些json数据可以通过数据库的某些API提取。我无法直接访问数据库。 以下是这种动态数据的样本:

{
   "APIVer":1,
   "result":1,
   "total_product":154,
   "returned_product":7,
   "products":[
      {
         "id":"430",
         "source":"SHELL",
         "action":"UPDATE",
         "type":"POSITION",
         "category":"ENVIRONMENT",
         "timestamp":"1367494024",
         "entities":[
            {
               "key":"station",
               "value":"6587"
            },
            {
               "key":"capacity",
               "value":"60612095"
            }
         ]
      }

感谢。

1 个答案:

答案 0 :(得分:0)

这是一个基本的骨架框架,您可以使用它构建DataTable来绘制图表:

/* "obj" is your json object
 * this creates a DataTable containing:
 *     Category
 *     Timestamp
 *     Key
 *     Value
 * entries for each entity in each product
 */
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Timestamp');
data.addColumn('string', 'Key');
data.addColumn('number', 'Value');

var p, c, t, e;
for (var i = 0; i < obj.products.length; i++) {
    p = obj.products[i];
    c = p.category;
    t = parseInt(p.timestamp);
    for (var j = 0; j < p.entities.length; j++) {
        e = p.entities[j];
        data.addRow([c, t, e.key, parseInt(e.value)]);
    }
}

您必须调整它以使用您想要绘制的特定字段。