Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

This section talks about how the fusioncharts and the fusionmaps packages can be installed via the Bower package management software.

The fusioncharts package contains files for all charts and widgets and only two map definition files, for the World map and the USA map. The fusionmaps package contains files for all charts and widgets and map definition files for all maps. Consequently, it takes longer for installation than the fusioncharts package and is recommended only if your application needs maps other than the World and USA maps.

Installing the fusioncharts Package

Step 1: Install the FusionCharts package.

bower install fusioncharts

Step 2: Load FusionCharts module.

<script src="bower_components/fusioncharts/fusioncharts.js"></script>

Step 3: Load the charts module.

<script src="bower_components/fusioncharts/fusioncharts.maps.js"></script>

Step 4: Create the FusionCharts instance required to render the chart.

<script>
	new FusionCharts({
		"type": "column2d",
		"width": "500",
		"height": "300",
		"dataFormat": "json",
		"dataSource": {
			chart:{},
			data: [{value: 500}, {value: 600}, {value: 700}]
			}
		}).render("chartContainer");
	</script>

Installing the fusionmaps Package

Step 1: Install the FusionMaps package.

bower install fusionmaps

Step 2: Load FusionCharts.

<script src="bower_components/fusionmaps/fusioncharts.js"></script>

Step 3: Load the maps module.

<script src="bower_components/fusionmaps/fusioncharts.maps.js"></script>

Step 4: Load the map definition file(s) for the map(s) to be rendered using the format: fusioncharts.<MAP_ALIAS>.js, where MAP_ALIAS gets replaced by the map’s JavaScript alias. Click here to get the alias names for all map definition files. Map definition files for all maps to be rendered in the application have to be included.

Therefore, assuming that you need to render the world map, the alias name world replaces MAP_ALIAS in the format.

<script src="bower_components/fusionmaps/maps/fusioncharts.world.js"></script>

Step 5: Create the FusionCharts instance required to render the map.

<script>
	new FusionCharts({
		"type": "world",
		"width": "500",
		"height": "300",
		"dataFormat": "json",
		"dataSource": {
			chart:{}
		}
	}).render("chartContainer");
	</script>

Unlike the core files that are stored in the fusioncharts directory, all map definition files are stored in the maps directory and are required to be fetched from there.

Package-specific Dependencies for Bower

  • To render a chart belonging to the PowerCharts package, load the PowerCharts module:
<script src="bower_components/fusioncharts/fusioncharts.powercharts.js"> </script>
  • To render a chart belonging to the FusionWidgets package, load the FusionWidgets module:
<script src="bower_components/fusioncharts/fusioncharts.fusionwidgets.js"> </script>

To know which chart belongs to which package, refer the list of charts.

  • To render a map, load the FusionMaps module and the map definition file for that map:
<script src="bower_components/fusioncharts/fusioncharts.maps.js"> </script>
<script src="bower_components/fusioncharts/maps/fusioncharts.world.js"> </script>

To know the map definition file names, refer the list of maps.

Chart-specific Dependencies for Bower

For some chart types, you need to include/exclude certain files and in a certain order. These chart types and the corresponding files are mentioned below:

  • To render the zoom-scatter chart, it is necessary to include the fusioncharts.js and fusioncharts.charts.js files before the fusioncharts.zoomscatter.js file.
<script src = "bower_components/fusioncharts/fusioncharts.js"> </script> 
<script src = "bower_components/fusioncharts/fusioncharts.charts.js"> </script>  
<script src = "bower_components/fusioncharts/fusioncharts.zoomscatter.js"> </script>
  • To render the treemap chart, it is necessary to include the fusioncharts.js and fusioncharts.powercharts.js files before the fusioncharts.treemap.js file.
<script src = "bower_components/fusioncharts/fusioncharts.js"> </script>  
<script src = "bower_components/fusioncharts/fusioncharts.powercharts.js"> </script>  
<script src = "bower_components/fusioncharts/fusioncharts.treemap.js"> </script>
  • To render the SS Grid chart only the fusioncharts.js and the fusioncharts.ssgrid.js files are needed.
<script src = "bower_components/fusioncharts/fusioncharts.js"> </script>  
<script src = "bower_components/fusioncharts/fusioncharts.ssgrid.js"> </script>
  • To render the Gantt chart only the fusioncharts.js and the fusioncharts.gantt.js files are needed.
<script src = "bower_components/fusioncharts/fusioncharts.js"> </script>  
<script src = "bower_components/fusioncharts/fusioncharts.gantt.js"> </script>
Top