Highcharts JS with values from database

Question

I have this code for the Highchart column:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            min: 0,
        },
...
        series: [{
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1],
                ['Istanbul', 14.2],
                ['Karachi', 14.0],
            ],
        }]
    });
});

and this file query.php:

<?php
include 'bd_cnx.php';
  $sql = "SELECT
            ...";
  $result = $conn->query($sql);
  if ($result->num_rows > 0){
  while($row = $result->fetch_assoc()){
    $ret[] =[$row['NUME_J'], floatval($row['TOTAL'])];
        }
  }
    echo json_encode($ret);
?>

How can I insert the returned values from query.php in the function javascript to series.data? Thank you!

Here is the official demo coverring ajax loading: http://www.highcharts.com/demo/line-ajax and there is the JSfiddle of the demo: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/ — ADreNaLiNe-DJ, Sep 13 '16 at 12:18

score 1 · Answer 1 · edited May 23 '17 at 10:33

It's covered in the documentation, with examples. Check out their web site: - you may find even more useful ideas. BTW, remember to send the correct JSON Content-Type, or some browsers may balk.

This is one way:

$(function () {
    // Get the CSV and create the chart
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {...

You can also get live data.

Finally, you can assign the series variable in several ways, and redraw the chart.

score 1 · Accepted Answer · answered Sep 13 '16 at 12:21

var data ;
$.ajax({
    method:"POST",
    url:"query.php",
    data:{},
    success:
         function(response){
             data=response;
             $('#container').highcharts({
                  chart: {
                     type: 'column'
                 },
                 xAxis: {
                     type: 'category',
                 },
                 yAxis: {
                     min: 0,
                 },
         ...
                 series: [{
                     data: data,
                 }]
             });
         },
});

Highcharts JS with values from database

2 Answers2