FusionCharts v3
Overview
FusionCharts is a flash charting component that can be used to render data-driven animated charts. Made in Adobe Flash 8 (formerly Macromedia Flash), FusionCharts can be used with any web scripting language like HTML, .NET, ASP, JSP, PHP, ColdFusion etc., to deliver interactive and powerful charts. Using XML as its data interface, FusionCharts makes full use of fluid beauty of Flash to create compact, interactive and visually-arresting charts.
Using the class in HTML page
We'll now modify our HTML page to use this class to embed the chart.
Create a copy of Chart.html and save it as JSChart.html in the same folder. Make the following changes to it:
Here, we first include the FusionCharts JavaScript class file using:
Create a DIV in the page body with a unique id (chartdiv in example above).
<div id="chartdiv" align="center">...</div>
FusionCharts is a flash charting component that can be used to render data-driven animated charts. Made in Adobe Flash 8 (formerly Macromedia Flash), FusionCharts can be used with any web scripting language like HTML, .NET, ASP, JSP, PHP, ColdFusion etc., to deliver interactive and powerful charts. Using XML as its data interface, FusionCharts makes full use of fluid beauty of Flash to create compact, interactive and visually-arresting charts.
Using the class in HTML page
We'll now modify our HTML page to use this class to embed the chart.
Create a copy of Chart.html and save it as JSChart.html in the same folder. Make the following changes to it:
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "0");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html>
Here, we first include the FusionCharts JavaScript class file using:
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
Create a DIV in the page body with a unique id (chartdiv in example above).
<div id="chartdiv" align="center">...</div>