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 :

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..

Thanks for your help but what problem I am facing is that I need to get the values into Javascript only and don't want to display them in HTML like as that in the link that you mentioned : Please refer the Line over there : $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html — Jiteen
– Jiteen, Commented May 2, 2014 at 9:50
Yes so inside the ajax success function you would build the chart where series would be something like series: [{ data: data }] — Wilmer
– Wilmer, Commented May 2, 2014 at 9:56

William Calvin · Accepted Answer · 2014-05-02 10:10:28Z

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

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

?>

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

answered May 2, 2014 at 10:10

William Calvin

6256 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jiteen Over a year ago

Hi, the code wasn't displaying anything so I tested the output of the PHP File individually for which I got the output as : [["1"],["1","2"],["1","2","3"],["1","2","3","4"],["1","2","3","4","7"],["1","2","3","4","7","8"],["1","2","3","4","7","8","5"],["1","2","3","4","7","8","5","6"]] I am not very much proficient in this, so I would appreciate if you can help me out a little bit. now, this data is provided to mu JS file and I am not able to see any output Graph!

Jiteen Over a year ago

Actually I got your Logic and even I was having the same thing in my mind, but you gave a Big Picture of it, so thanks. But still I am not getting the exact output that I want, so just needed a guidance. thanks!

William Calvin Over a year ago

You need to understand that series of highchart is accepting an array of values. So when I say json_encode($result), it shows something like [1,3,5,6,4,5]. That is the input for the series, if you need more than one series, you may need to change the javascript.

Sebastian Bochan · Accepted Answer · 2014-05-02 09:45:30Z

0

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/

answered May 2, 2014 at 9:45

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related