Javascript Charts in Django

Add interactive charts to your application using Django plugin for FusionCharts.

Using FusionCharts Django Wrapper, you can embed interactive charts to your applications. Use this Django wrapper with our core library to build graphs and charts for your applications. From FusionCharts Suite XT you can choose any of the 90+ charts and 1000+ maps and add them to your application.

Download Wrapper View it on Github

Select Chart Types

Features

  • The server-side Django wrapper generates the required JavaScript and HTML code as a string, which is used to render charts on a browser.
  • Allows you to load data from database into charts.
  • Multiple ways to add data - JSON and XML.
  • Works seamlessly across PCs (including IE6/7/8), Macs, iPads, iPhones, and Android devices.

Community

Support

Simply open up a github issue with your question/bug report/suggestion.

Along with Django Wrapper, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files

QuickStart

Step 1: Include FusionCharts libraries

In your HTML, include fusioncharts.js and themes/fusioncharts.theme.ocean.js after all other scripts:

<script type="text/javascript" src="/path/to/fusioncharts.js"></script>
<script type="text/javascript" src="/path/to/themes/fusioncharts.theme.ocean.js"></script>

Step 2: Include FusionCharts Django wrapper in your view

In your view, include the line stated below: 


from fusioncharts import FusionCharts

Step 3: Render the chart by providing required data in constructor parameter


# Syntax for the constructor - FusionCharts("type of chart", "unique chart id", "width of chart", "height of chart", "div id to render the chart", "type of data", "actual data")
column2d = FusionCharts("column2d", "ex1" , "600", "400", "chart-1", "json", 
        """{  
               "chart":
               {  
                  "caption":"Harry's SuperMart",
                  "subCaption":"Top 5 stores in last month by revenue",
                  "numberPrefix":"$",
                  "theme":"ocean"
               },
               "data":
               [  
                  {  
                     "label":"Bakersfield Central",
                     "value":"880000"
                  },
                  {  
                     "label":"Garden Groove harbour",
                     "value":"730000"
                  },
                  {  
                     "label":"Los Angeles Topanga",
                     "value":"590000"
                  },
                  {  
                     "label":"Compton-Rancho Dom",
                     "value":"520000"
                  },
                  {  
                     "label":"Daly City Serramonte",
                     "value":"330000"
                  }
               ]
        }""")

Step 4: Render FusionCharts

In the previous code, we are populating the FusionCharts constructor with data and chart properties.

It's time to render it.


column2d.render()

And your chart should display when you load the page.

Licensing

Django-FusionCharts-Wrapper is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .