django-nvd3

by areski

areski / django-nvd3

Django wrapper for nvd3 - It's time for beautiful charts

408 Stars 125 Forks Last release: Not found Other 351 Commits 22 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Django Wrapper for NVD3 - It's time for beautiful charts

:Description: Django-nvd3 is a wrapper for NVD3 graph library :nvd3: NVD3 http://nvd3.org/ :d3: Data-Driven Documents http://d3js.org/

NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you.

.. image:: https://travis-ci.org/areski/django-nvd3.svg?branch=develop :target: https://travis-ci.org/areski/django-nvd3

Installation

Install, upgrade and uninstall django-nvd3 with these commands::

$ pip install django-nvd3
$ pip install --upgrade django-nvd3
$ pip uninstall django-nvd3

Then edit settings.py from your django project and add 'djangonvd3' in your 'INSTALLEDAPPS' setting.

Dependencies

Django-nvd3 have one major dependencie:

  • python-nvd3 : https://github.com/areski/python-nvd3

Bower will be used to install D3 and NvD3, see bower website for futher info : http://bower.io/

Bower depends on Node and npm. It's installed globally using npm::

npm install -g bower

To easy the integration with Django we will advice you to use django-bower.

For instance to run our demo project, you will install the dependencies from requirements.txt and then install django-bower. Django-bower is not a mandatory dependencies as the user should be free to install JS files using different method.

To install django-bower::

$ pip install django-bower

Read the documentation about Django-bower to find out how to configure it properly for your project: https://github.com/nvbn/django-bower

Then in the demo project directory just type the following::

$ python manage.py bower_install
$ python manage.py collectstatic

This will create a directory "components" where d3 & nvd3 will be installed.

You can see example settings file in

demoproject 
_.

Example how to create a pieChart

Let’s say we have a simple view in which we want to display the amount of calories per fruit.

So to achieve this, we will edit our view.py, we will prepare the data that will be displayed::

xdata = ["Apple", "Apricot", "Avocado", "Banana", "Boysenberries", "Blueberries", "Dates", "Grapefruit", "Kiwi", "Lemon"]
ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]
chartdata = {'x': xdata, 'y': ydata}
charttype = "pieChart"
chartcontainer = 'piechart_container'
data = {
    'charttype': charttype,
    'chartdata': chartdata,
    'chartcontainer': chartcontainer,
    'extra': {
        'x_is_date': False,
        'x_axis_format': '',
        'tag_script_js': True,
        'jquery_on_ready': False,
    }
}
return render_to_response('piechart.html', data)

We will render the template 'piechart.html' with a dictionary 'data' which contains 'charttype' and 'chartdata'. 'extra' will contains a list of additional settings::

* ``x_is_date`` - if enabled the x-axis will be display as date format
* ``x_axis_format`` - set the x-axis date format, ie. "%d %b %Y"
* ``tag_script_js`` - if enabled it will add the javascript tag '

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.