Tutorial : Create Realtime Charts With FusionCharts and Ajax
In this tutorial We will create realtime chart data update that reflect to price fluctuation. There are many solutions to do this, but now we will cover using a nice flash charting component called FusionCharts. FusionCharts comes with several edition, but now we will use the FusionCharts Free version. You can download it from http://www.fusioncharts.com/free/. By the time of this writing, FusionCharts Free version is 2.2.
The price fluctuation is visualized with a line type chart and data will be fetched from database every 5 seconds using Ajax call and then display the latest 5 (five) data to the chart without any page refresh. We assume you already familiar with deploying the FusionCharts Free and have experience using prototype.js, since we don't explain every details of the tools we used in this article. Please refer to FusionCharts Free documentation about deploying the chart and prototype.js documentation about the usage of the library.
Let's do it
1. You have to download the FusionCharts Free version, extract it, and copy the chart FCF_Line.swf (from the Chart folder) to your web root folder.
2. Copy FusionCharts.js (from JSClass folder) to your web root folder.
3. Download prototype.js from www.prototypejs.org and save it as prototype.js on your web root folder. We will use prototype.js to do the Ajax call.
4. Now prepare the table to store the fictional price fluctuation. Here is the simple table structure. We only need 2 (two) fields.
- update_datetime = store the date time
- price = store the price
5. Populate the table with some data. You can insert some data like below.
6. Now we will create the page that display the chart. Here is the page.
Save it as index.php.
7. See on above code, we use PeriodicalExecuter class to do Ajax call to script 'get_latest_data.php' on server. The 'get_latest_data.php' will provide you with latest 5 (five) price fluctuation from the database. After we receive the data through the callback function, then we pass the data to chart using updateChartXML() function on FusionCharts.js.
Important : Please note that updateChartXML() function is only available on FusionCharts.js on FusionCharts Free edition. If you use FusionCharts v3 you must use setDataXML() function. Here is the example.
Here is the code for the 'get_latest_data.php' script.
You can adjust the database connection above with your environment.
8. Done, our dynamic data chart prototype already finished. You can try to run the index.php from your web server and if everything is OK, your chart will be displayed with random data that represents the price fluctuation. Below is the screen capture of the result.
The logic is simple, when we call index.php on the first time, the FusionChart will call 'get_latest_data.php' through setDataURL() function, then on the bottom of the script will call PeriodicalExecuter from prototype.js to do Ajax call. The PeriodicalExecuter will call 'get_latest_data.php' every 5 seconds and send the returned data to the chart without page refresh. This article is just an idea and still can be improved further.
About the Author
Sony Arianto Kurniawan is a Technical Evangelist and writer at Sony AK Knowledge Center. Officially he is working for one of international mining company at Jakarta, Indonesia. Sony AK Knowledge Center is his personal knowledge sharing media that cover web development, PHP, MySQL, Javascript and knowledge management.
AJAX Magazine's RSS
Twitter page
Facebook page
