Django Chartjs

Django Chartjs lets you manage charts in you Django application.

Build Status Coverage Status on master https://pypip.in/v/django-chartjs/badge.png https://pypip.in/d/django-chartjs/badge.png

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

Using a set of predefined Class Based Views your are able to get started after writting 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).Line(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."""
        return ["January", "February", "March", "April", "May", "June", "July"]

    def get_data(self):
        """Return 3 dataset 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/novagile/django-chartjs/master/docs/_static/django-chartjs.png

It is that simple!

For other example, don’t hesitate to look at the demo project.

Also contribute your demo!

Contents

Demo project

The demo/ folder holds a demo project to illustrate django-chartjs usage.

Browse demo code online

See demo folder in project’s repository [1].

Deploy the demo

System requirements:

  • Python [2] version 2.7 or 3.3, available as python command.

    Note

    You may use virtualenv [3] to make sure the active python is the right one.

  • make and wget to use the provided Makefile.

Execute:

git clone git@github.com:novagile/django-chartjs.git
cd django-chartjs/
make demo

It installs and runs the demo server on localhost, port 8000. So have a look at http://localhost:8000/

Note

If you cannot execute the Makefile, read it and adapt the few commands it contains to your needs.

Browse and use demo/demoproject/ as a sandbox.

About django-chartjs
License

Copyright (c) 2013 Rémy HUBSCHER <hubscher.remy@gmail.com>

All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
  • Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Authors and contributors
Changelog
1.1 (unreleased)
  • Nothing changed yet.
1.0 (2013-12-12)
  • Add documentation
  • Add Python 3 support
  • Add an option to change / or remove credits
0.3 (2013-10-14)
  • Add Py3 Support
  • Add Highchart Pie, Donut and lines
  • Add test
0.2 (2013-07-26)
  • Only display integer
  • Add highcharts Columns chart
0.1 (2013-06-12)
  • Add providers support.
  • Add support for IE < 8.
  • Add an example to the README.
  • Adding the BaseLineChart view as well as an example of how to use it..
  • Add a demo page for next_color.
  • Init django-chartjs project.
Contributing to the project

This document provides guidelines for people who want to contribute to the project.

Create tickets

Please use the bugtracker [1] before starting some work:

  • check if the bug or feature request has already been filed. It may have been answered too!
  • else create a new ticket.
  • if you plan to contribute, tell us, so that we are given an opportunity to give feedback as soon as possible.
  • Then, in your commit messages, reference the ticket with some refs #TICKET-ID syntax.
Fork and branch
  • Work in forks and branches.
  • Prefix your branch with the ticket ID corresponding to the issue. As an example, if you are working on ticket #23 which is about contribute documentation, name your branch like 23-contribute-doc.
  • If you work in a development branch and want to refresh it with changes from master, please rebase [2] or merge-based rebase [3], i.e. don’t merge master.
Setup a development environment

System requirements:

  • Python [4] version 2.7 or 3.3, available as python command.

    Note

    You may use Virtualenv [5] to make sure the active python is the right one.

  • make and wget to use the provided Makefile.

Execute:

git clone git@github.com:novapost/django-chartjs.git
cd django-chartjs/
make test

If you cannot execute the Makefile, read it and adapt the few commands it contains to your needs.

The Makefile

A Makefile is provided to ease development. Use it to:

  • setup the development environment: make develop
  • update it, as an example, after a pull: make update
  • run tests: make test
  • build documentation: make documentation

The Makefile is intended to be a live reference for the development environment.

Documentation

Follow style guide for Sphinx-based documentations [6] when editing the documentation.

Test and build

Use the Makefile.

Demo project included

The Demo project is part of the tests. Maintain it along with code and documentation.