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.
Via:
http://feedproxy.google.com/~r/AJAXMagazine/~3/iDBKAo9OXg0/tutorial_create_realtime_chart.html
