Charts in Django

There are 3 key Django apps that you can use in your project(s).

That will instantly give you amazing looking reports.

Django model report Django reports.

Gives you a nice way to view your Django model data in tabular format.

Django report-builder A GUI for Django ORM (refer to lesson models for a recap).

Build custom queries and display results.

Targets sys admins and capable end users who might not be able to program.

Django highcharts an awesome library you should definitely have in your Django tool bucket to amaze your friends, peers or clients.

This plugin app leverages on the famous highcharts to give you interactive data analysis charts.

That means you can click on your charts and stuff happens pretty sweet.

The things you can make are only limited by your dataset(s) and of cause imagination.

If you’re using Django rest framework then your charting options will be decoupled from your backend, you may even get more creative as they are plenty of 3rd party JavaScript frameworks to choose from for data analysis.

In this tutorial, we will look at how we can create charts using the Django framework.

We will use the FusionCharts Javascript library to create the charts.

Requirements:To create a chart in a web app developed using Django, you will need the following items to be downloaded and installed on your system:Django Framework — LinkFusionCharts Library — LinkFusionCharts Django wrapper — LinkNote: You will require Python to be installed to start with Django and will also require working knowledge of Python to execute the code.

Step 1: Creating the ProjectRun the following command to create a the myproject directory in the current directory.

django-admin startproject myprojectYou can use the cd command on the command line interface to navigate to the required directory.

Step 2: Adding the DependenciesNext, we will add the FusionCharts javascript files required to render the charts in the web application.

Create a template folder inside the myproject directory.

Inside the template folder, create another folder named static.

Copy all the JS files extracted from the FusionCharts library into this folder.

To map the javascript files, create a HTML file, index.

html, in the template folder.

This file will have the path to each javascript file and also the output element.

<!DOCTYPE html><html><head> <title>FC-python wrapper</title> {% load static %} <script type="text/javascript" src="{% static "fusioncharts/fusioncharts.

js" %}"></script> <script type="text/javascript" src="{% static "fusioncharts/themes/fusioncharts.

theme.

fint.

js" %}"></script></head><body> <div id="chart-1">{{ output|safe }}</div></body></html>5.

After including the paths of all the dependencies required, we need to update the static files by running the following commandpython manage.

py collectstatic6.

In the settings.

py file, update the location of the templates'DIRS': ['fc_column2d/templates'],Step 3: Creating the View PageThe view page contains the chart constructors, attributes as well as the data source required to render the chart.

Add the code given below to the view.

py file.

from django.

shortcuts import renderfrom django.

http import HttpResponse# Include the `fusioncharts.

py` file which has required functions to embed the charts in html pagefrom .

fusioncharts import FusionCharts# Loading Data from a Static JSON String# The `chart` method is defined to load chart data from an JSON string.

def chart(request): # Create an object for the column2d chart using the FusionCharts class constructor column2d = FusionCharts("column2d", "ex1" , "684", "476", "chart-1", "json", # The data is passed as a string in the `dataSource` as parameter.

"""{ "chart": { "caption": "Most Popular Superhero on Youtube", "baseFont": "Lato", "captionfontsize":"18", "subcaptionfontbold":"0", "subcaptionfontsize":"14", "subcaption": "Jan 2008 – September 2017", "yaxisname": "Total time spent watching", "captionpadding": "20", "bgalpha": "0", "canvasbgalpha": "0", "showvalues": "0", "showborder": "0", "canvasborderalpha": "0", "showalternatehgridcolor": "0", "plotgradientcolor": "", "showplotborder": "0", "adjustDiv":"0", "yaxisnamefontsize":"14", "yAxisNameFontBold":"0", "yAxisValuesPadding":"18", "divlinealpha": "10", "xaxislinealpha":"20", "LabelPadding": "50", "showlabels": "0", "numdivlines":"4", "showxaxisline":"1", "plotspacepercent":"40", "yAxisValueDecimals":"0", "formatnumberscale": "1", "numberscalevalue": "24,31,12", "numberscaleunit": " days, months, years", "palettecolors": "#3F365A", "plotToolText": "<div>Superhero : <b>$label</b><br/>Time Spend : <b>$value Hours</b></div>", "defaultnumberscale": " years", "plotFillAlpha": "90" }, "annotations": { "autoScale": "0", "scaleImages": "0", "origW": "400", "origH": "300", "groups": [{ "id": "user-images", "items": [{ "id": "Batman-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/batman.

png", "x": "$dataset.

0.

set.

0.

CenterX – 18", "y": "$dataset.

0.

set.

0.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "Wolverine-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/wolverine.

png", "x": "$dataset.

0.

set.

1.

CenterX – 18", "y": "$dataset.

0.

set.

1.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "IronMan-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/ironman.

png", "x": "$dataset.

0.

set.

2.

CenterX – 18", "y": "$dataset.

0.

set.

2.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "Deadpool-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/deadpool.

png", "x": "$dataset.

0.

set.

3.

CenterX – 18", "y": "$dataset.

0.

set.

3.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "SpiderMan-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/spiderman.

png", "x": "$dataset.

0.

set.

4.

CenterX – 18", "y": "$dataset.

0.

set.

4.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "Thor-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/thor.

png", "x": "$dataset.

0.

set.

5.

CenterX – 18", "y": "$dataset.

0.

set.

5.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "SuperMan-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/superman.

png", "x": "$dataset.

0.

set.

6.

CenterX – 18", "y": "$dataset.

0.

set.

6.

EndY + 10", "xScale": "75", "yScale": "75" }, { "id": "CaptainAmerica-icon", "type": "image", "url": "http://csm.

fusioncharts.

com/files/assets/img/captain-america.

png", "x": "$dataset.

0.

set.

7.

CenterX – 18", "y": "$dataset.

0.

set.

7.

EndY + 10", "xScale": "75", "yScale": "75" }] }] }, "data": [{ "label": "Batman", "value": "85000" }, { "label": "Wolverine", "value": "82000" }, { "label": "Iron Man", "value": "58000" }, { "label": "Deadpool", "value": "42000" }, { "label": "Spider Man", "value": "36000" }, { "label": "Thor", "value": "21000" }, { "label": "Super Man", "value": "18000" }, { "label": "Captain A", "value": "6000" }] }""") # returning complete JavaScript and HTML code, which is used to generate chart in the browsers.

return render(request, 'index.

html', {'output' : column2d.

render()})Step 4: Setting up the Configuration FileAdd the following code snippet to the urls.

py file, to automatically set the URL to render the chart.

from django.

conf.

urls import urlfrom.

import viewsurlpatterns = [ url(r'^$', views.

chart, name = 'demo'),]To update the STATICFILES_DIRS object, include it in the settings.

py file.

STATICFILES_DIRS = [ os.

path.

join(BASE_DIR, "fc_column2d/templates/static"),]Step 5: Rendering the ChartWith all the code in place, it is now time to render the chart.

Run the following command on the shell interfacepython manage.

py runserver.

. More details

Leave a Reply