Django Charting

By pjain      Published Dec. 29, 2019, 7:24 a.m. in blog AI-Analytics-Data   

DJ Integrated Charting

r DJ Chart Overview Reviews

DJ Options

--- DJ & SERVERside Charting BPR

BPR Client side Rendered Charts eg - JQ

Data - providing the data in tables and using visualize or highchart for jquery to make generate the chart using javascript?
~x jquery's visualize plugin

DJ Server side Rendered Charts - SVG, PNG etc generated

Server-side charts generated as PNGs will be fixed in size, not very interactive etc. Client-side charts can stretch, be interactive etc. If you have a fast server you can generate charts with lots of complexity, complex charts on the client may be very slow to display. I favour client-side charts at the moment.

  • DJ Pygal - Py Charting, SimplisticUXD TUTE:

  • Simple python charting pygal.Bar()(1, 3, 3, 7)(1, 6, 6, 4).render()

1 Could use similar code for charts that render to an image For Flask/DJ also @app.route('/charts/line.svg') # <- view def line_route(): chart = pygal.Line() ... # data connected here .. return chart.render_response() # for dj use: render_django_response

2 Render as Base 64 data bytes - mapped to url @app.route('/charts/') # in view .. trigger root .. def line_route(): chart = pygal.Line() ... chart = chart.render_data_uri() return render_template( 'charts.html', chart = chart)

# In HTML file:
&lt;!-- Don't forget the "|safe"! --&gt;
&lt;div id="chart"&gt;
   &lt;embed type="image/svg+xml" src= {{ chart|safe }} /&gt;

BPR Hybrid - AJAX - on click fetch more data/popup

BPR Rich Visualization LIBS - usually backend - or with wrappers

DJ View Integration HOW TO

  • Just static libs as app - makes it easier to install? A set of static libraries packaged in handy django apps to speed up new applications and reduce duplicaiton. Django integration with Flot to make custom plots without messing with JS.

A- DJ Flot PyFlot integration - JQ, has some DJ integrations & DJ Integ Django integration with Flot to make custom plots without messing with JS.

  • Flot packaged in a handy django app to speed up new applications and reduce duplicaiton.

  • for its open source approach, simplicity, examples

    • Flot Charts similar - simpler usage

making simple to-utilize, appealing, and intuitive diagrams and charts. Intelligent components incorporate turning a arrangement on or off, panning and zooming, associating with information focuses and programmed re-measuring. Different components incorporate backing for various tomahawks, stacked outline and rendering content with Canvas rather than HTML. Numerous other capacities are accessible as modules.

To help you along, there is a progression of recordings demonstrating to utilize Flot,

  • Numerous illustrative samples

  • Create placeholder MUST put width/height, then on dom-ready set data and options

    $.plot($("#placeholder"), data, options);

  • Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the reference in the file API.txt. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

    $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

Passing data as string raw

initCharts: function () { if (!jQuery.plot) { return; } var data = []; # Here I would like my data. A series can either be raw data or an object with properties. The raw data format is an array of points:

[ [x1, y1], [x2, y2], ... ]

E.g. (in your case)

data= [[1, 3], [2, 14.01], [3.5, 3.14]]; //You can build this string in the html generated and/or add it with jquery/ajax callback function. If you want some more sophisticated (with styles in the lines and dots for example you have to build basically building the "option" parameter.

$.plot(placeholder, data, options); placeholder is the div container which will contain the graph. data is the data in the format described before. (Take care of the String building) options is the option of the graph (lines, series, style, dots).

You will find more information here

~x DJ Chartit

  • (it uses highcharts).
  • line chart -

A- DJ Chartkick JS ~x

mher/ Create beautiful Javascript charts with minimal code

C~x DJ Graphos -> Flot etc - more complex, unsupported

best docs Django Graphos It supports lot of backends, and integrates well with Django orm, but can work with other data sources too.

~ fork some fixes,mostly behind - xx Django graphos:

1 DJ data source support

2 BE DB Support SimpleDataSource - Use a Python list (just implement get_data) ModelDataSource MongoDataSource

A DataSource is a class which has these three methods. get_data used to get the data for display- Always return a nested list get_header used by a Renderer to create the labels. get_first_column used to set the x axis labels

3 MULTIPLE Chart types supported - shift from eg flot to something else Flot Line chart Bar Chart Point Chart Google Charts Line chart Column chart Bar chart Candlestick charts Pie chart YUI Line chart Column chart Bar chart Pie chart Morris.js Line chart Column chart Donut chart

4 Custom Render and Charting lib integ -

A renderer is a class which takes a DataSource and can convert it to the html to display.

The only required method on a Renderer is as_html. This will convert the dat ato a format which can display the chart.

Generally you will convert the data to json and pass it to the template which you return.

Ex0 Raw JSON Data source

If you need your chart to get data from a data source we do not natively support, writing a custom data source is easy. Once you do that, the data source can be used in any renderer.

1 To create a new data source a Create a class which extends BaseDataSource or SimpleDataSource

b Make sure your class has implementation of get_data, get_header and get_first_column

c get_data Should return a NxM matrix (see example data below).

data = [
       ['Year', 'Sales', 'Expenses', 'Items Sold', 'Net Profit'],
       ['2004', 1000, 400, 100, 600],
       ['2005', 1170, 460, 120, 310],
       ['2006', 660, 1120, 50, -460],
       ['2007', 1030, 540, 100, 200],


data = [
    ['Year', 'Sales', 'Expenses'],
    [2004, 1000, 400],
    [2005, 1170, 460],
    [2006, 660, 1120],
    [2007, 1030, 540]
Chart = LineChart(SimpleDataSource(data=data), html_id="line_chart")

{{ chart.as_html }}

EX0c Generating a plot from CSV file

csv_file = open("hello.csv")

Ex1 flot + Model data source

EX1a VIEW Create a data source.:

from graphos.sources.model import ModelDataSource
queryset = Account.objects.all()
data_source = ModelDataSource(queryset, fields=['year', 'sales'])

#Pass the data_source to a flot Chart:
from graphos.renderers import flot
chart = flot.LineChart(data_source)

EX1b queryset = Accounts.objects.filter(foo=bar) LineChart(ModelDataSource(queryset, fields=["year", "sales", "expenses"]))

HTML/TEMPLATE Include the js in your html:

You can render this chart in the template by

{{ point_chart.as_html }}.

Ex2 Doing Ajax with Graphos

Graphos plays well with ajax interactions. There are two ways you can replace a graph object.

Render chart.as_html in the views. Return and replace the DOM. Calculate the chart.get_data, return the JSON. Redraw the chart using $.plot or equivalent.

RAW Mid sized JS Libs --- PKJ TRIED or TODO

dygraphs - nice TS plots


Data formats





Ex1: test1.html

  • ~Devz/Djapps/Chartsviz/htmlEx/dygraph

    Basic Example

jqPlot - ajax load image gen on server EX - it uses jQuery - a javascript library.

I usually pass all my data down into the template, and the charts/graphs are rendered in the client's browser.

jqPlot renders content as static images which are embedded dynamically. This means chart data can be updated via Ajax without even refreshing the page. Some chart types even have hover options which display related data on hover.

default chart themes are somewhat bland. jqPlot will require a little TLC to get it working nicely into your layout – but it’s certainly a great tool for rendering more complicated datasets.

DJ Flot

DJ Chartflo

DJ jChart

DJ Chartit x highcharts uner it

Chartkick DJ

DJ D3 - NVD3

DJ Graphos - multi-lib x

ChartDirector DJ - Interactive


There are no comments yet

Add new comment

Similar posts

Politics and Social Networks

Markov Models Quickstart

Monte Carlo Models, Chains and Monte Carlo Simulation

Datascience, Big Data, Analytics and Visualization Learning Guide