Блог

Главная - Вопросы по программированию - Создание линейной диаграммы Google с использованием переданного массива JSON

Создание линейной диаграммы Google с использованием переданного массива JSON

#javascript #json #ajax #datetime #google-visualization

#javascript #json #ajax #дата и время #google-визуализация

Вопрос:

У меня есть массив JSON, переданный через ajax, и у меня возникают проблемы с отображением данных. Мне нужно иметь возможность передавать массив на диаграмму, динамически добавляя столбцы без дубликатов.

Я пробовал передавать разные значения, используя arrayToDataTable() и DataTable() , а затем используя data.addColumns() и data.addRow() , однако каждый раз ошибки.

запущен вызов ajax:

 $.ajax({
    type: "POST",
    url: "/file.php",
    data: {
        data: dataHere,
    },
    dataType: "JSON",
    success: function(result) {
        var div = mydiv;
        drawInterfaceChart(result,div);
    },
});

JSON, закодированный из PHP с использованием:

 $SQL = "SELECT DATE_FORMAT(date, 'new Date(%Y, %c, %d, %H, %i, %s)') as date, ifDesc, ifInOctets FROM tablename WHERE date between (CURDATE() - INTERVAL 1 MONTH ) and CURDATE()";
$Results = mysqli_query($db, $SQL) or die("Mysql cannot run Query");
$SQLRows = mysqli_num_rows($Results);
if ($SQLRows > 0) {
    $rows = array();
    while ($row = MySQLi_fetch_assoc($Results)) {
        $rows[] = $row;
    }
    echo json_encode($rows);
}

Пример переданного массива JSON:

 0: {date: "new Date(2019, 3, 26, 16, 13, 15)", ifDesc: "lo", ifInOctets: "2147483647"}
1: {date: "new Date(2019, 3, 26, 16, 13, 15)", ifDesc: "Port1", ifInOctets: "2147483647"}
2: {date: "new Date(2019, 3, 26, 16, 13, 15)", ifDesc: "Port2", ifInOctets: "2147483647"}
3: {date: "new Date(2019, 3, 26, 16, 13, 16)", ifDesc: "Port6", ifInOctets: "2147483647"}
4: {date: "new Date(2019, 3, 26, 16, 13, 16)", ifDesc: "imq0", ifInOctets: "906413834"}
5: {date: "new Date(2019, 3, 26, 16, 17, 31)", ifDesc: "lo", ifInOctets: "2147483647"}
6: {date: "new Date(2019, 3, 26, 16, 17, 49)", ifDesc: "Port1", ifInOctets: "2147483647"}
7: {date: "new Date(2019, 3, 26, 16, 17, 53)", ifDesc: "Port2", ifInOctets: "171330279"}
8: {date: "new Date(2019, 3, 26, 16, 17, 57)", ifDesc: "Port6", ifInOctets: "2147483647"}
9: {date: "new Date(2019, 3, 26, 16, 17, 57)", ifDesc: "imq0", ifInOctets: "1103910085"}
10: {date: "new Date(2019, 3, 26, 16, 20, 38)", ifDesc: "lo", ifInOctets: "2147483647"}
11: {date: "new Date(2019, 3, 26, 16, 20, 39)", ifDesc: "Port1", ifInOctets: "2147483647"}
12: {date: "new Date(2019, 3, 26, 16, 20, 40)", ifDesc: "Port2", ifInOctets: "194386054"}
13: {date: "new Date(2019, 3, 26, 16, 20, 41)", ifDesc: "Port6", ifInOctets: "2147483647"}
14: {date: "new Date(2019, 3, 26, 16, 20, 42)", ifDesc: "imq0", ifInOctets: "1128562685"}

Моя функция рисования диаграммы:

 function drawInterfaceChart(array,divR) {
    var dataSet = [];
    $.each(array, function (data, value) {
        dataSet.push([value.date, value.ifDesc, value.ifInOctets]);
    });
    var data = google.visualization.arrayToDataTable(dataSet);
    var chart = new google.visualization.LineChart(document.getElementById(divR));
    var options = {
        title: '',
        legend: { position: 'right' }
    };
    chart.draw(data, options);
}

Этот макет возвращает ошибку: столбцы данных для оси # 0 не могут иметь тип string

Столбец 0 должен быть datetime, а также линейная диаграмма, представленная с каждым столбцом, и это данные для каждого значения ‘ifDesc’. Я хочу добавить больше данных в диаграмму, поэтому создание столбцов должно быть динамичным.

Заранее спасибо!

Редактировать:

Я забыл упомянуть, что на моей странице есть: google.charts.load('current', {'packages':['corechart', 'gauge']}); и у меня есть другие рабочие диаграммы на той же странице.

Ответ №1:

здесь есть несколько проблем, в первую очередь с датой.

вы не сможете получить фактическую дату и время из этой строки —> "new Date(2019, 3, 26, 16, 13, 15)"
без использования eval метода, который я бы не рекомендовал.

кроме того, в javascript, при использовании этого конкретного конструктора даты,
месяц основан на нуле, что означает -> January = 0

таким образом, вышеуказанная дата будет получена как 26 апреля, я думаю, вы хотите 26 марта.

вот доказательство (запустите следующий фрагмент)… 

 var testDate = eval("new Date(2019, 3, 26, 16, 13, 15)");
console.log(testDate);

рекомендуем изменить формат на —> 3/26/2019 16:13:15
{date: "3/26/2019 16:13:15", ifDesc: "lo", ifInOctets: "2147483647"}
затем преобразуйте в datetime в javascript -> new Date(value.date)

далее диаграмма ожидает, что каждый из них ifDesc будет находиться в отдельном столбце таблицы данных,
как в следующей структуре… 

 ['Date', 'lo', 'Port1', 'Port2', 'Port6', 'img0'],
[new Date('3/26/2019 16:13:15'), 2147483647, 2147483647, 2147483647, 2147483647, 906413834],

это будет сложно встроить в запрос без жесткого кодирования.

вместо этого мы можем использовать представление данных Google для создания необходимой структуры.

передайте json через ajax в следующей структуре.

{date: "3/26/2019 16:13:15", ifDesc: "lo", ifInOctets: "2147483647"}

загрузите таблицу данных, аналогичную той, что вы сделали,
нам нужно преобразовать дату и проанализировать число… 

 var dataSet = [];
$.each(array, function (data, value) {
    dataSet.push([new Date(value.date), value.ifDesc, parseFloat(value.ifInOctets)]);
});
var data = google.visualization.arrayToDataTable(dataSet);

затем используйте следующее, чтобы создать представление данных для линейной диаграммы.
сначала он создает столбец для каждого ifDesc . 

 var viewColumns = [0];
var distinctLabels = data.getDistinctValues(1);
$.each(distinctLabels, function (index, label) {
  viewColumns.push({
    calc: function (dt, row) {
      if (dt.getValue(row, 1) === label) {
        return dt.getValue(row, 2);
      }
      return null;
    },
    type: 'number',
    label: label
  });
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);

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

 google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var jsonData = [
    {date: "3/26/2019 16:13:15", ifDesc: "lo", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:15", ifDesc: "Port1", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:15", ifDesc: "Port2", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:16", ifDesc: "Port6", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:13:16", ifDesc: "imq0", ifInOctets: "906413834"},
    {date: "3/26/2019 16:17:31", ifDesc: "lo", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:17:49", ifDesc: "Port1", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:17:53", ifDesc: "Port2", ifInOctets: "171330279"},
    {date: "3/26/2019 16:17:57", ifDesc: "Port6", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:17:57", ifDesc: "imq0", ifInOctets: "1103910085"},
    {date: "3/26/2019 16:20:38", ifDesc: "lo", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:20:39", ifDesc: "Port1", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:20:40", ifDesc: "Port2", ifInOctets: "194386054"},
    {date: "3/26/2019 16:20:41", ifDesc: "Port6", ifInOctets: "2147483647"},
    {date: "3/26/2019 16:20:42", ifDesc: "imq0", ifInOctets: "1128562685"}
  ];

  drawInterfaceChart(jsonData, 'chart_div');

  function drawInterfaceChart(array, divR) {
    var dataSet = [];
    $.each(array, function (data, value) {
      dataSet.push([new Date(value.date), value.ifDesc, parseFloat(value.ifInOctets)]);
    });
    var data = google.visualization.arrayToDataTable(dataSet, true);

    var viewColumns = [0];
    var distinctLabels = data.getDistinctValues(1);
    $.each(distinctLabels, function (index, label) {
      viewColumns.push({
        calc: function (dt, row) {
          if (dt.getValue(row, 1) === label) {
            return dt.getValue(row, 2);
          }
          return null;
        },
        type: 'number',
        label: label
      });
    });
    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    var chart = new google.visualization.LineChart(document.getElementById(divR));
    var options = {
      title: '',
      legend: {position: 'right'},
      interpolateNulls: true  // <-- add this option
    };
    chart.draw(view, options);  // <-- use view to draw chart
  }
});  
 <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"></div>

Комментарии:

1. Потрясающая работа, большое вам спасибо за ваш очень подробный ответ — это работает именно так, как мне было нужно