Динамически добавлять строки в Google Charts с помощью цикла JQuery - PullRequest
Новая
       11

Динамически добавлять строки в Google Charts с помощью цикла JQuery

0 голосов
/ 25 января 2019

Я хочу пройтись по возврату JSON из C #, чтобы динамически добавлять строки в диаграмму Google.Я использовал этот код снова и снова, и он не будет загружен в график.

Я вижу, как Json возвращается в браузер и тестирует его с RestClient, поэтому я рад, что бит C # работает, но я не вижу, почему Json не загружается в линейный график Google и не создаетлиния.На графике отображается ошибка Cannot read property 'getTime' of null.Я пробовал несколько разных способов создания массива для данных. 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.")
    } 
});

и мой Json выглядит так: 

   [{
    "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"
  }]

Я создаю Json следующим образом: 

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));
}

ТИА

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Я до сих пор не знаю, почему это работает в другом приложении и не будет работать в этом.Я заметил, что для каждого цикла не выполняется, и я получаю сообщение об ошибке в консоли о данных Json, как показано выше.Он видел строку возврата Json из C # как один длинный объект.

Я добавил parseJSON в JQuery, и это сработало.

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

Если кто-нибудь может объяснить мне, почему это не сработает изначально, я бы очень хотел знать.

0 голосов
/ 25 января 2019

График, кажется, выглядит хорошо, используя те же данные, только жестко запрограммированные здесь ...

см. Следующий рабочий фрагмент ... 

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>
...