Django and Highcharts - Creating Charts and Still DRY?

Question

I am currently creating a server control panel that relies heavily on graphs and charts.

I use Django for the backend and Highcharts / Highstock (http://www.highcharts.com/) for graphs (although we also look at D3, depending on how it progresses).

My question is: what is a good way to generate all our charts and still remain DRY?

(I know Django-Chartit, but it is a bit limited for our purposes and does not offer us some customization that we need).

1. How to get data

First of all, I’d better encode the data for the graphs inside JavaScript itself. For instance:.

series: [{ name: 'Virtualised', data: [80, 81, 84, 84, 85, 80, 90, 85, 80, 88, 89, 90] }, { name: 'Physical', data: [15, 14, 12, 8, 10, 12, 12, 14, 10, 12, 8, 9] }] 

Or should I get all the data through AJAX calls - for example, JSON through Query.get() ?

2. Dynamic Javascript Creation

If we go with option 1 and encode the data directly in JavaScript, how can I generate these Javascript files dynamically?

Currently, our JS is served directly by our web server (NGinx). Or should I use the built-in <script> inside my HTML files?

3. Security / Performance with AJAX

If we go to option 2 of the JSON / AJAX route - will there be performance problems if you say that twenty JQuery.get() calls per page? I don’t know which way to release them?

And what about security - we would like to expose the AJAX endpoint for diagrams, but how can you resolve this, but not allow anyone to access this URL directly?

4. DRY

In any case, I noticed that we have a full load of repetitions with all these diagrams.

What is the best way to cut it? Chart tag templates? Or is there a smarter way?

Cheers, Victor

Answer 1

• Depends on the size of the data. If you have large amounts of data and you do not need to immediately display all the diagrams, be sure to use AJAX. Otherwise, coding in js is fine.
• You can add some URLs, such as /data/some_data.js , that Django will display (with or without the templating system) and provide data in these files. Highcharts scripts will be called below and use this data.
• If you use ajax, you can do it the same way - get one big packet of data (for example, using a hash array), and then create your charts one by one, using one piece of data at a time. For security reasons, you can use Django CSRF here - create an empty form with a single token in it and a POST with a request. On the server server, you just need to deny access to this URL using class representations or a simple request.method check.
• If you use a single data packet, you can add a block identifier, title, and other metadata and use it when creating charts using JS.