Echarts ajax data - php

Question

I tried to implement a chart with chart and ajax data type. When I would show result of a call in the xAxis not showing anything. This is a code of this chart
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var dati = $.ajax({
url: '../../admin/root/chart.php', // provide correct url
type: 'POST',
dataType: 'JSON', // <-- since youre expecting JSON
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
}
});
// specify chart configuration item and data
option = {
legend: {},
tooltip: {},
dataset: {
// Provide data.
source: [
['product', 'Aperti', 'chiusi'],
['Cognome'],
]
}, // Declare X axis, which is a category axis, mapping
// to the first column by default.
xAxis : {
type: 'category',
data: dati
}, // Declare Y axis, which is a value axis.
yAxis: {}, // Declare several series, each of them mapped to a
// column of the dataset by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
And this is what I call
$utente = mysqli_query($conne,"SELECT * FROM operatore") or die("Error:
".mysqli_error($conne));
while ($row=mysqli_fetch_array($utente)) {
$cognome=$row['cognome'];
$aperti=mysqli_query($conne,"SELECT * FROM rapportino WHERE
id_operatore='$row[matricola]'");
if ($aperti) {
$conta_ape=mysqli_num_rows($aperti);
}
$chiusi = mysqli_query($conne,"SELECT * FROM compila_rapportino WHERE
operatore_chius='$row[matricola]'");
if ($chiusi) {
$conta_chi=mysqli_num_rows($chiusi);
}
$myArray = array(
'cognome'=>$cognome,
'aperti' => $conta_ape,
'chiusi' => $conta_chi,
);
echo json_encode($myArray);
}
In this call data result can be repeat in different moment.

Answer 1

But from what I can see in your current post, you're dealing incorrectly with the Ajax call: you do the call, don't pass your data to the code that creates the chart. What you should do is to put this part of your code:
// specify chart configuration item and data
option = {
legend: {},
tooltip: {},
dataset: {
// Provide data.
source: [
['product', 'Aperti', 'chiusi'],
['Cognome'],
]
}, // Declare X axis, which is a category axis, mapping
// to the first column by default.
xAxis : {
type: 'category',
data: dati
}, // Declare Y axis, which is a value axis.
yAxis: {}, // Declare several series, each of them mapped to a
// column of the dataset by default.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
// use configuration item and data specified to show chart
myChart.setOption(option);
inside the success callback and use the data that you get (chart_values):
var myChart = echarts.init(document.getElementById('main'));
var dati = $.ajax({
url: '../../admin/root/chart.php', // provide correct url
type: 'POST',
dataType: 'JSON',
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
//# put that code here and use chart_values!
}
});
This way, once you get the data, you'll be able to draw the chart.