Wednesday, October 23, 2013

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.

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

No comments:

Post a Comment