2012-07-19 77 views
0

我使用谷歌折线图,但我不能成功抠图来源。Google Linecharts json数据源?

脚本

<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
data.addRows(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} ]} 
    ] 
} 
+0

的问题是在是正在传递的数据不像上面所做的那样是静态的。如果你想使用你的服务从数据库中获取数据会怎么样。这是如何融入上述设计中的。 – Donny 2012-10-12 14:29:12