Skip to main content

Django Chartjs lets you manage charts in your Django application.

https://travis-ci.org/peopledoc/django-chartjs.svg?branch=master https://coveralls.io/repos/peopledoc/django-chartjs/badge.png?branch=master&style=flat https://img.shields.io/pypi/v/django-chartjs.svg

This is compatible with Chart.js and Highcharts JS libraries.

Using a set of predefined Class Based Views you are able to get started after writing just your SQL query.

Getting Started

Install django-chartjs:

pip install django-chartjs

Add it to your INSTALLED_APPS settings:

INSTALLED_APPS = (
    '...',
    'chartjs',
)

Using it

A simple Line Chart example.

1. Create the HTML file

{% load static %}
<html>
    <head>
        <title>django-chartjs line chart demo</title>
        <!--[if lte IE 8]>
            <script src="{% static 'js/excanvas.js' %}"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Some Line Charts loaded in Ajax!</h1>

        <canvas id="myChart" width="500" height="400"></canvas>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
        <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
        <script type="text/javascript">
            $.get('{% url "line_chart_json" %}', function(data) {
                var ctx = $("#myChart").get(0).getContext("2d");
                new Chart(ctx, {
                    type: 'line', data: data
                });
            });
        </script>
    </body>
</html>

2. Create the view with labels and data definition

from django.views.generic import TemplateView
from chartjs.views.lines import BaseLineChartView


class LineChartJSONView(BaseLineChartView):
    def get_labels(self):
        """Return 7 labels for the x-axis."""
        return ["January", "February", "March", "April", "May", "June", "July"]

    def get_providers(self):
        """Return names of datasets."""
        return ["Central", "Eastside", "Westside"]

    def get_data(self):
        """Return 3 datasets to plot."""

        return [[75, 44, 92, 11, 44, 95, 35],
                [41, 92, 18, 3, 73, 87, 92],
                [87, 21, 94, 3, 90, 13, 65]]


line_chart = TemplateView.as_view(template_name='line_chart.html')
line_chart_json = LineChartJSONView.as_view()

3. Update urls.py with the new urls for TemplateView and AJAX call ‘line_chart_json’ as in chart.html

from .views import line_chart, line_chart_json

urlpatterns = [
  '...',
  path('chart', line_chart, name='line_chart'),
  path('chartJSON', line_chart_json, name='line_chart_json'),
]

4. Get a Chart.js Line Chart

https://raw.github.com/peopledoc/django-chartjs/master/docs/_static/django-chartjs.png

It is that simple!

For other examples including a HighCharts line chart, don’t hesitate to look at the demo project.

Also, feel free to contribute your demo!

Release files for django-chartjs 2.3.0

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-chartjs 2.3.0
File Size Uploaded
django-chartjs-2.3.0.tar.gz 589.5 kB Details

Built distribution (wheel)

Table of built distributions (wheels) for django-chartjs 2.3.0
File Interpreter ABI Platform
django_chartjs-2.3.0-py3-none-any.whl Python 3 none any Details

Total release size:1.2 MB

Release files / django-chartjs-2.3.0.tar.gz

Download URL django-chartjs-2.3.0.tar.gz
Size 589.5 kB
Tags Source
SHA-256 checksum
How to use checksums
576ad20cfb6d18efcd3142784752cc8f7445601180d74fbaa6af9fd2f866899b
BLAKE2b-256 checksum
How to use checksums
b893875137021a36005b777f9c7b6468dac5b20bf5aea62e4417ffe19d5875dd
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/3.8.0 pkginfo/1.8.2 readme-renderer/32.0 requests/2.27.1 requests-toolbelt/0.9.1 urllib3/1.26.8 tqdm/4.62.3 importlib-metadata/4.10.1 keyring/23.5.0 rfc3986/2.0.0 colorama/0.4.4 CPython/3.8.10

Release files / django_chartjs-2.3.0-py3-none-any.whl

Download URL django_chartjs-2.3.0-py3-none-any.whl
Size 609.5 kB
Tags Python 3
SHA-256 checksum
How to use checksums
3cc1660ff1403c021b3ede163062120e36fde194e97e1a84a7eb1a8f09223183
BLAKE2b-256 checksum
How to use checksums
a1a9a9684ca39c70b84edbf15c7e506fabe46c639806b42d23e6356f2c441af0
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/3.8.0 pkginfo/1.8.2 readme-renderer/32.0 requests/2.27.1 requests-toolbelt/0.9.1 urllib3/1.26.8 tqdm/4.62.3 importlib-metadata/4.10.1 keyring/23.5.0 rfc3986/2.0.0 colorama/0.4.4 CPython/3.8.10

Release history Release notifications | RSS feed

This release

2.3.0 This release

2 release files

2.2.1

2 release files

2.1.0

2 release files

2.0.0

2 release files

1.5.0

2 release files

1.4.0

2 release files

1.3

2 release files

1.2

2 release files

1.1

1 release file

1.0

1 release file

0.3

1 release file

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page