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.
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:
* 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 <https://github.com/areski/django-nvd3/blob/master/demoproject/demoproject/settings.py>`_.
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:
.. image:: 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:
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/lineWithFocusChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/lineChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/multiBarChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/pieChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/stackedAreaChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/multiBarHorizontalChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/linePlusBarChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/cumulativeLineChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/discreteBarChart.png
.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/scatterChart.png
Projects using Django-nvd3
--------------------------
* CDR-Stats : http://www.cdr-stats.org
* Newfies-Dialer : http://www.newfies-dialer.org
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`.
History
-------
0.9.7 (2015-12-10)
------------------
* fix test suit + remove python3.3 support (Django 1.9)
* demoproject: update your urlpatterns to be a list of django.conf.urls.url() instances instead
0.9.4 (2015-10-28)
------------------
* add test_requirements.txt to MANIFEST.in
0.9.2 (2015-10-27)
------------------
* Fix test suits by @lgp171188 (L. Guruprasad)
* Add Travis-CI test for Python version 3.4 & 3.5
0.9.1 (2015-10-12)
------------------
* Add changelog to MANIFEST.in
0.9.0 (2015-10-12)
------------------
* add charset to js script tag
0.8.2 (2015-04-06)
------------------
* bump python-nvd3==0.13.7
0.8.1 (2015-04-06)
------------------
* fix error linePlusBarWithFocusChart
0.8.0 (2015-04-06)
------------------
* add support for nvd3 version 1.7.1
* bump requirement python-nvd3==0.13.6
* remove lineplusbarwithfocuschart
0.7.8 (2015-03-09)
------------------
* python3 * replace 'unicode' with 'str'
0.6.1 (2013-12-05)
------------------
* fix y-series not sorted alphabetically thanks @miquelcamprodon
0.6.0 (2013-10-31)
------------------
* fixes on demo project to include js tag in html
* update on simple_tag to work with Django 1.3
0.5.0 (2013-10-09)
------------------
* change settings behavior, now it works with a global extra settings passed as kwargs
* refactoring
0.4.1 (2013-10-04)
------------------
* discreteBarChart support date on xAxis
0.4.0 (2013-10-03)
------------------
* Support new chart linePlusBarWithFocusChart
0.3.1 (2013-09-30)
------------------
* Documentation / Readme update
0.3.0 (2013-09-30)
------------------
* Use Bower to install D3 and NVD3
0.2.0 (2013-09-20)
------------------
* Enable resize by default
0.1.12 (2013-07-09)
-------------------
* Generalise the axis_formatting
0.1.11 (2013-05-30)
-------------------
* Python3 Fix for setup.py TypeError (by DanMeakin)
0.1.10 (2013-05-30)
-------------------
* Add example for multichart with Date + test
0.1.9 (2013-04-06)
------------------
* Make sure we got something in chartype parameter / help the test
0.1.8 (2013-04-25)
------------------
* Option to use cdn or use local file for the JS and CSS
0.1.7 (2013-04-24)
------------------
* Add custom dateformat for tooltip : ``x_axis_date_format`` * display x-axis date in various format ie "%d %b %Y"
0.1.6 (2013-04-23)
------------------
* Add color_category : Define color category (eg. category10, category20, category20c)
0.1.5 (2013-04-23)
------------------
* Fix set height and width useset_graph_height and set_graph_width
0.1.4 (2013-04-23)
------------------
* Add tag_script_js : disable javascript <script> tag
0.1.2 (2013-04-22)
------------------
* Change dependencies to python-nvd3 to version 0.3 instead of 0.3.3
0.1.1 (2013-04-22)
------------------
* Change dependencies to python-nvd3 version * fix lineChart tooltip
0.1 (2013-04-12)
----------------
* Proper project release including support for the following chart::
lineWithFocusChart
lineChart
multiBarChart
pieChart
stackedAreaChart
multiBarHorizontalChart
linePlusBarChart
cumulativeLineChart
discreteBarChart
scatterChart
0.0.1 (2013-04-09)
------------------
* First release
Raw data
{
"_id": null,
"home_page": "http://github.com/areski/django-nvd3",
"name": "django-nvd3",
"maintainer": null,
"docs_url": null,
"requires_python": null,
"maintainer_email": null,
"keywords": "django, nvd3, chart, graph, d3",
"author": "Belaid Arezqui",
"author_email": "areski@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/d2/d0/61374b3f1119c932b48afa73296f6294d39794c70434cfd91a08b0ee4d70/django-nvd3-0.10.1.tar.gz",
"platform": null,
"description": "Django Wrapper for NVD3 - It's time for beautiful charts\n========================================================\n\n:Description: Django-nvd3 is a wrapper for NVD3 graph library\n:nvd3: NVD3 http://nvd3.org/\n:d3: Data-Driven Documents http://d3js.org/\n\n\nNVD3 is an attempt to build re-usable charts and chart components\nfor d3.js without taking away the power that d3.js gives you.\n\nInstallation\n------------\n\nInstall, upgrade and uninstall django-nvd3 with these commands::\n\n $ pip install django-nvd3\n $ pip install --upgrade django-nvd3\n $ pip uninstall django-nvd3\n\nThen edit settings.py from your django project and add 'django_nvd3' in your 'INSTALLED_APPS' setting.\n\n\nDependencies\n------------\n\nDjango-nvd3 have one major dependencie:\n\n* python-nvd3 : https://github.com/areski/python-nvd3\n\n\nBower will be used to install D3 and NvD3, see bower website for futher info : http://bower.io/\n\nBower depends on Node and npm. It's installed globally using npm::\n\n npm install -g bower\n\nTo easy the integration with Django we will advice you to use django-bower.\n\nFor instance to run our demo project, you will install the dependencies from requirements.txt and then\ninstall django-bower. Django-bower is not a mandatory dependencies as the user should be free to install JS files\nusing different method.\n\nTo install django-bower::\n\n $ pip install django-bower\n\nRead the documentation about Django-bower to find out how to configure it properly for your project: https://github.com/nvbn/django-bower\n\nThen in the demo project directory just type the following::\n\n $ python manage.py bower_install\n $ python manage.py collectstatic\n\nThis will create a directory \"components\" where d3 & nvd3 will be installed.\n\nYou can see example settings file in `demoproject <https://github.com/areski/django-nvd3/blob/master/demoproject/demoproject/settings.py>`_.\n\n\n\nExample how to create a pieChart\n--------------------------------\n\nLet\u2019s say we have a simple view in which we want to display the amount of calories per fruit.\n\nSo to achieve this, we will edit our view.py, we will prepare the data that will be displayed::\n\n xdata = [\"Apple\", \"Apricot\", \"Avocado\", \"Banana\", \"Boysenberries\", \"Blueberries\", \"Dates\", \"Grapefruit\", \"Kiwi\", \"Lemon\"]\n ydata = [52, 48, 160, 94, 75, 71, 490, 82, 46, 17]\n chartdata = {'x': xdata, 'y': ydata}\n charttype = \"pieChart\"\n chartcontainer = 'piechart_container'\n data = {\n 'charttype': charttype,\n 'chartdata': chartdata,\n 'chartcontainer': chartcontainer,\n 'extra': {\n 'x_is_date': False,\n 'x_axis_format': '',\n 'tag_script_js': True,\n 'jquery_on_ready': False,\n }\n }\n return render_to_response('piechart.html', data)\n\n\nWe will render the template 'piechart.html' with a dictionary 'data' which contains 'charttype' and 'chartdata'.\n'extra' will contains a list of additional settings::\n\n * ``x_is_date`` - if enabled the x-axis will be display as date format\n * ``x_axis_format`` - set the x-axis date format, ie. \"%d %b %Y\"\n * ``tag_script_js`` - if enabled it will add the javascript tag '<script>'\n * ``jquery_on_ready`` - if enabled it will load the javascript only when page is loaded\n this will use jquery library, so make sure to add jquery to the template.\n * ``color_category`` - Define color category (eg. category10, category20, category20c)\n\n\nOur template piechart.html could look like this::\n\n {% load nvd3_tags %}\n <head>\n {% include_chart_jscss %}\n {% load_chart charttype chartdata chartcontainer extra %}\n </head>\n <body>\n <h1>Fruits vs Calories</h1>\n {% include_container chartcontainer 400 600 %}\n </body>\n\nWe use include the Javascript and CSS code for D3/NVD3.\nWe start preparing and display the javascript code needed to render our pieChart::\n\n {% load_chart charttype chartdata \"piechart_container\" extra %}\n\nFinally we create a div container which will be used to display the chart.\n\n\nThe result will be a beautiful and interactive chart:\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/piechart_fruits_vs_calories.png\n\n\nFor more examples, please look at the demoproject directory in our repository, it shows an simple example for all the supported\ncharts by django-nvd3.\n\n\nLive demo of NVD3\n-----------------\n\nSee a live demo on jsfiddle : http://jsfiddle.net/areski/z4zuH/246/\n\n\nSupported nvd3 charts\n---------------------\n\nCharts list:\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/lineWithFocusChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/lineChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/multiBarChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/pieChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/stackedAreaChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/multiBarHorizontalChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/linePlusBarChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/cumulativeLineChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/discreteBarChart.png\n\n.. image:: https://raw.github.com/areski/django-nvd3/master/docs/source/_static/screenshot/scatterChart.png\n\n\nProjects using Django-nvd3\n--------------------------\n\n* CDR-Stats : http://www.cdr-stats.org\n* Newfies-Dialer : http://www.newfies-dialer.org\n\n\nDocumentation\n-------------\n\nDocumentation is available on 'Read the Docs':\nhttp://django-nvd3.readthedocs.org\n\n\nChangelog\n---------\n\nChangelog summary : https://github.com/areski/django-nvd3/blob/master/CHANGELOG.rst\n\n\nLicense\n-------\n\nDjango-nvd3 is licensed under MIT, see `MIT-LICENSE.txt`.\n\n\n\n\nHistory\n-------\n\n\n0.9.7 (2015-12-10)\n------------------\n\n* fix test suit + remove python3.3 support (Django 1.9)\n* demoproject: update your urlpatterns to be a list of django.conf.urls.url() instances instead\n\n\n0.9.4 (2015-10-28)\n------------------\n\n* add test_requirements.txt to MANIFEST.in\n\n\n0.9.2 (2015-10-27)\n------------------\n\n* Fix test suits by @lgp171188 (L. Guruprasad)\n* Add Travis-CI test for Python version 3.4 & 3.5\n\n\n0.9.1 (2015-10-12)\n------------------\n\n* Add changelog to MANIFEST.in\n\n\n0.9.0 (2015-10-12)\n------------------\n\n* add charset to js script tag\n\n\n0.8.2 (2015-04-06)\n------------------\n\n* bump python-nvd3==0.13.7\n\n\n0.8.1 (2015-04-06)\n------------------\n\n* fix error linePlusBarWithFocusChart\n\n\n0.8.0 (2015-04-06)\n------------------\n\n* add support for nvd3 version 1.7.1\n* bump requirement python-nvd3==0.13.6\n* remove lineplusbarwithfocuschart\n\n\n0.7.8 (2015-03-09)\n------------------\n\n* python3 * replace 'unicode' with 'str'\n\n\n0.6.1 (2013-12-05)\n------------------\n\n* fix y-series not sorted alphabetically thanks @miquelcamprodon\n\n\n0.6.0 (2013-10-31)\n------------------\n\n* fixes on demo project to include js tag in html\n* update on simple_tag to work with Django 1.3\n\n\n0.5.0 (2013-10-09)\n------------------\n\n* change settings behavior, now it works with a global extra settings passed as kwargs\n* refactoring\n\n\n0.4.1 (2013-10-04)\n------------------\n\n* discreteBarChart support date on xAxis\n\n\n0.4.0 (2013-10-03)\n------------------\n\n* Support new chart linePlusBarWithFocusChart\n\n\n0.3.1 (2013-09-30)\n------------------\n\n* Documentation / Readme update\n\n\n0.3.0 (2013-09-30)\n------------------\n\n* Use Bower to install D3 and NVD3\n\n\n0.2.0 (2013-09-20)\n------------------\n\n* Enable resize by default\n\n\n0.1.12 (2013-07-09)\n-------------------\n\n* Generalise the axis_formatting\n\n\n0.1.11 (2013-05-30)\n-------------------\n\n* Python3 Fix for setup.py TypeError (by DanMeakin)\n\n\n0.1.10 (2013-05-30)\n-------------------\n\n* Add example for multichart with Date + test\n\n\n0.1.9 (2013-04-06)\n------------------\n\n* Make sure we got something in chartype parameter / help the test\n\n\n0.1.8 (2013-04-25)\n------------------\n\n* Option to use cdn or use local file for the JS and CSS\n\n\n0.1.7 (2013-04-24)\n------------------\n\n* Add custom dateformat for tooltip : ``x_axis_date_format`` * display x-axis date in various format ie \"%d %b %Y\"\n\n\n0.1.6 (2013-04-23)\n------------------\n\n* Add color_category : Define color category (eg. category10, category20, category20c)\n\n\n0.1.5 (2013-04-23)\n------------------\n\n* Fix set height and width useset_graph_height and set_graph_width\n\n\n0.1.4 (2013-04-23)\n------------------\n\n* Add tag_script_js : disable javascript <script> tag\n\n\n0.1.2 (2013-04-22)\n------------------\n\n* Change dependencies to python-nvd3 to version 0.3 instead of 0.3.3\n\n\n0.1.1 (2013-04-22)\n------------------\n\n* Change dependencies to python-nvd3 version * fix lineChart tooltip\n\n\n0.1 (2013-04-12)\n----------------\n\n* Proper project release including support for the following chart::\n\n lineWithFocusChart\n lineChart\n multiBarChart\n pieChart\n stackedAreaChart\n multiBarHorizontalChart\n linePlusBarChart\n cumulativeLineChart\n discreteBarChart\n scatterChart\n\n\n0.0.1 (2013-04-09)\n------------------\n\n* First release\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Django NVD3 - Chart Library for d3.js",
"version": "0.10.1",
"project_urls": {
"Homepage": "http://github.com/areski/django-nvd3"
},
"split_keywords": [
"django",
" nvd3",
" chart",
" graph",
" d3"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "d2d061374b3f1119c932b48afa73296f6294d39794c70434cfd91a08b0ee4d70",
"md5": "27fb31f978d3964420d2800df9fa0072",
"sha256": "c46922e095e5a86870cdeffffd5b8cf3b7d47c853a2e229eac98913c53053da8"
},
"downloads": -1,
"filename": "django-nvd3-0.10.1.tar.gz",
"has_sig": false,
"md5_digest": "27fb31f978d3964420d2800df9fa0072",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 9163,
"upload_time": "2024-04-26T07:33:07",
"upload_time_iso_8601": "2024-04-26T07:33:07.443456Z",
"url": "https://files.pythonhosted.org/packages/d2/d0/61374b3f1119c932b48afa73296f6294d39794c70434cfd91a08b0ee4d70/django-nvd3-0.10.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-04-26 07:33:07",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "areski",
"github_project": "django-nvd3",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "python-nvd3",
"specs": [
[
">=",
"0.14.2"
]
]
}
],
"test_requirements": [
{
"name": "Django",
"specs": []
},
{
"name": "Django-bower",
"specs": []
}
],
"lcname": "django-nvd3"
}
JSON
