Introducing FusionCharts | FusionCharts Beginner's Guide: The Official Guide for FusionCharts Suite

Time for action — creating JavaScript only charts

1. Create a copy of our FirstChart.html in the same location and name it as JavaScriptChart.html.

2. Add the following lines of code, as highlighted, before the constructor.

<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">
<!--FusionCharts.setCurrentRenderer('javascript');
var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");// -->
</script>
</body>
</html>

3. Open the page in a browser. You should see the same chart as earlier, but this time rendered using JavaScript. It has animations and interactivity similar to the Flash version as shown in the following screenshot:

Note

How different is the Flash rendering from JavaScript rendering?

The JavaScript version of FusionCharts behaves similar to the Flash version, offering most of the functional and cosmetic configuration. With the exception of a true 3D chart, all charts look and behave almost the same as their Flash counterpart. There are minor visual differences in the JavaScript version such as the width of columns, effect of shadows, handling of long x-axis labels, appearance of scroll bars, and so on. A detailed list of such differences are present in FusionCharts Documentation | Introduction | JavaScript Charting Capabilities | How different is JavaScript charts from Flash charts?

What just happened?

You just converted the previous chart to a pure JavaScript chart, irrespective of the device it is now viewed on. The following snippet of code instructs FusionCharts to switch the rendering mode to JavaScript:

FusionCharts.setCurrentRenderer('javascript');

If your page contains multiple charts, this setting applies to all such charts that are defined after this line of code. Hence, if you declare this at the beginning, all the charts in the page will render using JavaScript. You would not need to declare the same for each chart in the page.

Note

JavaScript cannot access data stored on your hard drive in some browsers

Some browsers restrict JavaScript from accessing the local filesystem due to security reasons. Hence, the JavaScript charts, when running from your local hard drive, would not be able to access XML or JSON data provided as a URL. However, when run from a server, including localhost, they will run fine. An alternate method to get JavaScript charts working locally is to use the Data String method, which we will explore in the next section.

Have a go hero — build a dashboard for Harry

In this example, you created a standalone Column 3D chart. How about inching towards building a complete dashboard? To do so, convert the existing chart to a Column 2D chart and add the following three charts to this page. In addition, specify different width and height for each chart to accommodate the amount of data it presents, and also place them in order of importance of the chart to Harry.

A Line 2D chart, using Line.swf, comparing monthly revenues for this year. For this, you need to create an XML data with the<set> element for each month of the year.
A Pie 2D chart, using Pie2D.swf, showing the composition of expenses of this year split under these categories: Salary, Cost of Goods, Marketing Costs, Overheads, and Administration.
A Column 2D chart, using Column2D.swf, showing the top five salespersons for the year.

All these charts use the same single-series XML format that you had earlier created. Remember to provide a different ID for each chart and its container DIV. Also, do not forget to encode special characters such as& (ampersand) or' (apostrophe) in XML.

Once you are done, let us explore the other way to provide XML data to FusionCharts—as a string, instead of providing a URL, for example, Data.xml.

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

FusionCharts Beginner's Guide: The Official Guide for FusionCharts Suite

FusionCharts Beginner's Guide: The Official Guide for FusionCharts Suite

Overview of this book

Time for action — creating JavaScript only charts

Note

What just happened?

Note

Have a go hero — build a dashboard for Harry

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access