Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The Installing via Bower article was about how you can install the FusionCharts Suite XT version can be installed via the Bower package manager.
This section demonstrates rendering a chart via Bower.

Take a look at the column 2D chart shown below:

FusionCharts will load here..

The data structure needed to render this chart via npm is given below:

<script src="bower_components/fusioncharts/fusioncharts.js"></script>
<script src="bower_components/fusioncharts/fusioncharts.maps.js"></script>
<script>
new FusionCharts ({
	"type": "column2d",
	"width": "500",
	"height": "300",
	"dataFormat": "json",
	"dataSource": {
	    chart:{},
	    data: [{
            "label": "Jan",
            "value": "420000"
        }, 
        {
            "label": "Feb",
            "value": "810000"
        }, 
        {
            "label": "Mar",
            "value": "720000"
        }, 
        {
            "label": "Apr",
            "value": "550000"
        }, 
        {
            "label": "May",
            "value": "910000"
        }, 
        {
            "label": "Jun",
            "value": "510000"
        }, 
        {
            "label": "Jul",
            "value": "680000"
        }, 
        {
            "label": "Aug",
            "value": "620000"
        }, 
        {
            "label": "Sep",
            "value": "610000"
        }, 
        {
            "label": "Oct",
            "value": "490000"
        }, 
        {
            "label": "Nov",
            "value": "900000"
        }, 
        {
            "label": "Dec",
            "value": "730000"
        }]
	}
}).render("chartContainer");
</script>
Top