How do I make a flot chart use values from a database?

Question

I want to bind the stacked bar chart with some database values. I've got it working using hard-coded values. How do I make it use values from a database?

At present, I've got this code in a JavaScript file:

$(function () {
    var css_id = "#placeholder";
    var data = [
        {label: 'Strong', data: [[1,250], [2,250], [3,250], [4,250], [5,250], [6,250], [7,250], [8,250], [9,250], [10,250], [11,250], [12,250]]},        
         {label: 'Weak', data: [[1,200], [2,200], [3,200], [4,200], [5,200], [6,200], [7,200], [8,200], [9,200], [10,200], [11,200], [12,200]]},        
          {label: 'Medium', data: [[1,50], [2,50], [3,50], [4,50], [5,50], [6,50], [7,50], [8,50], [9,50], [10,50], [11,50], [12,50]]},        
    ];
    var options = {
        series: {stack: 0,
                 lines: {show: false, steps: false },
                 bars:  {show: true, barWidth: 0.9, align: 'center'},
                },
        xaxis: {ticks: [[1,'Jan'], [2,'Feb'], [3,'March'], [4,'April'], [5,'May'],[6,'June'],[7,'July'],[8,'August'],[9,'Sept'],[10,'Oct'] ,[11,'Nov'],[12,'Dec'] ]},
    };

    $.plot($(css_id), data, options);
});

Answer 1

The easiest way is to generate this file on server-side. It means, that your PHP code is echoing the whole stuff, gets numbers from the database.

Make a copy from this js file and replace numbers with placeholders, to make it a template:

{label: 'Strong', data: [[1,#STRONG_1], [2,#STRONG_2]...]}

From this, your PHP (or which server-side language you're using) program comes:

1. Load your template
2. Read data from the database
3. Replace placeholders with values in the template
4. Echo it

You may use URL parameter for telling the program which data is have to read, e.g. mygraph.php?date=20100629

Also, you have to insert this code (step 1-4.) to your page generator script. Don't forget to add opening and closing "script" tags before and after your JS code.

If you're done this, you should learn how to do the similar job with AJAX.