时间戳

首页 > 解决方案 > Dynamically add rows to Google Charts using JQuery loop

c# - Dynamically add rows to Google Charts using JQuery loop

问题描述

I want to loop through a JSON return from C# to dynamically add rows to a google chart. I have used this same code, time and again, and it will not load into the chart.

I can see the Json coming back to the browser and have tested it with RestClient so I am happy the C# bit works, but I am not seeing why the Json won't load into the Google line chart and create the line. There is an error showing on the chart Cannot read property 'getTime' of null. I have tried a few different ways of creating the array for data.AddRow.

JQuery Ajax call:

$.ajax({
    url: '@Url.Action("GetJsonChartData", "ProjectCharts")',
    datatype: 'json',
    type: 'get',
    async: false,
    data: { serial: serial, uid: uid, from: from, to: to },
    contentType: 'application/json; charset=utf-8',
    success: function (d) {
        $.each(d, function (index, item) {                        
            data.addRow([new Date(item.ReadingDate), Number(item.ReadingValue), item.ToolTip]);                   
        });
    },
    error: function () {
        alert("Error loading chart data.")
    } 
});

and my Json looks like:

   [{
    "ReadingDate": "2018-12-04 09:43:39",
    "ReadingValue": "17.5",
    "ToolTip": "Tue, 04 Dec 18 09:43\r\n Value: 17.5"
  },
  {
    "ReadingDate": "2018-12-04 09:45:39",
    "ReadingValue": "16.8",
    "ToolTip": "Tue, 04 Dec 18 09:45\r\n Value: 16.8"
  },
  {
    "ReadingDate": "2018-12-04 09:47:39",
    "ReadingValue": "16.1",
    "ToolTip": "Tue, 04 Dec 18 09:47\r\n Value: 16.1"
  },
  {
    "ReadingDate": "2018-12-04 09:49:39",
    "ReadingValue": "15.7",
    "ToolTip": "Tue, 04 Dec 18 09:49\r\n Value: 15.7"
  }]

I create the Json as follow:

public JsonResult GetJsonChartData(string serial, string uid, string from, string to) {           
    var g = new GetChartData(_configuration);
    var items = g.GetChartDataFromSqlServer(serial, uid, f, t);
    return Json(JsonConvert.SerializeObject(items, Formatting.Indented));
}

TIA

标签： c#jqueryjsongoogle-visualization

解决方案

图表似乎画得很好，使用相同的数据，只是在这里硬编码......

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn({type: 'date', label: 'Date'});
  data.addColumn({type: 'number', label: 'Value'});
  data.addColumn({type: 'string', role: 'tooltip'});

  var d = [{
    "ReadingDate": "2018-12-04 09:43:39",
    "ReadingValue": "17.5",
    "ToolTip": "Tue, 04 Dec 18 09:43\r\n Value: 17.5"
  },
  {
    "ReadingDate": "2018-12-04 09:45:39",
    "ReadingValue": "16.8",
    "ToolTip": "Tue, 04 Dec 18 09:45\r\n Value: 16.8"
  },
  {
    "ReadingDate": "2018-12-04 09:47:39",
    "ReadingValue": "16.1",
    "ToolTip": "Tue, 04 Dec 18 09:47\r\n Value: 16.1"
  },
  {
    "ReadingDate": "2018-12-04 09:49:39",
    "ReadingValue": "15.7",
    "ToolTip": "Tue, 04 Dec 18 09:49\r\n Value: 15.7"
  }];

  $.each(d, function (index, item) {
    data.addRow([new Date(item.ReadingDate), Number(item.ReadingValue), item.ToolTip]);
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

推荐阅读