Creating a simple Column Chart

Django models map (roughly) to a database table, and provide a place to encapsulate business logic. All models subclass the base Model class, and contain field definitions. Let’s start by creating a simple Revenue model for our application in models.py.

To setup your database and create your first model, go through the detailed steps from here

Using this data-model, we are generating column 2D chart showing monthly revenue of Harry’s Supermart in last year.

The column 2D chart by fetching the required data from a database looks like this:

FusionCharts will load here..

The data code required to create the above chart is given below:

fromdjango.shortcutsimportrenderfromdjango.httpimportHttpResponse# Include the `fusioncharts.py` file that contains functions to embed the charts.fromfusionchartsimportFusionChartsfrom..modelsimport*# The `chart` function is defined to generate Column 2D chart from database.defchart(request):# Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.dataSource={}dataSource['chart']={"caption":"Monthly revenue for last year","subCaption":"Harry's SuperMart","xAxisName":"Month","yAxisName":"Revenues (In USD)","numberPrefix":"$","theme":"zune"}# The data for the chart should be in an array where each element of the array is a JSON object# having the `label` and `value` as key value pair.dataSource['data']=[]# Iterate through the data in `Revenue` model and insert in to the `dataSource['data']` list.forkeyinRevenue.objects.all():data={}data['label']=key.Monthdata['value']=key.MonthlyRevenuedataSource['data'].append(data)# Create an object for the Column 2D chart using the FusionCharts class constructor column2D=FusionCharts("column2D","ex1","600","350","chart-1","json",dataSource)returnrender(request,'index.html',{'output':column2D.render()})

Creating a Drill-down Chart

To render a drill-down chart using database, let’s start creating Country and City data models for our application in models.py. Using this data, you want to plot a column 2D chart showing the top 10 most populous countries in the world. Furthermore, you want to render this column 2D chart as a drill-down chart, where clicking each data plot shows another chart plotting the top 10 populous cities of that country.

The column 2D chart, with the drill-down functionality, that we need to render here looks like this:

FusionCharts will load here..

The code required to create the above chart is given below:

fromdjango.shortcutsimportrenderfromdjango.httpimportHttpResponse# Include the `fusioncharts.py` file that contains functions to embed the charts.fromfusionchartsimportFusionChartsfrom..modelsimport*# The `chart` function is defined to load data from a `Country` Model. # This data will be converted to JSON and the chart will be rendered.defchart(request):# Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.dataSource={}dataSource['chart']={"caption":"Top 10 Most Populous Countries","showValues":"0","theme":"zune"}# Convert the data in the `Country` model into a format that can be consumed by FusionCharts. # The data for the chart should be in an array where in each element of the array is a JSON object# having the `label` and `value` as keys.dataSource['data']=[]dataSource['linkeddata']=[]# Iterate through the data in `Country` model and insert in to the `dataSource['data']` list.forkeyinCountry.objects.all():data={}data['label']=key.Namedata['value']=key.Population# Create link for each country when a data plot is clicked.data['link']='newchart-json-'+key.CodedataSource['data'].append(data)# Create the linkData for cities drilldown linkData={}# Inititate the linkData for cities drilldownlinkData['id']=key.Codelinkedchart={}linkedchart['chart']={"caption":"Top 10 Most Populous Cities - "+key.Name,"showValues":"0","theme":"zune"}# Convert the data in the `City` model into a format that can be consumed by FusionCharts. linkedchart['data']=[]# Filtering the data base on the Country CodeforkeyinCity.objects.all().filter(CountryCode=key.Code):arrDara={}arrDara['label']=key.NamearrDara['value']=key.Populationlinkedchart['data'].append(arrDara)linkData['linkedchart']=linkedchartdataSource['linkeddata'].append(linkData)# Create an object for the Column 2D chart using the FusionCharts class constructor column2D=FusionCharts("column2D","ex1","600","350","chart-1","json",dataSource)returnrender(request,'index.html',{'output':column2D.render()})

Want to try out the above sample at your local environment? You can download this sample from here .