Installation

FusionCharts Suite XT includes the FusionCharts server-side Django wrapper that lets you create interactive, data-driven charts. Using the wrapper, you can create charts in your browsers without writing any JavaScript code. The required JavaScript and HTML code is generated as a string in the server and inserted in the web page for generating charts.

In this article, we will show you how you can download and install the FusionCharts Django wrapper and all the other dependencies on your system.

The FusionCharts Django wrapper requires Python 2.7 or higher version.

Install the FusionCharts Django Wrapper

In order to install and start working with Django-FusionCharts, you need to download the FusionCharts Suite XT package which contains:

• JavaScript files to render Charts, Widgets, and PowerCharts in the js folder.
• JavaScript files to render maps in the js > maps folder.
• JavaScript files to apply themes in the js > themes folder.

The folder structure is shown below:

You need to copy all the files/folders from fusioncharts-suite-xt > js folder to the STATIC folder of your application.

• The download package also contains fusioncharts.py file in the fusioncharts-suite-xt > integrations > django > fusioncharts-wrapper folder. The folder structure is shown below:

The django folder in the FusionCharts Suite XT package is available from v3.13.0.

You need to copy the fusioncharts.py file from fusioncharts-suite-xt > integrations > django > fusioncharts-wrapper to the STATIC folder in your project's folder.

Following is the list of JavaScript files present in your fusioncharts-suite-xt > js folder:

To install FusionCharts Suite XT, simply copy and paste the JavaScript files from the downloaded package into your project folder.

After that, you can include the FusionCharts JavaScript library in your web applications and start building your charts, gauges, and maps. Configure your STATIC_ROOT path and follow the steps given below:

Step 1: Assuming you have already configured your STATIC_ROOT path, place the FusionChart library inside the static > FusionCharts folder in your project.

Step 2 (optional): Include the theme files in the static > FusionCharts folder in your project.

Add the following code to templates > index.html file:

{% load static %}
<script type="text/javascript" src="{% static "path/to/local/fusioncharts.js" %}"></script>
<script type="text/javascript" src="{% static "path/to/local/themes/fusioncharts.theme.fusion.js" %}"></script>

This completes the installation of FusionCharts in your application. To see how to create a chart, click here .

Installing FusionMaps for your project

FusionCharts Suite XT provides 1400+ data-driven maps as a part of the FusionMaps product. To reduce the size of the download package, we have included the fusioncharts.maps.js file and only two map definition files - the World Map, and the Map of USA. However, you can download the remaining map definition files to plot maps of those countries/regions.

If you are using version v3.12.2 or older, download the latest version and replace for upgrading to the latest map definition files.

To render a map, you need to:

• Include the fusioncharts.js file (core FusionCharts library) templates > index.html.
• Include the fusionmaps.js file to the templates > index.html file.
• Include the fusioncharts.world.js file to the templates > index.html file.

Refer to the code below:

{% load static %} 
<script type="text/javascript" src="{% static "fusioncharts/fusioncharts.js" %}"></script>
<script type="text/javascript" src="{% static "fusioncharts/fusionmaps.js" %}"></script>
<script type="text/javascript" src="{% static "fusioncharts/maps/fusioncharts.world.js" %}"></script>

In the above example, we’ve included the World Map, whose map definition (path) is contained in maps/fusioncharts.world.js.

Load other Map Definition files

To use any other map (except World and USA) from the 1400+ maps, download the map definition files, then copy those map files to your current maps folder. The map definition files are named in the fusioncharts.[MAP_ALIAS].js format, where MAP_ALIAS represents the country, state or region name.

Insert the <script> tag in templates > index.html file to include the map definition file. The <script> tag is shown below:

<script type="text/javascript" src="path/to/local/maps/fusioncharts.[MAP_ALIAS].js"></script>

Therefore, assuming that you need to render the map of California, the alias name california replaces MAP_ALIAS in the format as shown below:

<script type="text/javascript" src="path/to/local/maps/fusioncharts.california.js"></script>

Click here to explore all the maps available in FusionMaps XT.

Themes

Themes shipped with FusionCharts Suite XT allow you to apply centralized themes to any number of charts.

In a theme file, we can centralize the following aspects of all of your charts, gauges, and maps:

• Visual appearance (data plot color, font color, font size, etc.)
• Behavior (hover effects for data plots)
• Intelligence (applying different colors to the positive and negative data plots in all charts that use the theme)

The FusionCharts Suite download package also contains predefined theme files under fusioncharts-suite-xt > js > themes folder. The folder structure is shown below:

Include the theme files in the static > FusionCharts folder in the STATIC folder of your project.

Add the following code to the templates > index.html file:

{% load static %}
<script type="text/javascript" src="{% static "path/to/local/fusioncharts.js" %}"></script>
<script type="text/javascript" src="{% static "path/to/local/themes/fusioncharts.theme.fusion.js" %}"></script>

Only including the fusioncharts.theme.fusion.js file will not apply the theme. To apply the theme, set the value of theme attribute to the respective theme name. For more details click here .