Using the ndv3.js library

nvd3.js is an amazing d3 charts library.

However, it has few documentation in its website. In this post I put a summary of the useful things I've done when working with nvd3.

• Integrating nvd3 with Django

django-nvd3 is a Django package which integrates nvd3 charts in a Django-Pythonic way. It also lacks a bit of documentation.

In this site there is the source code  of the package, what allows us to see the possible parametrizations of the chart:

def load_chart(chart_type, series, container, x_is_date=False, x_axis_date_format="%d %b %Y", tag_script_js=True, color_category='category20'):

The variable color category is the way to specify the colors range of the chart. However, in my case I had to specify its values in the javascript code instead of doing it directly in Python.

...
(javascript)
var mycolors = ["#80B898","#007030","#E58A01"];
d3.scale.mycolors = function() {
    return d3.scale.ordinal().range(mycolors);
}
(end javascript)

{% load_chart grafico.charttype grafico.chartdata "grafico_container" True "%d %b %Y" color_category='mycolors' %}
...

• Customizing more nvd3.js charts

If you want further customization on nvd3.js charts then you have to move completely to the js environment. Some useful links I used:

Event trigger when  a serie is selected

Brush extent when working with a line with focus chart

Updating different d3 charts on the same page