c# - Google Charts json data not loading -
i'm using asp.net mvc , google charts try , generate simple line graph 2 data records. i'm pulling data database, data isn't appearing on chart. data consists of 2 records 2 fields: weekofentry
(datetime) , weight
(decimal). chart appears, data points aren't there. i'm guessing data formatted improperly?
here's javascript:
<script type="text/javascript"> //load visualization api library , linechart library. google.load('visualization', '1.0', { 'packages': ['corechart'] }); //set callback run when google visualization api loaded. google.setonloadcallback(drawloseatonlinechart); //callback creates , populates data table, instantiates line chart, //passes in data, , draws it. function drawloseatonlinechart() { var url = "@url.action("getchartstatistics")"; var jsondata = $.ajax({ method: 'get', url: url, datatype: 'json', async: false }).responsetext; var data = new google.visualization.datatable(); data.addcolumn('string', 'weekofentry'); data.addcolumn('number', 'weight'); (var = 0; < data.length; i++) { data.addrow([jsondata[i].weekofentry, jsondata[i].weight]); } var options = { title: 'weight progression', legend: { position: 'right', alignment: 'center' }, vaxis: { title: 'weight' }, haxis: { title: 'week', slantedtext: true, slantedtextangle: 45 }, colors: ['e81a00'] }; var chart = new google.visualization.linechart(document.getelementbyid('lose-a-ton-line-chart')); chart.draw(data, options); } </script>
here's part of getchartstatistics()
method:
var linechartdata = (from in db.associates join aw in db.associateweights on a.registrationid equals aw.registrationid a.eventid == eventid && a.username == currentuser select new linechartdata { weight = aw.weight, weekofentry = aw.weekofentry }); return json(linechartdata, jsonrequestbehavior.allowget);
edit: here's how json data formatted when gets returned:
"[{"weight":190.0,"weekofentry":"\/date(1431921600000)\/"},{"weight":121.0,"weekofentry":"\/date(1432526400000)\/"}]"
any ideas on why data isn't loading?
you had issue in loop. here modified code.
//load visualization api library , linechart library. google.load('visualization', '1.0', { 'packages': ['corechart'] }); //set callback run when google visualization api loaded. google.setonloadcallback(drawloseatonlinechart); var url = "@url.action("getchartstatistics")"; var result = $.ajax({ method: 'get', url: url, datatype: 'json', async: false }); var jsondata = result.responsetext; var data = new google.visualization.datatable(); data.addcolumn('string', 'weekofentry'); data.addcolumn('number', 'weight'); $.each(json.parse(jsondata), function (index, obj) { data.addrow([obj.weekofentry, obj.weight]); }); var options = { title: 'weight progression', legend: { position: 'right', alignment: 'center' }, vaxis: { title: 'weight' }, haxis: { title: 'week', slantedtext: true, slantedtextangle: 45 }, colors: ['e81a00'] }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); public jsonresult getchartstatistics() { var linechartdata = new list<linechartdata>() { new linechartdata() { weekofentry = "sat", weight = 1}, new linechartdata() { weekofentry = "sat1", weight = 2}, new linechartdata() { weekofentry = "sat2", weight = 3}, new linechartdata() { weekofentry = "sat3", weight = 4}, }; return json(linechartdata, jsonrequestbehavior.allowget); }
Comments
Post a Comment