Echarts ajax data

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.

I want to show the data on the chart.php page in the chart created with echarts — mario lucci, Nov 08 '18 at 13:25
That's a wish, not a question. Since it looks like you are looking for debugging help, please describe the expected and the actual behaviour, and what you have tried to debug. — YakovL, Nov 08 '18 at 19:34

YakovL · Answer 1 · 2018-11-09T21:18:40.510

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.

Echarts ajax data

1 Answers1