Django Highcharts¶
Django Highchart will make it easier for you to display highcharts graphs.
Quickstart¶
Install django-highcharts using pip (we do recommend to do it in a virtualenv).
git clone https://github.com/novapost/django-highcharts.git
cd django-highcharts
pip install -e ./
To integrate it into a Django project, simply add it to your INSTALLED_APPS:
INSTALLED_APPS = [
# some interesting stuff...
'highcharts',
# some other stuff...
]
Don’t forget to set your STATIC_ROOT path and to run the following command to update the static files:
python manage.py collectstatic
You’re now ready to use the available views.
The view¶
from highcharts.views import HighChartsBarView
class BarView(HighChartsBarView):
categories = ['Orange', 'Bananas', 'Apples']
@property
def series(self):
result = []
for name in ('Joe', 'Jack', 'William', 'Averell'):
data = []
for x in range(len(self.categories)):
data.append(random.randint(0, 10))
result.append({'name': name, "data": data})
return result
The template¶
{% load staticfiles %}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'js/highcharts/highcharts.js' %}"></script>
<script type="text/javascript">
$(function () {
$.getJSON("{% url 'bar' %}", function(data) {
$('#container').highcharts(data);
});
});
</script>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>
Warning
Please note that the highcharts.js file should be called after the JQuery library.
Further documentation¶
Views¶
Common options¶
Highchart views all share the same general options. If one of these options
is not set by a class property or an instance property, it’ll use the
default value (generally None)
title: The title of the graphsubtitle: will display a subtitle. May contain HTML tags (including links)tooltip_point_format: formatting the tooltip over a data point using the Highchart appropriate format. (e.g.:"{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}")plot_options(defaults to{}): this dictionary will be directly converted into a JSON object and assigned to the data.plotOptions property on the client-side (it was too difficult to cover all the cases implied by this dictionary.)
Basic usage¶
Overriding options¶
Any option (or parameter) is a property, but it can be easily replaced by a method if you need to generate it using code.
Examples:
class BarView(HighChartsBarView):
title = 'My new (static) title'
class BarViewAgain(HighChartsBarView):
@property
def title(self):
return 'My stats for %s' % datetime.date.today()
Available views¶
HighChartsBarView¶
from highcharts.views import HighChartsBarView
Extra options¶
categories(defaults to[]): should return a list of string,y_axis_title(defaults to""): the title of the Y axis.
HighChartsStackedView¶
from highcharts.views import HighChartsStackedView
Extra options¶
Since it’s a variant of the HighChartsBarView, it supports the same options.