Free Web programing Tutorial

What is Ajax Chart ?
Ajax chart is data visualization in web for give information Using Javascript to get Open Flash Chart and reload data from databases.

Why Using FusionCharts to build Ajax Charts ?

FusionCharts lets you to generate dynamic charts and graphs on client side using data-driven flash charts, without the need reload scripts from server side so don’t need more connection with server side. FusionCharts can be used with any script language like HTML, PHP, ColdFusion, .Net, JSP etc. FusionCharts using XML data interface to required from databases. How to build Ajax FusionCharts

Step 1.
Install FusionChart in your web with Download FusionChart and Extract in your localhost folder

Step 2
you need to assemble three things:

1. SWF File for the chart that you want to create. We want to create a 3D Column Chart, whose SWF file is named as Column3D.swf. All the chart SWF files are present in Download Package > Charts folder.
2. XML Data File. FusionCharts accepts data only in a pre-defined XML format. So, you'll need to convert your data to XML format – either using a server side scripting language or manually.
3. HTML Wrapper File. This HTML file would contain the code to embed the chart.

Step 3
Create php xml parser to crate xml data source

Code = PHP (data.php)

$query = "SELECT * FROM tabel_name "; $resultID = mysql_query($query, $linkID) or die("Data not found 1."); $xml_output = "<?xml version=\"1.0\"?>\n"; $xml_output .= "<chart palette='4' caption='Title Chart'>\n"; for($x = 0 ; $x < mysql_num_rows($resultID) ; $x++){     $row = mysql_fetch_assoc($resultID); $query2 = "SELECT * FROM tabel_name WHERE field='".$row['field']."'"; $resultID2 = mysql_query($query2, $linkID) or die("Data not found 2."); $row2 = mysql_fetch_assoc($resultID2); $xml_output .="<set label='" . $row['field'] . "' value='" . $row2['sum'] . "'/>";

Step 4
Now you can create HTML file to view Flash Chart what you need to build FunsionChart
you must include "chart/JSClass/FusionCharts.js" in HTML file to call ajax script library
For Example you can see this HTML Code

Code = HTML (chart.html)

<div id='chartdiv' align='center'>         FusionCharts. </div>       <script type='text/javascript'>            var chart = new FusionCharts('../content/chart/Charts/Pie3D.swf', 'ChartId', '600', '500', '0', '0');            chart.setDataURL('../content/chart/Gallery/Data/data.php?mode=golongan');                       chart.render('chartdiv');         </script>

# chart.setDataURL() you must include php xml parser to get xml data see Step 3

# var chart = new FusionCharts you can change this chart type and size select chart type and size where do you like and call XML data.

Share on Facebook