django-nvd3 | Django wrapper for nvd3 - It 's time for beautiful charts | Chart library

Django largely is backend framework for python. That means it creates responses to html requests. These responses are rendered using templates that contain the html code which is being created on the fly.

nvd3.js or d3.js for that matter live on the frontend, i.e. the user's browser. That means all nvd3.js html and javascript code (like the one you quote) go into the Django template.

To use nvd3.js you will have to load the d3.js and nvd3.js javascript libraries and corresponding style sheets. (On how to do this, see the respective documentations.) These elements need to go to a different place in the template (html where the chart is supposed to go, css into the header and javascript at the end of the body).

django-nvd3 is a django app that is used to simplify the use of nvd3 on the front end. It is one option to work with Django and nvd3.js. It defines template tags that will include the required javascript code and style sheets in your template. The first tag include_chart_jscss will do exactly this and is supposed to be used in the section of the tempalte. The second tag load_chartwill generate the javascript you quoted actually creating the chart. The third tag (include_container) will insert the required html div elements (which you did not quote in the questions). By passing the latter tags the same name the browser knows on which div tag to apply the javascript code. It does not help to distribute the code bits over the template. Also, it does not generate the code. This is left to a different package python-nvd3 which itself relies on a template engine (Jinja2) which likely is different from the one you use with Django. In a nutshell: django-nvd3 solves the problem of generating javascript code for nvd3 charts but not the problem of how to distribute that code in django templates.

I suggest Sekizai to better distribute code bits. It allows to split html, css and js bits of a page in separate blocks. Then you can use simple includes to add a chart to your web page. In the included file you may surround the required css code by {% addtoblock css %} and the required javascript by {% addtoblock js %}. When using sekizai the base templates need to have these block ("js" and "css") defined, see the Sekizai documentation.

Of course it is a matter of opinion, but I prefer using sekizai for distributing the nvd3.js code bits in the template and making charts available as includable templates to Django (thereby refraining from the costs of a second template engine). My include templates contain the raw nvd3 code taken, e.g. from one of the examples.

I have compiled three gists which assume you have sekizai installed and included in your INSTALLED_APPS settings:

1. Python code for the view function. Remember to include the view function in urls.py. The code assumes that the file with the json data is in a static folder.
2. A template called base.html which does include the html code of the page to be rendered. It has a title and then includes the chart.
3. A template for the chart which is a 1:1 copy of the code in the question except that some parameters are dynamically loaded (source file, ticks).