Skip to main content

Django Chart.js and Hightchart ajax views

Project description

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 staticfiles %}
<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 random import randint
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. 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!

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-chartjs-2.0.0.tar.gz (568.8 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_chartjs-2.0.0-py3-none-any.whl (598.3 kB view details)

Uploaded Python 3

File details

Details for the file django-chartjs-2.0.0.tar.gz.

File metadata

  • Download URL: django-chartjs-2.0.0.tar.gz
  • Upload date:
  • Size: 568.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.12.1 pkginfo/1.4.2 requests/2.18.4 setuptools/40.7.1 requests-toolbelt/0.8.0 tqdm/4.19.7 CPython/3.6.9

File hashes

Hashes for django-chartjs-2.0.0.tar.gz
Algorithm Hash digest
SHA256 f48ebd04b2dd4036b3bed44520b6876996338d1374f36b8915d27899e4becbe9
MD5 92ea4aa0f8777a2a79ba1803c7661125
BLAKE2b-256 344989eeaced82d95e282323f3fc2e60d4058bf374538ea3ebc9b61412b6d119

See more details on using hashes here.

File details

Details for the file django_chartjs-2.0.0-py3-none-any.whl.

File metadata

  • Download URL: django_chartjs-2.0.0-py3-none-any.whl
  • Upload date:
  • Size: 598.3 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.12.1 pkginfo/1.4.2 requests/2.18.4 setuptools/40.7.1 requests-toolbelt/0.8.0 tqdm/4.19.7 CPython/3.6.9

File hashes

Hashes for django_chartjs-2.0.0-py3-none-any.whl
Algorithm Hash digest
SHA256 7dacc6bb48fadcb00c07ba8656e4e97c50f5f05defc988976ed4f609cc39a7e9
MD5 6fa2775ce8e058846724ef4f443a7b5a
BLAKE2b-256 9d039f5827ca1d73ea535372a5b6d4a2cef57d7c5710b9cb293998522d8ea698

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page