Create Charts in Django using Database
In addition to directly specifying the chart data (or the URL for the file in which the chart data is stored) directly in the JSON/XML code, you can also fetch data for the chart from a database.
This section showcases how you can do this using the FusionCharts Django wrapper.
Before you proceed, make sure you have installed and set up the plugin correctly.
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.
The Revenue model looks like shown below:
from django.db import models
class Revenue(models.Model):
MonthlyRevenue = models.CharField(max_length=50)
Month = models.CharField(max_length=50)
def __unicode__(self):
return u'%s %s' % (self.MonthlyRevenue, self.Month)
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:
The data code required to create the above chart is given below:
from django.shortcuts import render
from django.http import HttpResponse
# Include the `fusioncharts.py` file that contains functions to embed the charts.
from fusioncharts import FusionCharts
from ..models import *
# The `chart` function is defined to generate Column 2D chart from database.
def chart(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.
for key in Revenue.objects.all():
data = {}
data['label'] = key.Month
data['value'] = key.MonthlyRevenue
dataSource['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)
return render(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 models in models.py chart looks like:
from django.db import models
class City(models.Model):
Name = models.CharField(max_length=50)
CountryCode = models.CharField(max_length=50)
Population = models.CharField(max_length=50)
def __unicode__(self):
return u'%s %s %s' % (self.Name, self.CountryCode, self.Population)
class Country(models.Model):
Name = models.CharField(max_length=50)
Code = models.CharField(max_length=50)
Population = models.CharField(max_length=50)
def __unicode__(self):
return u'%s %s %s' % (self.Name, self.Code, self.Population)
The column 2D chart, with the drill-down functionality, that we need to render here looks like this:
The code required to create the above chart is given below:
from django.shortcuts import render
from django.http import HttpResponse
# Include the `fusioncharts.py` file that contains functions to embed the charts.
from fusioncharts import FusionCharts
from ..models import *
# 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.
def chart(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.
for key in Country.objects.all():
data = {}
data['label'] = key.Name
data['value'] = key.Population
# Create link for each country when a data plot is clicked.
data['link'] = 'newchart-json-'+ key.Code
dataSource['data'].append(data)
# Create the linkData for cities drilldown
linkData = {}
# Inititate the linkData for cities drilldown
linkData['id'] = key.Code
linkedchart = {}
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 Code
for key in City.objects.all().filter(CountryCode=key.Code):
arrDara = {}
arrDara['label'] = key.Name
arrDara['value'] = key.Population
linkedchart['data'].append(arrDara)
linkData['linkedchart'] = linkedchart
dataSource['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)
return render(request, 'index.html', {'output': column2D.render()})
Want to try out the above sample at your local environment? You can download this sample from here .