How do I create a dynamic chart using a database as the data source?

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Steve on 31st January 2017
Hi,

I want to know how can I create a dynamic Bar Chart with value coming from my database ?

For example here A basic SVG Bar Chart (coming from the website):
---------------------------------------------------------------------------------
----------------------------------------------------------------------------------
This goes in the documents header:
***********************************
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.bar.js"></script>

Put this where you want the chart to show up:
************************************************
<div style="padding: 15px">
     <div style="width: 750px; height: 300px" id="chart-container"></div>
</div>
This is the code that generates the chart:
********************************************
<script>
     new RGraph.SVG.Bar({
         id: 'chart-container',
         data: [8,5,9,3,5,2,4],
         options: {
             hmargin: 20,
             xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
             title: 'A basic Bar chart',
             colors: ['red','pink'],
             shadow: true,
             shadowOpacity: 0.2
         }
     }).draw();
</script>

And then I have my php function where I connect to the database and with query I get the number of product sales per day
---------------------------------------------------------------------------------
----------------------------------------------------------------------------------

But how to replace the xaxislabels to get the data coming from my query? ( per day)
and how to replace the data to get the data coming from my query ? (number of product sales)


K.R

Steve
Posted by Richard on 31st January 2017
Hi there,

I think the best way would be to set up a PHP script on your server that fetches the information from the database and then outputs just that data (with no HTML) like this:

www.rgraph.net/getdata.html

You can then use the SVG AJAX library to fetch that page
(eg www.mydomain.com/getdata.php ) and then you can update the data used by your chart and redraw it.

This is an example script (the output of the getcsv.php script that sits on your server can be seen here: www.rgraph.net/getdata.html ):


<script>
     function update ()
     {
         RGraph.SVG.AJAX.getCSV('/getdata.html', function (csv)
         {
             // Uncomment this to see the data that's being retrieved
             // alert(csv);


             if (window.bar) {
                 RGraph.SVG.clear(window.bar.svg);
             }

             window.bar = new RGraph.SVG.Bar({
                 id: 'chart-container',
                 data: csv,
                 options: {
                 }
             }).draw();
         });
    
         setTimeout(function ()
         {
             update()
         }, 1000);
     }
     update();
</script>


I've yet to add some basic SVG AJAX demos, but you can have a look at the canvas basic AJAX demos to get an idea of the process:

www.rgraph.net/demos/index.html#basic






Richard

Add a reply




« Back to message list