JSON — PHP массив в Google-чартах
Мне нужна небольшая помощь, чтобы поместить данные PHP в диаграммы Google.
Я создал простой массив
$chart_arr = array($year, $new_balance);
json_encode($chart_arr);
Если я бегу
<?php echo json_encode($chart_arr);?>
Я вижу следующее: [2015,1150] [2016,1304.5] [2017,1463.635] [2018,1627.54405] [2019,1796.3703715], поэтому я думаю (?) Я получаю правильные числа, закодированные из моего forloop, который генерирует $ год и $ новый_баланс.
Я хочу нанести эти цифры на график Google.
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Balance');
data.addRows([
<?php echo json_encode($chart_arr);?>
]);
Или в качестве альтернативы:
data.addRows([
<?php echo $chart_arr;?>
]);
А потом продолжается …
var options = {
title: 'My Savings',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
отображается как …
<div class="grid-container">
<div class="grid-100 grid-parent">
<div id="curve_chart" style="width: 100%; height: auto"></div>
</div>
</div>
Я пробовал несколько вариантов, но либо не получаю данные на график, либо не отображаю график.
Может ли кто-нибудь помочь мне показать, где я иду не так?
Я видел другой связанный пост, который использовал следующий код:
$chartsdata[$i] = array($testTime, $testNb);
echo json_encode($chartsdata);
var jsonData = $.ajax({
url: "test.php",
dataType: "json",
async: false
}).responseText;
var obj = JSON.stringify(jsonData);
data.addRows(obj);
Это тот подход, на который мне нужно обратить внимание?
заранее спасибо
Решение
я вижу, вы не узнали, как это сделать после первого вопроса, поэтому я сделал вам рабочий пример, надеюсь, это поможет вам, Дейв :).
Если у вас есть вопросы по этому поводу, не стесняйтесь спрашивать!
<?php
//create array variable
$values = [];
//pushing some variables to the array so we can output something in this example.
array_push($values, array("year" => "2013", "newbalance" => "50"));
array_push($values, array("year" => "2014", "newbalance" => "90"));
array_push($values, array("year" => "2015", "newbalance" => "120"));
//counting the length of the array
$countArrayLength = count($values);
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Balance');
data.addRows([
<?php
for($i=0;$i<$countArrayLength;$i++){
echo "['" . $values[$i]['year'] . "'," . $values[$i]['newbalance'] . "],";
}
?>
]);
var options = {
title: 'My Savings',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
<div class="grid-container">
<div class="grid-100 grid-parent">
<div id="curve_chart" style="width: 100%; height: auto"></div>
</div>
</div>
Другие решения
Недавно я немного разбирался с Google Charts API, и у меня есть несколько рекомендаций. Код PHP, который вы написали, должен в основном работать, но он требует, чтобы ваш код Javascript был встроен в страницу PHP.
Может быть, это нормально для ваших целей, но я в основном рекомендую держать ваш Javascript отдельно от вашего PHP. Некоторым разработчикам может быть удобно с одним, но не с другим, поэтому смешивание двух языков может стать проблемой обслуживания. Теперь это в значительной степени оставляет вас с помощью AJAX для извлечения данных из ваших JSON-диаграмм. Это хороший подход, но мне не нравится код, который вы указали в своем вопросе по нескольким причинам.
Во-первых, код использует async: false который уберет контроль вашего пользователя над браузером во время выборки данных. Другими словами, браузер будет зависать до тех пор, пока данные не будут возвращены из запроса AJAX.
Кроме того, я не понимаю, в целом .responseText условность. Я понимаю, что выполняет код; Я просто не понимаю, почему автор выбрал именно этот подход. Вот что я бы сделал вместо этого.
$.ajax({
url: "test.php",
dataType: "JSON",
data: [any POST parameters that you need here],
type: "POST",
success: function(json) {
var jsonData = JSON.parse(json); // jsonData will be a Javascript object or array.
data.addRows(jsonData);
drawChart();
},
error: function(jxqhr) {
// Handle a bad AJAX call
}
});
Так как это поможет вашему приложению в целом? Что ж, в своем коде на стороне сервера вы можете обрабатывать любые ошибки (например, неверный ввод данных пользователем), отвечая на вызов AJAX ошибкой HTTP 500, и вызов AJAX может сообщить о проблеме вашему пользователю. Кроме того, когда ваша страница загружается, остальная часть страницы будет продолжать загружаться, пока ваш AJAX-вызов отключен для извлечения данных.
json_encode работает просто отлично, вы можете поместить его в переменную, например var grafica = <?php echo json_encode($grafica); ?> ; (посмотрите мой пример ниже) или точно так же, как вы поместили его в свой пример, за исключением того, что единственная проблема в нем состоит в том, что у вас есть двойные скобки, те, что внутри jaso_encode($chart_arr) объект и внешнее data.addRows([ ... ]), что дает вам [[...]] и генерирует ошибку, снимите скобки, попробуйте так:
data.addRows(
<?php echo json_encode($chart_arr);?>
);
а также не этот
data.addRows([
<?php echo json_encode($chart_arr);?>
]);
Я включил и пример того, как я его использую, помните, что в документации (что, на мой взгляд, могло бы быть лучше) они поместили весь код в <head> раздел, потому что у них есть все данные там, но это может вызвать проблемы в реальных рабочих примерах, я только поместил CDN (Сеть доставки контента) Google Chart в <head> и в <body> весь код Javascript после кода PHP, не включенный в этот пример для ясности, затем <div> но этот последний может идти перед тегами сценария. Порядок важен, потому что вам нужно сначала получить данные, прежде чем строить график.
Надеюсь, это поможет.
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head><body>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'fecha'); // Implicit domain column.
data.addColumn('number', 'peso'); // Implicit data column.
data.addColumn({type:'string', role:'annotation'}); // columna para anotaciones
data.addColumn({type:'string', role:'style'}); // comumna para estilovar grafica = <?php echo json_encode($grafica); ?> ;
data.addRows(grafica);var options = {
title:'Peso Total', width:600,height:400,
colors: ['#C0C0C0'],
curveType: 'function',
legend: 'none',
pointSize: 12,
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#99ff99',
opacity: 0.5,
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="margin: 80px auto; width: 650px; height: 450px; border: 2px solid #4CAF50; border-radius: 20px; padding:5px; "></div></html>