Table of Contents
// Create FusionCharts JavaScript object. var myChartObj = new FusionCharts('/Charts/Column2D.swf', 'myChart', '400', '300', '0', '1'); // Set the source data xml. myChartObj.setXMLData('data.xml'); // Provide instruction to render the chart within a container // HTML element. myChartObj.render('containerDivId'); The above example involves creating a FusionCharts JS object, then setting the source data file and finally rendering the chart’s HTML mark-up inside a pre-coded container division.// Provide data source and render the chart. myChartObj.setXMLData(‘data.xml’); myChartObj.render(‘containerDivId’); The above codes demonstrate the ability of FusionCharts to accept an object as parameter to construct a new FusionCharts object. This has a five-fold advantage:The New Object-Style Construction
With the evolution of usage of JavaScript as a robust web application development language, FusionCharts JavaScript library upgraded itself into a more contemporary and future ready JavaScript library. The latest FusionCharts JS library incorporates the ability to render pure JavaScript charts. Consequently, the style of the API had to become more flexible to cater to a wider range of developers and development needs.// Create new FusionCharts object var myChartObj = new FusionCharts({ id: 'myChart', swfUrl: '/Charts/Column2D.swf', width: '400', height: '300' });
new FusionCharts(...)
)) itself. This reduces the number of lines of code and makes the code more manageable. var myChartObj = new FusionCharts({ id: 'myChart' swfUrl: '/Charts/Column2D.swf', width: '400', height: '300', // Provide data source dataSource: 'data.xml', dataFormat: 'xmlurl', // Provide the container HTML node's id renderAt: 'containerDivId' }); // Render the chart myChartObj.render();In the above code, all information required to render the chart has been specified during construction itself. This is definitely more readable and manageable.
var myChartObj = FusionCharts.render({ swfUrl: '/Charts/Column2D.swf', width: '400', height: '300', dataSource: 'data.xml', dataFormat: 'xmlurl', renderAt: 'containerDivId' });Note in above the usage of the static
FusionCharts.render()
method to render a FusionCharts object using the construction parameter alone. Also note the ability to create a FusionCharts object in the absence of an explicit “id” of the chart. This is quite a nifty feature. In the new FusionCharts JS library, if the chart’s id is undefined, an id is auto-generated ((The generated chart id looks like “chartobject-n” where n stands for an incremental integer)). This saves the additional overhead of maintaining and accessing the charts with a unique ID. Just having a reference to the myChartObj
JavaScript variable instead of repeated getChartFromId('myChartId')
function call is much simpler, cleaner and also performance optimized ((The getChartFromId()
function has been deprecated since FusionCharts 3.2 JS Library. Instead, we recommend you maintain a reference to the JavaScript variable of your chart. You can also use the new FusionCharts('my-chart-id')
way to get a reference back to your chart variable. Read more on retrieving chart reference in JavaScript )). Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…