[Fixed]-Django – Show plot from SQLite database, accessed by form

by

1👍

✅

For people in the future fighting the same problem, I was using pages that did not explain all steps for getting nvd3 to work (or they were maybe outdated).

Here are the steps to follow to install it and get it working:

1) Install django-nvd3 using pip install django-nvd3

2) Since this is dependent on python-nvd3, we need to install bower using npm install -g bower. (If you don’t have npm, just install it with macports, or any other way you like.)

3) Next, install django-bower with the command pip install django-bower

4) Then run bower install nvd3 which will also install the dependency d3

5) Edit your view.py to something like this, this example is for a lineChart:

charttype = "lineChart"
chartcontainer = 'linechart_container'  # container name
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'extra': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': True,
        'chart_attr': {
            'xScale':'(d3.scale.log())', #for logscale on x-axis
            'yScale':'(d3.scale.log())', #for logscale on y-axis
            'xAxis.axisLabel':'"Time, yrs"',
            'yAxis.axisLabel':'"n(X)/n(H)"',
        }
    }
}
return data

6) Update your settings.py with the following:

BOWER_COMPONENTS_ROOT = BASE_DIR
BOWER_PATH = '/usr/local/bin/bower'

BOWER_INSTALLED_APPS = (
    'd3',
    'nvd3',
)

and also add 'djangobower.finders.BowerFinder', to your STATICFILES_FINDERS = (

7) Now your html code has to include these (in the head for example):

<link media="all" href="{% static 'nvd3/src/nv.d3.css' %}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src='{% static 'd3/d3.min.js' %}'></script>
<script type="text/javascript" src='{% static 'nvd3/nv.d3.min.js' %}'></script>

And somewhere in your main body:

{% include_chart_jscss %}
{% load_chart charttype chartdata chartcontainer extra %}

Finally, for wherever you want the plot to appear:

{% include_container chartcontainer %}

This worked for me. If anyone more knowledgeable about this finds any mistakes, please help me correct them 🙂

👤Frank

Leave a comment