Usage¶
Charts as views¶
If you want render only one chart, you can inherit ChartViews available. Is required that you define two essential methods: “generate_labels” and “generate_values”.
Available BarChartView, PieChartView, DoughnutChartView, RadarChartView, HorizontalBarChartView, PolarAreaChartView, LineChartView, GroupChartView
in views.py import type chart to want use:
from django.views.generic.base import TemplateView
from charts.views import BarChartView
class ExampleChart(BarChartView, TemplateView):
...
title = "Index of ..."
def generate_labels(self):
return ["Africa","Brazil","Japan","EUA"]
def generate_values(self):
return [1,10,15,8]
in your template that you want render chart, use this tag:
{% load charts %}
<html>
<head></head>
<body>
{% render_chart chart %}
</body>
</html>
Options charts views¶
below default values
title = ""
legend = False
beginAtZero = False
aspectRatio = True
width = 100
height = 100
tooltip = None
If you want resize the chart, just define width an height properties and set aspectRatio as False:
from django.views.generic.base import TemplateView
from charts.views import BarChartView
class ExampleChart(BarChartView, TemplateView):
...
title = "Index of ..."
aspectRatio = False
width = 300
height = 250
def generate_labels(self):
return ["Africa","Brazil","Japan","EUA"]
def generate_values(self):
return [1,10,15,8]
RadarChartView¶
To use RadarChartView you need create an special node to add dataset. Using ‘create_node’ method you can pass ‘label’, data (list) and optional parameter ‘color’, if you don’t pass color, will be generate random color to node. Use this in generate_values method.
Example below:
from django.views.generic.base import TemplateView
from charts.views import RadarChartView
class ExampleChart(RadarChartView, TemplateView):
...
title = "Index of ..."
def generate_labels(self):
return ["Africa","Brazil","Japan","EUA"]
def generate_values(self):
dataset = []
nodeOne = self.create_node("Example 1", [15,5,2,50]) #you can create many nodes to view in chart
....
dataset.append(nodeOne)
return dataset
LineChartView¶
If you want use LineChartView, is same method that RadarChartView, but have unique difference is the parameter ‘fill’ that by default is False. The linechart too have create_node method to generate special node for chart.
For generate a AreaChart define fill as True on create_node method. You too can be pass a color as parameter on this method.
The color must be passed as a string “#606060”
Example: self.create_node(“Test”, [1,2,3,4,5], “#606060”)
GroupChartView¶
Too heve a crete_node method and same method generate of charts above.
Charts as objects¶
in your views.py:
from django.views.generic import TemplateView
from charts.objects import BarChart
class ExampleView(TemplateView):
template_name = "core/example.html"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
chart = BarChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [2,3,10,6]
chart.data_label = "Test"
context["chart"] = chart.build_chart()
return context
And in your “example.html” template use this:
<canvas id="mychart"></canvas>
on script section:
$(function(){
var dataset = JSON.parse('{{ chart|safe }}');
new Chart(document.getElementById("mychart"), dataset);
})
You can be use chart object in any function in your views.py, for example:
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_method(self):
chart = BarChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [2,3,10,6]
chart.data_label = "Test"
return chart.build_chart()
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["chart"] = self.my_method() #any key in context
return context
The charts available in package is: BarChart, PieChart, HorizontalBarChart, DoughnutChart, PolarAreaChart, RadarChart, LineChart, GroupChart
It’s possible define options to object chart, for example:
Define fixed colors to chart¶
For define fixed instead random colors use this:
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_method(self):
chart = BarChart()
chart.set_colors(["#fff","#B4edf",...]) # set your color list here
Many charts by views¶
Here you can be render more than one charts in your template html, just call instances of charts and define key in context
from django.views.generic import TemplateView
from charts.objects import BarChart, PieChart
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_barchart(self):
chart = BarChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [2,3,10,6]
chart.data_label = "Test"
return chart.build_chart()
def my_piechart(self):
chart = PieChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [2,3,10,6]
chart.data_label = "Test"
return chart.build_chart()
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["barchart"] = self.my_barchart()
context["piechart"] = self.my_piechart()
return context
In your template body:
Example using bootstrap:
<div class="row">
<div class="col-6">
<canvas id="mybarchart"></canvas>
</div>
<div class="col-6">
<canvas id="mypiechart"></canvas>
</div>
</div>
and section scripts:
$(function(){
var bardata = JSON.parse('{{ barchart|safe }}');
new Chart(document.getElementById("mybarchart"), bardata);
var piedata = JSON.parse('{{ piechart|safe }}');
new Chart(document.getElementById("mypiechart"), piedata);
});
RadarChart¶
For use radar charts as a object in your view, do this:
from django.views.generic import TemplateView
from charts.objects import RadarChart
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_method(self):
chart = RadarChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [
chart.create_node("Example 1", [5,8,9,64,3]),
chart.create_node("Example 2", [10,1,19,6,13])
]
return chart.build_chart()
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["chart"] = self.my_method()
return context
LineChart¶
from django.views.generic import TemplateView
from charts.charts import LineChart
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_method(self):
chart = LineChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [
chart.create_node("Example 1", [5,8,9,64,3])
]
return chart.build_chart()
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["chart"] = self.my_method()
return context
AreaChart¶
Just use LineChart and define fill parameter as a True, you can define color to node if you want.
from django.views.generic import TemplateView
from charts.charts import LineChart
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_method(self):
chart = LineChart()
chart.title = "Example charts title"
chart.labels = ["test 1","test 2", "test 3", "test 4"]
chart.data = [
chart.create_node("Example 1", [5,8,9,64,3], True), # create a node for line chart
]
# True option in lines above is fill option (False or True)
return chart.build_chart()
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["chart"] = self.my_method()
return context
GroupChart¶
The same method that charts above, only difference is the create_node method have a color parameter.
Override Tooltips¶
You can override tooltips in charts, just only define chart.tooltips with list tooltips itens.
chart as object
views.py
class ExampleView(TemplateView):
template_name = "core/example.html"
def my_method(self):
barchart = BarChart()
barchart.title = "Example charts title"
barchart.tooltips = ["tooltip 1","tooltip 2","tooltip 3"]
...
or chart as a view:
views.py
from django.views.generic.base import TemplateView
from charts.views import BarChartView
class ExampleChart(BarChartView, TemplateView):
...
title = "Index of ..."
def generate_labels(self):
return ["Africa","Brazil","Japan","EUA"]
def generate_values(self):
return [1,10,15,8]
def get_tooltips(self):
return ["tooltip 1","tooltip 2","tooltip 3"]
And your template use this:
$(function(){
var dataset = JSON.parse('{{ chart|safe }}');
var tooltips = {{ tooltips|safe }};
callback = {
callbacks: {
label: function(tooltipItem,data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
return tooltips[tooltipItem.index] + dataset.data[tooltipItem.index];
}
}
}
dataset.options.tooltips = Object.assign(callback);
$(function(){
new Chart(document.getElementById("chart_view"), dataset);
});
});
Override yAxes in BarCharts¶
You can override yAxes to show values in percentage, just only add extra scales options:
PS: you need convert value to percentage value in django views or in callback function into javascript.
$(function(){
var dataset = JSON.parse('{{ chart|safe }}');
scales = {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: this.max,
callback: function (value) {
return value + '%';
},
}
}]
}
dataset.options.scales = Object.assign(scales); //append extra option into context option
new Chart(document.getElementById("mychart"), dataset);
});