Здравствуйте, я пытаюсь создать линейную диаграмму 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-файле, но он не работал ...