31 | Enable template loading from app folders by adding the following property to your TEMPLATES django configuration: 32 |
33 | 34 |TEMPLATES = [
35 | {
36 | 'BACKEND': 'django.template.backends.django.DjangoTemplates',
37 | 'APP_DIRS': True,
38 | # ...
39 | }]
40 |
49 | For the charts to be rendered inside the browser you will
50 | need to include the Chart.JS library. Add the following
51 | HTML before your closing </body> tag:
52 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>57 | If you want to make use of asynchronous loading charts 58 | you will also need to include jQuery: 59 |
60 | 61 |<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
70 | At the heart of this charting library lies the Chart class. This class describes a chart and defines which data it should display. The chart's 'class fields' map to Chart.JS options which describe how the chart should render and behave. By overriding the get_datasets method on your Chart instance you can define which data should be displayed.
71 |
74 | To define which type of chart you want to render (e.g. a line or bar chart), your chart class should set its class field chart_type to one of "line", "bar", "radar", "polarArea", "pie", or "bubble". A chart class without this field is invalid and initialization will result in an ImproperlyConfigured exception.
75 |
from jchart import Chart
78 |
79 | class LineChart(Chart):
80 | chart_type = 'line'
89 | The get_datasets method should return a list of datasets this chart should display. Where a dataset is a dictionary with key/value configuration pairs (see the Chart.JS documentation).
90 |
from jchart import Chart
93 |
94 | class LineChart(Chart):
95 | chart_type = 'line'
96 |
97 | def get_datasets(self, **kwargs):
98 | return [{
99 | 'label': "My Dataset",
100 | 'data': [69, 30, 45, 60, 55]
101 | }]
110 | This method allows you to set the Chart.JS data.labels parameter. Which allows you to configure categorical axes. For an example on how to use this feature see this pie chart.
111 |
from jchart import Chart
114 |
115 | class PieChart(Chart):
116 | chart_type = 'pie'
117 |
118 | def get_labels(self, **kwargs):
119 | return ['Red', 'Blue']128 | A chart can be configured through the following class fields: 129 |
130 | 131 |
132 | scales
133 | layout
134 | title
135 | legend
136 | tooltips
137 | hover
138 | animation
139 | elements
140 | responsive
141 |
144 | All of these fields map to the same key in the Chart.JS 'options' object. For instance, if you wanted to create a chart that does not render responsively you would set the responsive class field to false: 145 |
146 | 147 |from jchart import Chart
148 |
149 | class UnresponsiveLineChart(Chart):
150 | chart_type = 'line'
151 | responsive = False
152 | # ...
155 | Most of these class fields require either a list of dicitonaries or a dictionary. With the exception of responsive which should be a boolean value. Be sure to read the Chart.JS documentation on how to use these configuration options.
156 |
159 | For your convenience there are some methods located in jchart.config which can be used to produce correct dictionaries to configure Chart.JS properties. Most of these methods only serve as a validation step for your input configuration but some can also transform their input. Let's take a look at an example, how would you configure the X-Axis so it is not to be displayed:
160 |
from jchart import Chart
163 | from jchart.config import Axes
164 |
165 | class LineChart(Chart):
166 | chart_type = 'line'
167 | scales = {
168 | 'xAxes': [Axes(display=False)],
169 | }
172 | jchart.config also contains a method to create dataset configuration dictionaries. One of the advantages of using this method is that it includes a special property color which can be used to automatically set the values for: 'backgroundColor', 'pointBackgroundColor', 'borderColor', 'pointBorderColor', and 'pointStrokeColor'.
173 |
from jchart import Chart
176 | from jchart.config import Axes
177 |
178 | class LineChart(Chart):
179 | chart_type = 'line'
180 |
181 | def get_datasets(self, **kwargs):
182 | return [DataSet(color=(255, 255, 255), data=[])]
185 | The jchart.config module contains methods for the properties listed below. Keep in mind that you are in no way obligated to use these methods, you could also supply Python dictionaries in the place of these method calls.
186 |
187 |
Axes, ScaleLabel, Tick, DataSet, Tooltips, Legend, LegendLabel, Title, Hover, InteractionModes, Animation, Element, ElementArc, ElementLine, ElementPoint, ElementRectangle
189 |
190 |
191 | 192 |
options this has to be set to a dictionary and can be used to set any other Chart.JS configuration values that are not configurable through a predefined class field (e.g. maintainAspectRatio). The class fields have precedence over any configuration applied through the options dictionary.
194 |
195 |
196 | from jchart import Chart
197 |
198 | class OptionsChart(Chart):
199 | chart_type = 'line'
200 | options = {
201 | 'maintainAspectRatio': True
202 | }
203 | # ...
204 | 213 | Chart instances can be passed to your Django template context. 214 | Inside the template you can invoke the method `as_html` on the 215 | chart instance to render the chart. 216 |
217 | 218 |# LineChart is a class inheriting from jchart.Chart
219 |
220 | def some_view(request):
221 | render(request, 'template.html', {
222 | 'line_chart': LineChart(),
223 | })226 | The following code is an example of how to render this line chart 227 | inside your html template: 228 |
229 | 230 |{{ line_chart.as_html }}239 | When rendering the chart directly into your HTML template, all the data needed for the chart is transmitted on the page's HTTP request. It is also possible to load the chart (and its required data) asynchronous. 240 |
241 | 242 |
243 | To do this we need to setup a url endpoint from which to load the chart's data. There is a classmethod available on jchart.views.ChartView to automatically create a view which exposes the chart's configuration data as JSON on a HTTP get request:
244 |
from jchart.views import ChartView
247 |
248 | # LineChart is a class inheriting from jchart.Chart
249 | line_chart = LineChart()
250 |
251 | urlpatterns = [
252 | url(r'^charts/line_chart/$', ChartView.from_chart(line_chart), name='line_chart'),
253 | ]256 | You can use a custom templatetag inside your Django template to load this chart asynchronously. The custom tag behaves like the Django url templatetag and any positional or keyword arguments supplied to it are used to resolve the url for the given url name. In this example the url does not require any url parameters 257 | to be resolved: 258 |
259 | 260 |{% load jchart %}
261 |
262 | {% render_chart 'line_chart' %}
263 | 266 | This tag will be expanded into the following JS/HTML code: 267 |
268 | 269 |<canvas class="chart" id="unique-chart-id">
270 | </canvas>
271 |
272 | <script type="text/javascript">
273 | window.addEventListener("DOMContentLoaded", function() {
274 | $.get('/charts/line_chart/', function(configuration) {
275 | var ctx = document.getElementById("unique-chart-id").getContext("2d");
276 |
277 | new Chart(ctx, configuration);
278 | });
279 | });
280 | </script>
289 | It can often be useful to reuse the same chart for different datasets. This can either be done by subclassing an existing chart class and overriding its get_datasets method. But there is another way to do this. Any arguments given to the as_html method are supplied to your get_datasets method. This makes it possible to parameterize the output of get_datasets
290 |
293 | Let's have a look at an example. Imagine we have price point data stored in a model called Price and this model has a field called currency_type. We could render the chart for different currency types by accepting the value for this field as a parameter to get_datasets.
294 |
from jchart import Chart
297 | from core.models import Price
298 |
299 | class PriceChart(Chart):
300 | chart_type = 'line'
301 |
302 | def get_datasets(self, currency_type):
303 | prices = Price.objects.filter(currency_type=currency_type)
304 |
305 | data = [{'x': price.date, 'y': price.point} for price in prices]
306 |
307 | return [DataSet(data=data)]
310 | If we supply an instance of this chart to the context of our template, we could use this to render two different charts. This is done by using the render_chart template tag to supply additional parameters to the get_datasets method:
311 |
{% render_chart price_chart 'euro' %}
314 |
315 | {% render_chart price_chart 'dollar' %}
318 | For asynchronous charts any url parameters are passed to the get_datasets method.
319 |
from jchart.views import ChartView
322 | from .charts import PriceChart
323 |
324 | price_chart = PriceChart()
325 |
326 | urlpatterns = [
327 | url(r'^currency_chart/(?P<>\w+)/$',
328 | ChartView.from_chart(price_chart))
329 | ]
332 | To render this chart asynchronously we have to supply the url parameter as a second argument to the render_chart template tag, like so:
333 |
{% load jchart %}
336 |
337 | {% render_chart 'price_chart' 'euro' %}
338 |
339 | {% render_chart 'price_chart' 'dollar' %}# charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class BarChart(Chart):
6 | chart_type = 'bar'
7 |
8 | def get_labels(self, **kwargs):
9 | return ["January", "February", "March", "April",
10 | "May", "June", "July"]
11 |
12 | def get_datasets(self, **kwargs):
13 | data = [10, 15, 29, 30, 5, 10, 22]
14 | colors = [
15 | rgba(255, 99, 132, 0.2),
16 | rgba(54, 162, 235, 0.2),
17 | rgba(255, 206, 86, 0.2),
18 | rgba(75, 192, 192, 0.2),
19 | rgba(153, 102, 255, 0.2),
20 | rgba(255, 159, 64, 0.2)
21 | ]
22 |
23 | return [DataSet(label='Bar Chart',
24 | data=data,
25 | borderWidth=1,
26 | backgroundColor=colors,
27 | borderColor=colors)]{% if async %}
28 |
29 | # urls.py
30 | from demo import charts
31 | from jchart.views import ChartView
32 |
33 | urlpatterns = [
34 | url(r'^charts/bar_chart/$',
35 | ChartView.from_chart(charts.BarChart()),
36 | name='bar_chart'),
37 | ]
38 |
39 | # Template.html
40 | {% render_chart 'bar_chart' %}
41 | {% endif %}# charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class BubbleChart(Chart):
6 | chart_type = 'bubble'
7 |
8 | def get_datasets(self, **kwargs):
9 | data = [{
10 | 'x': randint(1, 10),
11 | 'y': randint(1, 25),
12 | 'r': randint(1, 10),
13 | } for i in range(25)]
14 |
15 | return [DataSet(label="First DataSet",
16 | data=data,
17 | backgroundColor='#FF6384',
18 | hoverBackgroundColor='#FF6384')]{% if async %}
19 |
20 | # urls.py
21 | from demo import charts
22 | from jchart.views import ChartView
23 |
24 | urlpatterns = [
25 | url(r'^charts/bubble_chart/$',
26 | ChartView.from_chart(charts.BubbleChart()),
27 | name='bubble_chart'),
28 | ]
29 |
30 | # Template.html
31 | {% render_chart 'bubble_chart' %}
32 | {% endif %}# charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class PieChart(Chart):
6 | chart_type = 'pie'
7 |
8 | def get_labels(self, **kwargs):
9 | return ["Red", "Blue", "Yellow"]
10 |
11 | def get_datasets(self, **kwargs):
12 | data = [300, 50, 100]
13 | colors = [
14 | "#FF6384",
15 | "#36A2EB",
16 | "#FFCE56"
17 | ]
18 | return [DataSet(data=data,
19 | label="My Pie Data",
20 | backgroundColor=colors,
21 | hoverBackgroundColor=colors)]{% if async %}
22 |
23 | # urls.py
24 | from demo import charts
25 | from jchart.views import ChartView
26 |
27 | urlpatterns = [
28 | url(r'^charts/pie_chart/$',
29 | ChartView.from_chart(charts.PieChart()),
30 | name='pie_chart'),
31 | ]
32 |
33 | # Template.html
34 | {% render_chart 'pie_chart' %}
35 | {% endif %}# charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class PolarChart(Chart):
6 | chart_type = 'polarArea'
7 |
8 | def get_labels(self, **kwargs):
9 | return ["Red", "Green", "Yellow", "Grey", "Blue"]
10 |
11 | def get_datasets(self, **kwargs):
12 | return [DataSet(label="My DataSet",
13 | data=[11, 16, 7, 3, 14],
14 | backgroundColor=[
15 | "#FF6384",
16 | "#4BC0C0",
17 | "#FFCE56",
18 | "#E7E9ED",
19 | "#36A2EB"
20 | ])
21 | ]{% if async %}
22 |
23 | # urls.py
24 | from demo import charts
25 | from jchart.views import ChartView
26 |
27 | urlpatterns = [
28 | url(r'^charts/polar_chart/$',
29 | ChartView.from_chart(charts.PolarChart()),
30 | name='polar_chart')
31 | ]
32 |
33 | # Template.html
34 | {% render_chart 'polar_chart' %}
35 | {% endif %}# charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class RadarChart(Chart):
6 | chart_type = 'radar'
7 |
8 | def get_labels(self):
9 | return ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"]
10 |
11 | def get_datasets(self, **kwargs):
12 | return [DataSet(label="My First dataset",
13 | color=(179, 181, 198),
14 | data=[65, 59, 90, 81, 56, 55, 40]),
15 | DataSet(label="My Second dataset",
16 | color=(255, 99, 132),
17 | data=[28, 48, 40, 19, 96, 27, 100])
18 | ]{% if async %}
19 |
20 | # urls.py
21 | from demo import charts
22 | from jchart.views import ChartView
23 |
24 | urlpatterns = [
25 | url(r'^charts/radar_chart/$',
26 | ChartView.from_chart(charts.RadarChart()),
27 | name='radar_chart')
28 | ]
29 |
30 | # Template.html
31 | {% render_chart 'radar_chart' %}
32 | {% endif %}# charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class ScatterLineChart(Chart):
6 | chart_type = 'line'
7 | scales = {
8 | 'xAxes': [Axes(type='time', position='bottom')],
9 | }
10 |
11 | def get_datasets(self, **kwargs):
12 | data_scatter = [{'y': 24, 'x': '2017-01-01T21:00:00'}, {'y': 1, 'x': '2017-01-02T03:00:00'}, {'y': 7, 'x': '2017-01-02T14:00:00'}, {'y': 7, 'x': '2017-01-03T08:00:00'}, {'y': 13, 'x': '2017-01-04T00:00:00'}, {'y': 7, 'x': '2017-01-04T07:00:00'}, {'y': 19, 'x': '2017-01-05T01:00:00'}, {'y': 18, 'x': '2017-01-05T15:00:00'}, {'y': 14, 'x': '2017-01-06T00:00:00'}, {'y': 2, 'x': '2017-01-06T07:00:00'}, {'y': 18, 'x': '2017-01-07T06:00:00'}, {'y': 4, 'x': '2017-01-07T07:00:00'}, {'y': 21, 'x': '2017-01-07T21:00:00'}, {'y': 5, 'x': '2017-01-08T00:00:00'}, {'y': 16, 'x': '2017-01-08T07:00:00'}, {'y': 14, 'x': '2017-01-08T11:00:00'}, {'y': 21, 'x': '2017-01-09T04:00:00'}, {'y': 25, 'x': '2017-01-09T20:00:00'}, {'y': 9, 'x': '2017-01-10T15:00:00'}, {'y': 25, 'x': '2017-01-11T10:00:00'}, {'y': 17, 'x': '2017-01-11T17:00:00'}, {'y': 10, 'x': '2017-01-12T11:00:00'}, {'y': 7, 'x': '2017-01-12T17:00:00'}, {'y': 11, 'x': '2017-01-12T22:00:00'}, {'y': 2, 'x': '2017-01-13T04:00:00'}, {'y': 13, 'x': '2017-01-13T12:00:00'}, {'y': 12, 'x': '2017-01-14T12:00:00'}, {'y': 16, 'x': '2017-01-15T10:00:00'}, {'y': 15, 'x': '2017-01-16T00:00:00'}, {'y': 23, 'x': '2017-01-16T17:00:00'}, {'y': 15, 'x': '2017-01-17T02:00:00'}, {'y': 22, 'x': '2017-01-17T12:00:00'}, {'y': 18, 'x': '2017-01-17T15:00:00'}, {'y': 16, 'x': '2017-01-18T14:00:00'}, {'y': 7, 'x': '2017-01-19T09:00:00'}, {'y': 10, 'x': '2017-01-20T02:00:00'}, {'y': 7, 'x': '2017-01-20T13:00:00'}, {'y': 5, 'x': '2017-01-20T17:00:00'}, {'y': 15, 'x': '2017-01-20T20:00:00'}, {'y': 5, 'x': '2017-01-21T06:00:00'}, {'y': 13, 'x': '2017-01-21T18:00:00'}, {'y': 20, 'x': '2017-01-22T13:00:00'}, {'y': 20, 'x': '2017-01-22T16:00:00'}, {'y': 23, 'x': '2017-01-23T15:00:00'}, {'y': 3, 'x': '2017-01-23T20:00:00'}, {'y': 20, 'x': '2017-01-24T15:00:00'}, {'y': 19, 'x': '2017-01-24T16:00:00'}, {'y': 1, 'x': '2017-01-25T00:00:00'}, {'y': 3, 'x': '2017-01-25T02:00:00'}, {'y': 22, 'x': '2017-01-25T23:00:00'}, {'y': 6, 'x': '2017-01-26T19:00:00'}, {'y': 17, 'x': '2017-01-27T10:00:00'}, {'y': 7, 'x': '2017-01-28T09:00:00'}, {'y': 23, 'x': '2017-01-29T05:00:00'}, {'y': 19, 'x': '2017-01-29T17:00:00'}, {'y': 16, 'x': '2017-01-30T08:00:00'}, {'y': 19, 'x': '2017-01-30T09:00:00'}, {'y': 23, 'x': '2017-01-31T06:00:00'}, {'y': 18, 'x': '2017-02-01T05:00:00'}]
13 | data_line = [{'y': 20, 'x': '2017-01-02T00:00:00'}, {'y': 3, 'x': '2017-01-03T00:00:00'}, {'y': 2, 'x': '2017-01-04T00:00:00'}, {'y': 18, 'x': '2017-01-05T00:00:00'}, {'y': 19, 'x': '2017-01-06T00:00:00'}, {'y': 20, 'x': '2017-01-07T00:00:00'}, {'y': 5, 'x': '2017-01-08T00:00:00'}, {'y': 23, 'x': '2017-01-09T00:00:00'}, {'y': 18, 'x': '2017-01-10T00:00:00'}, {'y': 5, 'x': '2017-01-11T00:00:00'}, {'y': 6, 'x': '2017-01-12T00:00:00'}, {'y': 2, 'x': '2017-01-13T00:00:00'}, {'y': 23, 'x': '2017-01-14T00:00:00'}, {'y': 3, 'x': '2017-01-15T00:00:00'}, {'y': 24, 'x': '2017-01-16T00:00:00'}, {'y': 10, 'x': '2017-01-17T00:00:00'}, {'y': 9, 'x': '2017-01-18T00:00:00'}, {'y': 11, 'x': '2017-01-19T00:00:00'}, {'y': 10, 'x': '2017-01-20T00:00:00'}, {'y': 2, 'x': '2017-01-21T00:00:00'}, {'y': 16, 'x': '2017-01-22T00:00:00'}, {'y': 24, 'x': '2017-01-23T00:00:00'}, {'y': 3, 'x': '2017-01-24T00:00:00'}, {'y': 13, 'x': '2017-01-25T00:00:00'}, {'y': 7, 'x': '2017-01-26T00:00:00'}, {'y': 10, 'x': '2017-01-27T00:00:00'}, {'y': 7, 'x': '2017-01-28T00:00:00'}, {'y': 13, 'x': '2017-01-29T00:00:00'}, {'y': 1, 'x': '2017-01-30T00:00:00'}, {'y': 10, 'x': '2017-01-31T00:00:00'}, {'y': 7, 'x': '2017-02-01T00:00:00'}]
14 |
15 | return [
16 | DataSet(type='line',
17 | label='Scatter',
18 | showLine=False,
19 | data=data_scatter),
20 | DataSet(type='line',
21 | label='Line',
22 | borderColor='red',
23 | data=data_line)
24 | ]{% if async %}
25 |
26 | # urls.py
27 | from demo import charts
28 | from jchart.views import ChartView
29 |
30 | urlpatterns = [
31 | url(r'^charts/scatter_line_chart/$',
32 | ChartView.from_chart(charts.ScatterLineChart()),
33 | name='scatter_line_chart')
34 | ]
35 |
36 | # Template.html
37 | {% render_chart 'scatter_line_chart' %}{% endif %}#charts.py
2 | from jchart import Chart
3 | from jchart.config import Axes, DataSet, rgba
4 |
5 | class TimeSeriesChart(Chart):
6 | chart_type = 'line'
7 | scales = {
8 | 'xAxes': [Axes(type='time', position='bottom')],
9 | }
10 |
11 | def get_datasets(self, **kwargs):
12 | data = [{'y': 0, 'x': '2017-01-02T00:00:00'}, {'y': 1, 'x': '2017-01-03T00:00:00'}, {'y': 4, 'x': '2017-01-04T00:00:00'}, {'y': 9, 'x': '2017-01-05T00:00:00'}, {'y': 16, 'x': '2017-01-06T00:00:00'}, {'y': 25, 'x': '2017-01-07T00:00:00'}, {'y': 36, 'x': '2017-01-08T00:00:00'}, {'y': 49, 'x': '2017-01-09T00:00:00'}, {'y': 64, 'x': '2017-01-10T00:00:00'}, {'y': 81, 'x': '2017-01-11T00:00:00'}, {'y': 100, 'x': '2017-01-12T00:00:00'}, {'y': 121, 'x': '2017-01-13T00:00:00'}, {'y': 144, 'x': '2017-01-14T00:00:00'}, {'y': 169, 'x': '2017-01-15T00:00:00'}, {'y': 196, 'x': '2017-01-16T00:00:00'}, {'y': 225, 'x': '2017-01-17T00:00:00'}, {'y': 256, 'x': '2017-01-18T00:00:00'}, {'y': 289, 'x': '2017-01-19T00:00:00'}, {'y': 324, 'x': '2017-01-20T00:00:00'}, {'y': 361, 'x': '2017-01-21T00:00:00'}, {'y': 400, 'x': '2017-01-22T00:00:00'}, {'y': 441, 'x': '2017-01-23T00:00:00'}, {'y': 484, 'x': '2017-01-24T00:00:00'}, {'y': 529, 'x': '2017-01-25T00:00:00'}, {'y': 576, 'x': '2017-01-26T00:00:00'}, {'y': 625, 'x': '2017-01-27T00:00:00'}, {'y': 676, 'x': '2017-01-28T00:00:00'}, {'y': 729, 'x': '2017-01-29T00:00:00'}, {'y': 784, 'x': '2017-01-30T00:00:00'}, {'y': 841, 'x': '2017-01-31T00:00:00'}, {'y': 900, 'x': '2017-02-01T00:00:00'}]
13 |
14 | return [DataSet(
15 | type='line',
16 | label='Time Series',
17 | data=data,
18 | )]{% if async %}
19 |
20 | # urls.py
21 | from demo import charts
22 | from jchart.views import ChartView
23 |
24 | urlpatterns = [
25 | url(r'^charts/time_series_chart/$',
26 | ChartView.from_chart(charts.TimeSeriesChart()),
27 | name='time_series_chart')
28 | ]
29 |
30 | # Template.html
31 | {% render_chart 'time_series_chart' %}{% endif %}8 | This Django app enables you to configure and render Chart.JS charts directly from your Django codebase. These charts can be rendered directly in your html templates, or served asynchronously on a Django url. 9 |
10 | 11 |18 | install django-jchart 19 |
20 | 21 |pip install django-jchart24 | Add django-chart to your installed apps. 25 |
26 | 27 |INSTALLED_APPS = (
28 | '...',
29 | 'jchart',
30 | )33 | Enable template loading from app folders by adding the following property to your TEMPLATES django configuration: 34 |
35 | 36 |TEMPLATES = [
37 | {
38 | 'BACKEND': 'django.template.backends.django.DjangoTemplates',
39 | 'APP_DIRS': True,
40 | # ...
41 | }]
42 |
51 | For the charts to be rendered inside the browser you will
52 | need to include the Chart.JS library. Add the following
53 | HTML before your closing </body> tag:
54 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>59 | If you want to make use of asynchronous loading charts 60 | you will also need to include jQuery: 61 |
62 | 63 |<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
72 | At the heart of this charting library lies the Chart class. This class describes a chart and defines which data it should display. The chart's 'class fields' map to Chart.JS options which describe how the chart should render and behave. By overriding the get_datasets method on your Chart instance you can define which data should be displayed.
73 |
76 | To define which type of chart you want to render (e.g. a line or bar chart), your chart class should set its class field chart_type to one of "line", "bar", "radar", "polarArea", "pie", or "bubble". A chart class without this field is invalid and initialization will result in an ImproperlyConfigured exception.
77 |
from jchart import Chart
80 |
81 | class LineChart(Chart):
82 | chart_type = 'line'
91 | The get_datasets method should return a list of datasets this chart should display. Where a dataset is a dictionary with key/value configuration pairs (see the Chart.JS documentation).
92 |
from jchart import Chart
95 |
96 | class LineChart(Chart):
97 | chart_type = 'line'
98 |
99 | def get_datasets(self, **kwargs):
100 | return [{
101 | 'label': "My Dataset",
102 | 'data': [69, 30, 45, 60, 55]
103 | }]
112 | This method allows you to set the Chart.JS data.labels parameter. Which allows you to configure categorical axes. For an example on how to use this feature see this pie chart.
113 |
from jchart import Chart
116 |
117 | class PieChart(Chart):
118 | chart_type = 'pie'
119 |
120 | def get_labels(self, **kwargs):
121 | return ['Red', 'Blue']130 | A chart can be configured through the following class fields: 131 |
132 | 133 |
134 | scales
135 | layout
136 | title
137 | legend
138 | tooltips
139 | hover
140 | animation
141 | elements
142 | responsive
143 |
146 | All of these fields map to the same key in the Chart.JS 'options' object. For instance, if you wanted to create a chart that does not render responsively you would set the responsive class field to false: 147 |
148 | 149 |from jchart import Chart
150 |
151 | class UnresponsiveLineChart(Chart):
152 | chart_type = 'line'
153 | responsive = False
154 | # ...
157 | Most of these class fields require either a list of dicitonaries or a dictionary. With the exception of responsive which should be a boolean value. Be sure to read the Chart.JS documentation on how to use these configuration options.
158 |
161 | For your convenience there are some methods located in jchart.config which can be used to produce correct dictionaries to configure Chart.JS properties. Most of these methods only serve as a validation step for your input configuration but some can also transform their input. Let's take a look at an example, how would you configure the X-Axis so it is not to be displayed:
162 |
from jchart import Chart
165 | from jchart.config import Axes
166 |
167 | class LineChart(Chart):
168 | chart_type = 'line'
169 | scales = {
170 | 'xAxes': [Axes(display=False)],
171 | }
174 | jchart.config also contains a method to create dataset configuration dictionaries. One of the advantages of using this method is that it includes a special property color which can be used to automatically set the values for: 'backgroundColor', 'pointBackgroundColor', 'borderColor', 'pointBorderColor', and 'pointStrokeColor'.
175 |
from jchart import Chart
178 | from jchart.config import Axes
179 |
180 | class LineChart(Chart):
181 | chart_type = 'line'
182 |
183 | def get_datasets(self, **kwargs):
184 | return [DataSet(color=(255, 255, 255), data=[])]
187 | The jchart.config module contains methods for the properties listed below. Keep in mind that you are in no way obligated to use these methods, you could also supply Python dictionaries in the place of these method calls.
188 |
189 |
Axes, ScaleLabel, Tick, DataSet, Tooltips, Legend, LegendLabel, Title, Hover, InteractionModes, Animation, Element, ElementArc, ElementLine, ElementPoint, ElementRectangle
191 |
192 |
193 | 194 |
options this has to be set to a dictionary and can be used to set any other Chart.JS configuration values that are not configurable through a predefined class field (e.g. maintainAspectRatio). The class fields have precedence over any configuration applied through the options dictionary.
196 |
197 |
198 | from jchart import Chart
199 |
200 | class OptionsChart(Chart):
201 | chart_type = 'line'
202 | options = {
203 | 'maintainAspectRatio': True
204 | }
205 | # ...
206 | 215 | Chart instances can be passed to your Django template context. 216 | Inside the template you can invoke the method `as_html` on the 217 | chart instance to render the chart. 218 |
219 | 220 |# LineChart is a class inheriting from jchart.Chart
221 |
222 | def some_view(request):
223 | render(request, 'template.html', {
224 | 'line_chart': LineChart(),
225 | })228 | The following code is an example of how to render this line chart 229 | inside your html template: 230 |
231 | 232 |{{ line_chart.as_html }}241 | When rendering the chart directly into your HTML template, all the data needed for the chart is transmitted on the page's HTTP request. It is also possible to load the chart (and its required data) asynchronous. 242 |
243 | 244 |
245 | To do this we need to setup a url endpoint from which to load the chart's data. There is a classmethod available on jchart.views.ChartView to automatically create a view which exposes the chart's configuration data as JSON on a HTTP get request:
246 |
from jchart.views import ChartView
249 |
250 | # LineChart is a class inheriting from jchart.Chart
251 | line_chart = LineChart()
252 |
253 | urlpatterns = [
254 | url(r'^charts/line_chart/$', ChartView.from_chart(line_chart), name='line_chart'),
255 | ]258 | You can use a custom templatetag inside your Django template to load this chart asynchronously. The custom tag behaves like the Django url templatetag and any positional or keyword arguments supplied to it are used to resolve the url for the given url name. In this example the url does not require any url parameters 259 | to be resolved: 260 |
261 | 262 |{% load jchart %}
263 |
264 | {% render_chart 'line_chart' %}
265 | 268 | This tag will be expanded into the following JS/HTML code: 269 |
270 | 271 |<canvas class="chart" id="unique-chart-id">
272 | </canvas>
273 |
274 | <script type="text/javascript">
275 | window.addEventListener("DOMContentLoaded", function() {
276 | $.get('/charts/line_chart/', function(configuration) {
277 | var ctx = document.getElementById("unique-chart-id").getContext("2d");
278 |
279 | new Chart(ctx, configuration);
280 | });
281 | });
282 | </script>
291 | It can often be useful to reuse the same chart for different datasets. This can either be done by subclassing an existing chart class and overriding its get_datasets method. But there is another way to do this. Any arguments given to the as_html method are supplied to your get_datasets method. This makes it possible to parameterize the output of get_datasets
292 |
295 | Let's have a look at an example. Imagine we have price point data stored in a model called Price and this model has a field called currency_type. We could render the chart for different currency types by accepting the value for this field as a parameter to get_datasets.
296 |
from jchart import Chart
299 | from core.models import Price
300 |
301 | class PriceChart(Chart):
302 | chart_type = 'line'
303 |
304 | def get_datasets(self, currency_type):
305 | prices = Price.objects.filter(currency_type=currency_type)
306 |
307 | data = [{'x': price.date, 'y': price.point} for price in prices]
308 |
309 | return [DataSet(data=data)]
312 | If we supply an instance of this chart to the context of our template, we could use this to render two different charts. This is done by using the render_chart template tag to supply additional parameters to the get_datasets method:
313 |
{% render_chart price_chart 'euro' %}
316 |
317 | {% render_chart price_chart 'dollar' %}
320 | For asynchronous charts any url parameters are passed to the get_datasets method.
321 |
from jchart.views import ChartView
324 | from .charts import PriceChart
325 |
326 | price_chart = PriceChart()
327 |
328 | urlpatterns = [
329 | url(r'^currency_chart/(?P<>\w+)/$',
330 | ChartView.from_chart(price_chart))
331 | ]
334 | To render this chart asynchronously we have to supply the url parameter as a second argument to the render_chart template tag, like so:
335 |
{% load jchart %}
338 |
339 | {% render_chart 'price_chart' 'euro' %}
340 |
341 | {% render_chart 'price_chart' 'dollar' %}12 | An example of a plot using time series data, where the X axis represents the time and the Y axis is any arbitrary value. 13 |
14 | {{ time_series_chart.as_html }} 15 | 16 |Code used for this example:
17 | {% include "code-examples/time_series_chart.html" with async=False %} 18 | 19 |25 | An example of a scatter plot combined with a line chart. Such a plot could for instance be used to visualize the moving average of scattered data. 26 |
27 | {{ scatter_line_chart.as_html }} 28 |29 | Code: 30 |
31 | {% include "code-examples/scatter_line_chart.html" with async=False %} 32 | 33 |39 | A bar chart using one dataset. 40 |
41 | {{ bar_chart.as_html }} 42 |43 | Code: 44 |
45 | {% include "code-examples/bar_chart.html" with async=False %} 46 | 47 |53 | A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets. 54 |
55 | {{ radar_chart.as_html }} 56 |57 | Code: 58 |
59 | {% include "code-examples/radar_chart.html" with async=False %} 60 |66 | A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets. 67 |
68 | {{ polar_chart.as_html }} 69 |70 | Code: 71 |
72 | {% include "code-examples/polar_chart.html" with async=False %} 73 | 74 |80 | A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets. 81 |
82 | {{ pie_chart.as_html }} 83 |84 | Code: 85 |
86 | {% include "code-examples/pie_chart.html" with async=False %} 87 | 88 |94 | A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets. 95 |
96 | {{ bubble_chart.as_html }} 97 |98 | Code: 99 |
100 | {% include "code-examples/bubble_chart.html" with async=False %} 101 | -------------------------------------------------------------------------------- /demo_project/demo/templates/sub/nav.html: -------------------------------------------------------------------------------- 1 | 102 | -------------------------------------------------------------------------------- /demo_project/demo/tests.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | from django.test import TestCase, Client 4 | 5 | from selenium.webdriver.chrome.webdriver import WebDriver 6 | 7 | 8 | class HomePageTestCase(TestCase): 9 | 10 | def setUp(self): 11 | self.client = Client() 12 | 13 | def test_home(self): 14 | response = self.client.get('/') 15 | self.assertContains(response, 'Django-JChart') 16 | self.assertContains(response, '