Nano Hash - криптовалюты, майнинг, программирование

Пустая страница диаграммы Google с данными из JSON

Я работаю над приборной панелью KPI, моя база данных содержит информацию об использовании горячей воды (hwater) в месяц (adate), сравнивая этот год с прошлым годом в виде диаграммы с областями.

Однако, когда я запускаю этот отчет, моя веб-страница пуста. Я попытался установить google.visualization.arrayToDataTable в .DataTable при объявлении имен столбцов, а также безуспешно пытался использовать AJAX на стороне сервера.

Area_Chart.php

<?php
require_once  ("connect.php");

//fetch table rows from mysql db
$query = $handler->query("
    SELECT MONTH(adate) as month,
    MAX(case when YEAR(adate) = YEAR(CURRENT_DATE)-1 THEN  hwater ELSE 0 END) as 'Last_Year',
    MAX(case when YEAR(adate) = YEAR(CURRENT_DATE) THEN hwater ELSE 0 END) as 'This_Year'
    FROM utlt
    WHERE YEAR(adate) = YEAR(CURRENT_DATE)-1 OR year(adate) = YEAR(CURRENT_DATE)
    GROUP BY MONTH(adate)
    ORDER BY MONTH(adate)");

$query->execute();
$results=$query->fetchAll(PDO::FETCH_NUM);
$json=json_encode($results);

//echo $json;
?>    

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

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

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          [ {label: 'Year', id: 'month'},
            {label: 'Last_Year', id: 'Last_Year', type: 'number'},
            {label: 'This_Year', id: 'This_Year', type: 'number'}],
          <?=$json?>      
        ], false);


        var options = {
          isStacked: 'absolute',
          title: 'Hot Water Useage',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}

        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      } 


    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

Вывод эха $json:

[["1","1.671","21.269"],["2","3.810","22.017"],["3","5.554","24.045"],["4","6.930","25.036"],["5","8.845","27.116"],["6","11.793","28.058"],["7","13.244","28.996"],["8","14.471","30.342"],["9","16.260","30.977"],["10","17.199","31.923"],["11","18.494","33.155"],["12","19.563","33.797"]]

Выше я заметил, что hwater из utlt записаны в "", означает ли это, что это строка? Тип поля на самом деле десятичный (6,3).

javascript arrays json php google-visualization
06.12.2016

Ответы:


1

hwater из utlt, завернутый в "", определенно проблема,
так как тип столбца 'number'

попробуйте использовать JSON_NUMERIC_CHECK для кодирования json

$json=json_encode($results, JSON_NUMERIC_CHECK);

ИЗМЕНИТЬ

думаю, я нашел проблему здесь...

var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'month'},
    {label: 'Last_Year', id: 'Last_Year', type: 'number'},
    {label: 'This_Year', id: 'This_Year', type: 'number'}],
  <?=$json?>  // <-- problem    
], false);

проблема заключается в том, что внешний массив обертывает массивы строк
//--> [[1,1.671,21.269]...

учитывая, где находится <?=$json?>, строки не должны быть заключены в массив

это можно легко исправить, используя метод addRows для загрузки json

удалить json из arrayToDataTable

var data = google.visualization.arrayToDataTable([
  [ {label: 'Year', id: 'month', type: 'number'},
    {label: 'Last_Year', id: 'Last_Year', type: 'number'},
    {label: 'This_Year', id: 'This_Year', type: 'number'}],
]);

затем добавьте еще один оператор для метода addRows, которому нужен внешний массив

data.addRows(
  <?=$json?>
);

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

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [ {label: 'Year', id: 'month', type: 'number'},
      {label: 'Last_Year', id: 'Last_Year', type: 'number'},
      {label: 'This_Year', id: 'This_Year', type: 'number'}],
  ]);

  data.addRows(
    [[1,1.671,21.269],[2,3.810,22.017],[3,5.554,24.045],[4,6.930,25.036],[5,8.845,27.116],[6,11.793,28.058],[7,13.244,28.996],[8,14.471,30.342],[9,16.260,30.977],[10,17.199,31.923],[11,18.494,33.155],[12,19.563,33.797]]
  );

  var options = {
    isStacked: 'absolute',
    title: 'Hot Water Useage',
    hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 0}

  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

06.12.2016
  • Спасибо за ваш вклад и проверку. Я добавил то, что вы сказали, в результате массив выглядел так; [[1,1.671,21.269],[2,3.81,22.017],[3,5.554,24.045],[4,6.93,25.036],[5,8.845,27.116],[6,11.793,28.058],[7,13.244,28.996],[8,14.471,30.342],[9,16.26,30.977],[10,17.199,31.923],[11,18.494,33.155],[12,19.563,33.797]] Когда я подаю это в свой Area_Chart.php, я все еще получаю пустую страницу. 07.12.2016
  • возможно, попробуйте изменить первый столбец на --› {label: 'Year', id: 'month', type: 'number'} 07.12.2016
  • О да, как только я отправил сообщение, я увидел, что ему не хватает Type, я добавил его, но, к сожалению, это тоже ничего не изменило. 07.12.2016
  • Если я закомментирую параметры метки /*[ {label: 'Year', id: 'month', type: 'number'}, {label: 'Last_Year', id: 'Last_Year', type: 'number'}, {label: 'This_Year', id: 'This_Year', type: 'number'}],*/ , я получу следующую ошибку: Data column(s) for axis #0 cannot be of type string× 07.12.2016
  • Большое спасибо, кажется, исправили! Я заметил еще одно отличие, о котором вы не упомянули, и которое заключается в том, что в моем исходном коде у меня было google.charts.load('current', { 'packages':['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() {, а у вас было google.charts.load('current', { callback: drawChart, packages: ['corechart'] }); function drawChart() { Это тоже было чем-то. почему у вас есть обратный вызов: в Charts.load, 08.12.2016
  • он должен делать то же самое, но я считаю, что размещение в операторе загрузки работает лучше, и одной строкой кода меньше... 08.12.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..