• Stars
    star
    415
  • Rank 101,798 (Top 3 %)
  • Language
    Python
  • License
    Other
  • Created about 11 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.

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

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 'django_nvd3' in your 'INSTALLED_APPS' setting.

Dependencies

Django-nvd3 have one major dependencie:

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 '<script>'
* ``jquery_on_ready`` - if enabled it will load the javascript only when page is loaded
    this will use jquery library, so make sure to add jquery to the template.
* ``color_category`` - Define color category (eg. category10, category20, category20c)

Our template piechart.html could look like this:

{% load nvd3_tags %}
<head>
    {% include_chart_jscss %}
    {% load_chart charttype chartdata chartcontainer extra %}
</head>
<body>
    <h1>Fruits vs Calories</h1>
    {% include_container chartcontainer 400 600 %}
</body>

We use include the Javascript and CSS code for D3/NVD3. We start preparing and display the javascript code needed to render our pieChart:

{% load_chart charttype chartdata "piechart_container" extra %}

Finally we create a div container which will be used to display the chart.

The result will be a beautiful and interactive chart:

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/piechart_fruits_vs_calories.png

For more examples, please look at the demoproject directory in our repository, it shows an simple example for all the supported charts by django-nvd3.

Live demo of NVD3

See a live demo on jsfiddle : http://jsfiddle.net/areski/z4zuH/246/

Supported nvd3 charts

Charts list:

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/lineWithFocusChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/lineChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/multiBarChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/pieChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/stackedAreaChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/multiBarHorizontalChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/linePlusBarChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/cumulativeLineChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/discreteBarChart.png

https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/scatterChart.png

Projects using Django-nvd3

Documentation

Documentation is available on 'Read the Docs': http://django-nvd3.readthedocs.org

Changelog

Changelog summary : https://github.com/areski/django-nvd3/blob/master/CHANGELOG.rst

License

Django-nvd3 is licensed under MIT, see MIT-LICENSE.txt.

More Repositories

1

python-nvd3

Python Wrapper for NVD3 - It's time for beautiful charts
Python
658
star
2

django-admin-tools-stats

Django-admin-tools-stats is a Django admin module that allow you to create easily charts on your dashboard based on specific models and criterias
Python
284
star
3

django-audiofield

Django-Audiofield is a simple app that allows Audio files upload, management and conversion to different audio format (mp3, wav & ogg), which also makes it easy to play audio files into your Django application.
JavaScript
168
star
4

django-frontend-notification

Django application to display on the frontend the list of notifications and run some basic actions such as "view all notifications", "delete notifications", it also provides helpers to display notifications
Python
30
star
5

a2billing-flask-api

Restful A2Billing APIs in Flask
Python
20
star
6

ansible-golang-stack

Ansible Playbook for setting up a Golang app with Supervisor & PostgreSQL,
16
star
7

cdr-pusher

CDR-Pusher is a Go Application that push CDRs to PostgreSQL or Riak
Go
16
star
8

freeswitch_realtime

Push FreeSWITCH Realtime info to InfluxDB & PostgreSQL
Elixir
14
star
9

freeswitch-telegraf-plugin

Telegraf plugin for FreeSWITCH
Python
12
star
10

django-sms-gateway

Send (and receive) SMS through a web gateway. Requires an account with a gateway company. Fork from https://bitbucket.org/schinckel/django-sms-gateway/
Python
10
star
11

wikipbx

WikiPBX is an open source PBX web interface for FreeSWITCH. WikiPBX is written in python and uses the Django web application framework. Clone from https://launchpad.net/wikipbx
JavaScript
8
star
12

a2b-cust

A2Billing Customer interface
JavaScript
6
star
13

django-lets-go

Django mix of goodies, common snippets, templatetags and more
Python
6
star
14

sms-khomp-api

HTTP API Gateway for KHOMP SMS
Python
4
star
15

fs_channels_influxdb

Collect and push channels information from FreeSWITCH Sqlite to InfluxDB
Elixir
3
star
16

go-pinguino

Go daemon/service that performs a list of actions based on the result of Http Get or Ping
Go
3
star
17

newfies-dialer-docs

Documentation for Newfies-Dailer Project
JavaScript
3
star
18

excdr-pusher

CDR-Pusher collect CDRs from SQLite & push them to PostgreSQL
Elixir
3
star
19

django-dilla

django model content generator [clone of http://gitweb.codeendeavor.com/?p=dilla.git;a=summary]
Python
2
star
20

cookiecutter-lua

Cookiecutter template for a Lua package
Lua
2
star
21

erlplay

Play around with Erlang
Erlang
2
star
22

wow-goodies

Misc of things mixed with stuff and with more things
PHP
1
star
23

gotelium

Distributed cloud Telecom data storage
Go
1
star
24

ex-chitchat

Chitchat Phoenix application
Elixir
1
star
25

lua-lfs-cache

Easily power a caching system based on Filesystem with Lua
Lua
1
star
26

graphql-crud-auth

ReactJS/Apollo/GraphQL Application to demonstrate how to create CRUD with filters and authentication
JavaScript
1
star
27

asterisk-stats

Asterisk-Stats - Old code added for archive (Don't use this project check replacement CDR-Stats.org)
PHP
1
star
28

echo-server-elixir

playground to test deployment
Elixir
1
star
29

djangopbx

DjangoPBX - A full-featured domain based multi-tenant PBX driven by Django and FreeSwitch.
Python
1
star