Fetch Values for Chart using JSON for Database driven Chart (highchart.js)

Question

I am creating a simple Database driven Graph using Libraries from Codepen that are :

THIS and Highchart.js

I have a HTML File that simply displays the Chart, the main Data and processing is done through index.js file that contains the Static Values to draw the Graph. The file is :

$(function () {
var options = {

    chart: {
        renderTo: 'container'
    },

    subtitle: {
        text: 'Subtitle'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      tickInterval: 4
    },

/***  The following Values are needed to be fetched from DB which are now static */ 

    series: [{
        data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

},
chart = new Highcharts.Chart(options);

$('#redraw').click(function() {
    console.log(chart.xAxis[0]);
    chart.redraw();
});
});

Now I want to create PHP File that will Fetch the Data from the database and will send it to the JS File.

 $test=mysql_query("select id from tbl_graph");
 $rowtest=mysql_fetch_array($test);

Now what I want is the data that is fetched from the Database is needed to be send to the Index.js file so that the following static Values in index.js can be connected directly from the database.

 series: [{
        data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

I would appreciate any kind of help..

Answer 1

The answer is not so straight forward. To put it simple, you need ajax request to grab data from the server.

Here are the step in details

1. You need to create php, that returns json

   <?php
   $return_arr = array();
   $fetch = mysql_query("SELECT * FROM tbl_graph"); 
   while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
       $row_array[] = $row['value'];
      array_push($return_arr,$row_array);
   }
   
   echo json_encode($return_arr); // This will return [4,5,6,7] in json
   
   ?>
   

2. Update your script to grab data from php

   $(function () {
   var options = {
   
   chart: {
       renderTo: 'container'
   },
   
   subtitle: {
       text: 'Subtitle'
   },
   
   xAxis: {
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     tickInterval: 4
   },
   
   /***  The following Values are needed to be fetched from DB which are now static */ 
   
   series: [{
       data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
   }]
   
   },
   chart = new Highcharts.Chart(options);
   
   $('#redraw').click(function() {
    // whenever you click redraw, it will grab json from php file above    
    $.getJSON('http://yourpath.com/test.php', function (csv) {
        chart.series[0].setData(csv,true);//then set data and return csv
      }
    });
   

   });

I haven't tested the code. Probably you need to figure it out if there is any syntax error. but hopefully you get sort of idea how to get json from php

Answer 2

In the PHP script, you need to prepare arrays, and convert to the json, by json_encode() function. Then only what you need is use $.getJSON() in javascript and use your data in highcharts.

Other solution is inject php in javascript like here:

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database/