Google Linecharts json数据源?

时间:2012-07-19 10:31:27

标签: asp.net-mvc json charts google-visualization

我使用谷歌折线图,但我不能成功地将信息源分配给图表。

脚本

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', { 'packages': ['corechart'] });

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
    var jsonData = $.ajax({
        url: '@Url.Action("AylikOkumalar", "Enerji")',
        dataType: "json",
        async: false
    }).responseText;

    var rows = new google.visualization.DataTable(jsonData);

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'T1');
    data.addColumn('number', 'T2');
    data.addColumn('number', 'T3');

    data.addRows(rows);


    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, { curveType: "function",
        width: 700, height: 400,
        vAxis: { maxValue: 10 }
    }
    );
}
</script>

动作

public ActionResult AylikOkumalar()
{
   IEnumerable<TblSayacOkumalari> sayac_okumalari = entity.TblSayacOkumalari;

   var sonuc = sayac_okumalari.Select(x => new
   {
       okuma_tarihi = ((DateTime)x.okuma_tarihi).ToShortDateString(),
       T1 = (int)x.toplam_kullanim_T1,
       T2 = (int)x.toplam_kullanim_T2,
       T3 = (int)x.toplam_kullanim_T3
   });

   return Json(sonuc, JsonRequestBehavior.AllowGet);
}

json输出

enter image description here

和脚本错误:

Argument given to addRows must be either a number or an array.

我第一次使用它。所以我不知道该怎么办。如何使用mvc 3的图表。没有足够的例子。

感谢。

1 个答案:

答案 0 :(得分:-1)

data.addRows(rows);

'rows'应该是一个数组 - 类似于:

data.addRows([
  [new Date(1977,2,28)], 1, 2, 3],
  [new Date(1977,2,28)], 1, 2, 3]
]);

或者你的jsonData可以是整个结构:

{
    "cols": [
        {"id": "", "label": "Date", "type": "date"},
        {"id": "", "label": "T1",   "type": "number"}
    ],
    "rows": [
        {"c":[{"v": "Apr 24th"}, {"v": 56000} ]},
        {"c":[{"v": "May 3rd" }, {"v": 68000} ]}
    ]
}