Живая диаграмма в Google Chart

1

Я не знаю, если его слишком много, чтобы спросить в стеке, но я просто так измучен и разочарован своей собственной способностью. Я делал эту диаграмму, как 3 месяца, и не был успешным. Я всегда пытаюсь снова составить диаграмму Google. м с просьбой о помощи там.

У меня есть мой liveata.php(time_stamp (named ts), ph, wet - значения данных в моей базе данных) в json формате, показывающем:

[{ "TS": "12", "Ph": 736, "влажный": 92}, { "TS": "27", "Ph": 0, "влажный": 0}, { "ц": "21", "ph": 192, "влажный": 24}, { "TS": "15", "ph": 0, "влажный": 0}]

то есть "ts" (отметка времени ("d")) показывает конкретный день месяца (этот пример месяц август). "ph" и "влажность" являются общей стоимостью этого конкретного дня. Очевидно, что я делаю чарты здесь, и я знаю, что я немой полный амбиций. Я пытаюсь создать живой график, который выглядит так Изображение 174551

Теперь моя проблема с этим кодом ниже, который я нашел, который работает на их примере, но попытка моего php json терпит неудачу.

функция drawChart() {

    var jsonData = $.ajax({
      url: 'livedata.php',
      dataType: 'json',
      async: false
    }).done(function (results) {

      var data = new google.visualization.DataTable(jsonData);

      data.addColumn('datetime', 'time_stamp');
      data.addColumn('number', 'ph');
      data.addColumn('number', 'moist');

      $.each(results, function (i, row) {
        data.addRow([
          (new Date(row.time_stamp)),
          parseFloat(row.ph),
          parseFloat(row.moist)
        ]);
      });

      var chart = new google.visualization.LineChart($('#chart').get(0));

      chart.draw(data, {
        title: 'Soil Analysis'
      });

    });

  }

  // load chart lib
  google.load('visualization', '1', {
    packages: ['corechart']
  });

  // call drawChart once google charts is loaded
  google.setOnLoadCallback(drawChart);
Теги:
charts
google-visualization
google-chartwrapper

1 ответ

1
Лучший ответ

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

для начала используйте текущую версию графиков Google...

используйте это → <script src="https://www.gstatic.com/charts/loader.js"></script>

jsapi - это старая версия...

не это → <script src="https://www.google.com/jsapi"></script>

это изменит только оператор load

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

как для ajax async: false устарел, удалите его...


next, contructor для таблицы данных принимает только данные json в определенном формате
найдено здесь → Формат конструктора JavaScript Литеральные данные Параметр

просто оставьте аргумент пустым

var data = new google.visualization.DataTable();

наконец, опубликованный json-пример не содержит свойства для time_stamp

выглядит как ts вместо этого, вы можете попробовать использовать текущий месяц вместо этого

рекомендуем что-то похожее на следующее...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  $.ajax({
    url: 'livedata.php',
    dataType: 'json'
  }).done(function (results) {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'time_stamp');
    data.addColumn('number', 'ph');
    data.addColumn('number', 'moist');

    $.each(results, function (i, row) {
      var today = new Date();

      data.addRow([
        new Date(today.getFullYear(), today.getMonth(), row.ts),
        parseFloat(row.ph),
        parseFloat(row.moist)
      ]);
    });

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(data, {
      title: 'Soil Analysis'
    });
  });
}
  • 0
    Шляпа .. Я так благодарен за вашу помощь, попробую это сейчас !! большое спасибо ..
  • 0
    Белая шляпа !! :) Большое спасибо, это работает .. ^ _ ^
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню