Блог

Главная - Вопросы по программированию - Google chart ведет себя ненормально

Google chart ведет себя ненормально

#php #jquery #google-visualization

#php #jquery #google-визуализация

Вопрос:

Итак, у меня есть эта диаграмма Google, которая получает данные из базы данных, и она выглядит следующим образом:

введите описание изображения здесь

Как вы можете видеть, строка перетаскивается по всем данным (чем дальше вы продвигаетесь, тем хуже становится)

и это мой код:

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="dashboard">
         <div id="chart_div"></div>
         <div id="control_div"></div>
         <div id='dbgchart'></div>
</body>
</html>

<?php 
include "../includes/db_conn.php";

$sql = "SELECT FD_DATUM_INGEVOERD || ' ' || FT_TIJD_INGEVOERD FROM BANDZENDINGEN WHERE FD_DATUM_INGEVOERD BETWEEN '2012-06-04' AND '2012-06-05' AND FI_GEBRUIKER1='205'";
$sfm = $dbh->prepare($sql);
$sfm->execute();

$sqla = "SELECT FI_AFVOERKANAAL FROM BANDZENDINGEN WHERE FD_DATUM_INGEVOERD BETWEEN '2012-06-04' AND '2012-06-05' AND FI_GEBRUIKER1='205'";
$sfma = $dbh->prepare($sqla);
$sfma->execute();

$dateArr = $sfm->fetchAll(PDO::FETCH_COLUMN, 0);

$numbers = $sfma->fetchAll(PDO::FETCH_COLUMN, 0);
?>
<script type="text/javascript">
google.charts.load('44', {
  callback: drawAxisTickColors,
  packages: ['controls', 'corechart']
});


function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'value');

  var dateArr2 = (<?php echo json_encode($dateArr); ?>);
  console.log(dateArr2);

  var bitcoinArr = (<?php echo json_encode($numbers); ?>);
  console.log(bitcoinArr);

  bitcoinArr = bitcoinArr.map(Number);

  var array = [];

  var length = Math.min(dateArr2.length, bitcoinArr.length);
  for (var i = 0; i < length;   i) {
  array.push([ new Date(dateArr2[i]), bitcoinArr[i] ]);
  }

  data.addRows(array);

  var control = new google.visualization.ControlWrapper({
  controlType: 'ChartRangeFilter',
  containerId: 'control_div',
  options: {
      filterColumnIndex: 0,
      ui: {
          chartOptions: {
              height: 50,
              width: 600,
              chartArea: {
                  width: '80%'
              }
          }
      }
  }
  });

  var chart = new google.visualization.ChartWrapper({
  chartType: 'LineChart',
  containerId: 'chart_div',
  options: {
    width: 620,
    chartArea: {
      width: '80%'
    },
    hAxis: {
      format: 'hh:ss',
      slantedText: false,
      maxAlternation: 1
    }
  }
  });

 function setOptions() {
  var firstDate;
  var lastDate;
  var v = control.getState();

  if (v.range) {
    document.getElementById('dbgchart').innerHTML = v.range.start   ' to '   v.range.end;
    firstDate = new Date(v.range.start.getTime()   1);
    lastDate = new Date(v.range.end.getTime() - 1);
    data.setValue(v.range.start.getMonth(), 0, firstDate);
    data.setValue(v.range.end.getMonth(), 0, lastDate);
  } else {
    firstDate = data.getValue(0, 0);
    lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
  }

  var ticks = [];
  for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i  ) {
    ticks.push(data.getValue(i, 0));
  }

  chart.setOption('hAxis.ticks', ticks);
  chart.setOption('hAxis.viewWindow.min', firstDate);
  chart.setOption('hAxis.viewWindow.max', lastDate);
  if (dash) {
    chart.draw();
  }
 }

 setOptions();

 google.visualization.events.addListener(control, 'statechange', setOptions);

 var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
 dash.bind([control], [chart]);
 dash.draw(data);
 }
 </script>

Я уже пытался удалить миллисекунды, не имело значения.

Итак, что я делаю не так? Почему это происходит? Пожалуйста, помогите.

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

только что нашел что-то, оно пропускает определенное число, например: 2012-06-04 07:03: 06 14 данные существуют, но никогда не отображаются

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

Я нашел проблему

   if (v.range) {
    document.getElementById('dbgchart').innerHTML = v.range.start   ' to '   v.range.end;
    firstDate = new Date(v.range.start.getTime()   1);
    lastDate = new Date(v.range.end.getTime() - 1);
    data.setValue(v.range.start.getMonth(), 0, firstDate);
    data.setValue(v.range.end.getMonth(), 0, lastDate);
  } else {
    firstDate = data.getValue(0, 0);
    lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
  }

проблема в data.setValue, но как мне это исправить?

Ответ №1:

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

 data.addRows(array);
data.sort([{column: 0}]);

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

1. Ну, нет, но он что-то делает в тот момент, когда я перезагружаю страницу, строка больше не существует, но когда у меня есть эта часть, где вы можете «сосредоточиться» на данных, в тот момент, когда я касаюсь этой строки, она возвращается.

2. первым аргументом для setValue метода должен быть индекс строки таблицы данных. если индексы строк не совпадают с индексами месяцев дат в ваших данных, это может вызвать проблему…

3. что ж, если я перемещу полосу, появится следующее: Пн 04 июня 2012 07: 01: 56 GMT 0200 (Midden-Europese zomertijd) на Пн 04 июня 2012 09: 56: 29 GMT 0200 (Midden-Europese zomertijd), я думаю, что смогу создать рабочий образец

Ответ №2:

у меня это работает:

    data.setValue(v.range.start.getMonth(), 0);
   data.setValue(v.range.end.getMonth(), 0);