Динамический Google-график с осью X единственного времени, когда диапазон составляет 1 день (новая проблема с датой) - PullRequest
0 голосов
/ 22 октября 2019

Здравствуйте, я пытаюсь создать линейную диаграмму Google с инжекцией данных ajax из db, чтобы иметь возможность получать определенные данные (день, неделя, месяц). Во-первых, я сделал отлично работающий символ без ajax, где я могу определить в php-файле, как много данных я хочу вставить, чтобы масштаб оси x соответствовал дате и времени или просто времени, если диапазон составляет 1 день. google.charts.load ('current', {packages: ['corechart', 'line'], 'language': 'EN'});google.charts.setOnLoadCallback (drawChart);

function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('datetime', 'dd/MM/yyyy HH:mm');
      data.addColumn('number', 'Voltage');
      data.addColumn('number', 'Current');
      data.addRows([<?php foreach($pamiec['x'] as $cld){
$time = strtotime($cld['ccn_date']);
$y = date("Y", $time);
$m = date("m", $time) - 1;
$d = date("d", $time);
$h = date("H", $time);
$i = date("i", $time);
      echo '[new Date('.$y.', '.$m.', '.$d.', '.$h.', '.$i.'), '.$cld['ccn_count'].', '.$cld['ccn_count'].'+20],   ';}?>]);
      var options = {         
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        },
        series: {
            0: { color: '#e7711b' },
            1: { color: '#43459d' },
          }
      };
var date_formatter = new google.visualization.DateFormat({ 
    pattern: "dd MMM yyyy HH:mm"
}); 
date_formatter.format(data, 0);
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
     // google.visualization.events.addListener(chart, 'ready', function () {
       // png.innerHTML = '<img src="' + chart.getImageURI() + '">';
        //console.log(png.innerHTML);
     // });
      chart.draw(data, google.charts.Line.convertOptions(options));   
    }

когда я создавал диаграмму с помощью ajax, я не мог внедрить данные с новой датой, из-за какой-то проблемы с аргументами mydate начиналась проблема со строкой. я попытался заменить всю часть PHP скрипта с эхом, сделанным в файле php точно таким же скриптом. так что я пришел с идеей из SO поток.:

google.charts.load('current', {packages: ['corechart', 'line'], 'language': 'EN'});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart () {
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        var options = {
      animation: {duration: 1000, easing: 'out', "startup": true},
      vAxis: {minValue: 0},
      pointSize: 4,
      pointShape: 'circle'
        };
        var date_formatter = new google.visualization.DateFormat({ 
    pattern: "dd MMM yyyy HH:mm"
}); 
    $("#allbooks").change(function(){ 
      var allbooks = $(this).val(); 
      var dataString = "allbooks="+allbooks; 
      $.ajax({ 
        type: "POST", 
        url: "index.php?app=main&action=fu1", 
        data: dataString,
        dataType:"text",
        success: function(result){
          var resultantAjaxResponse=result;
          resultantAjaxResponse=resultantAjaxResponse.replace(/'/g, '"').replace(/,\s*$/g, ''); 
    var arr = JSON.parse("[" + resultantAjaxResponse + "]");
    chart.draw(google.visualization.arrayToDataTable(arr), options);
        }       
      });
    });
    var resultantAjaxResponsee="['Date', 'This month', 'Last month'],['2016-10-01', 0, 0],['2016-10-02', 0, 0],['2016-10-03', 0, 0],['2016-10-04', 0, 0],['2016-10-05', 0, 0],['2016-10-06', 0, 0],['2016-10-07', 0, 0],['2016-10-08', 0, 0],";
    resultantAjaxResponsee=resultantAjaxResponsee.replace(/'/g, '"').replace(/,\s*$/g, ''); 
    var arrr = JSON.parse("[" + resultantAjaxResponsee + "]");
    chart.draw(google.visualization.arrayToDataTable(arrr), options);
 }

с данными, выбранными с помощью опции выбора из файла hp:

            if($_POST["allbooks"] == "1"){      
echo "['Date', 'Column 1', 'Column 2'],
['2016-10-01 19:21', 0, 0],
['2016-10-01 19:25', 10, 2],
['2016-10-01 19:31', 30, 4],
['2016-10-01 19:35', 50, 6],
['2016-10-01 19:41', 70, 8],
['2016-10-01 19:45', 90, 10]";  

, но когда я не использую новую дату в всегда показывать датуи часы, а не просто часы, когда выбран диапазон o 1 день. я предполагал заменить код в коде успеха ajax на

      var data = new google.visualization.DataTable();
      data.addColumn('datetime', 'dd/MM/yyyy HH:mm');
      data.addColumn('number', 'Voltage');
      data.addColumn('number', 'Current');
      data.addRows([result]);
var date_formatter = new google.visualization.DateFormat({ 
    pattern: "dd MMM yyyy HH:mm"
}); 
date_formatter.format(data, 0);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));

, где весь php-код был в php-файле, но он не работал ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...