I am trying to reduce the space between bars, and I am pretty sure it has to be within this piece of code. I removed the code that displays the legend and yAxes assuming I would not need to edit those parts.
barchart = new Chart(myChart, {
type:'bar',
data:{
labels: {{ data.x_vals | tojson }},
datasets:[{
label:'Liquid Level',
data:{{ data.y_vals }},
backgroundColor: gradient,
borderWidth:1, //Effects plotted line on chart
borderColor:'white',
hoverBorderWidth:1,
hoverBorderColor:'#000',
barPercentage: 1.0,
categoryPercentage: 1.0
}]
},
options:{
// legend is here
},
scales: {
// yAxes is here
xAxes: [{
display: true,
ticks: {
autoSkip: true,
padding: 4,
fontSize: 12
}
}]
},
You can set the category and bar percentages to 1:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'blue',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
EDIT:
Make sure you have at least chart.js version 2.9 installed since any version below its not implemented yet
I'm following this article to render highchart with json data from django query. However chart is not rendered but I'm not getting any errors from Django or by the client when inspecting source. Appreciate if anyone can point the mistakes. Thank you in advance.
I'm using django 2.0 and python3.5
models.py
PLATFORM = (
('ipcore','IPCORE'),
('metro','METRO E'),
('edge','EDGE'),
('access','ACCESS'),
('voice','VOICE'),
('system','SYSTEM'),
('iptv','IPTV'))
class Contract(models.Model):
vendor_name = models.ForeignKey(Vendor, on_delete=models.CASCADE)
name = models.CharField(max_length=500)
contract_no = models.CharField(max_length=100, blank=True)
partner_name = models.CharField(max_length=200, blank=True)
value = models.DecimalField(max_digits=11, decimal_places=2,
blank=True, null=True)
platform = models.CharField(max_length=100, blank=True,
choices=PLATFORM)
views.py
def json_example(request):
return render(request, 'app/json_example.html')
def chart_data(request):
dataset=Contract.objects.all().values('platform').
exclude(platform='').annotate(Sum('value')).order_by('value__sum')
platform_name = dict()
for platform_tuple in Contract.PLATFORM:
platform_name[platform_tuple[0]] = platform_tuple[1]
chart = {
'chart': {'type': 'pie'},
'title': {'text': 'Contract Value for Every platform'},
'series': [{
'name': 'Platform',
'data': list(map(lambda row: {'name':
platform_name[row['platform']],
'y': row['value__sum']}, dataset))
}]
}
return JsonResponse(chart)
urls.py
url('json_example/', views.json_example, name='json_example'),
url('json_example/data/', views.chart_data, name='chart_data'),
json_example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contract Inventory Highcharts Example</title>
</head>
<body>
<div id="container" data-url="{% url 'chart_data' %}"></div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$.ajax({
url: $("#container").attr("data-url"),
dataType: 'json',
success: function (data) {
Highcharts.chart("container", data);
}
});
</script>
</body>
</html>
This is the json data from dataset.
[{"platform": "IPTV", "value__sum": "0.00"}, {"platform": "METRO E", "value__sum": "71372564.20"}, {"platform": "EDGE", "value__sum": "73867073.63"}, {"platform": "SYSTEM", "value__sum": "135465418.85"}, {"platform": "IPCORE", "value__sum": "467810178.41"}]
This is the json data from dataset.
[{"platform": "IPTV", "value__sum": "0.00"}, {"platform": "METRO E", "value__sum": "71372564.20"}, {"platform": "EDGE", "value__sum": "73867073.63"}, {"platform": "SYSTEM", "value__sum": "135465418.85"}, {"platform": "IPCORE", "value__sum": "467810178.41"}]
Your json data doesn't contain chart options. It should be something like this:
'{"title":{"text":"Title"},"series":[{"name":"Installation","data":[43934,52503,57177,69658,97031,119931,137133,154175]}]}'
What's more, you should parse json to js object before passing it to Highcharts constructor:
<script>
$.ajax({
url: $("#container").attr("data-url"),
dataType: 'json',
success: function (data) {
var chartData = JSON.parse(data);
Highcharts.chart("container", chartData);
}
});
</script>
Check the example:
https://jsfiddle.net/BlackLabel/7zfyhnbr/
You have to format the data in such a way that it should match the highcharts ploting object. Please checkout the below code.
data = [
{"platform": "IPTV", "value__sum": "0.00"},
{"platform": "METRO E", "value__sum": "71372564.20"},
{"platform": "EDGE", "value__sum": "73867073.63"},
{"platform": "SYSTEM", "value__sum": "135465418.85"},
{"platform": "IPCORE", "value__sum": "467810178.41"}];
x_axis_data = [];
y_axis_data = [];
for(index=0; index < data.length; index++) {
item = data[index];
x_axis_data.push(item['platform'])
y_axis_data.push(parseFloat(item['value__sum']))
}
Highcharts.chart('container', {
title: {
text: 'learnbatta.com'
},
xAxis: {
title: {
text: 'X Value'
},
categories: x_axis_data
},
yAxis: {
title: {
text: 'Y Value'
},
},
series: [{
name: 'Curve',
data: y_axis_data
}]
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
You have to update your code like below
<script>
$.ajax({
url: $("#container").attr("data-url"),
dataType: 'json',
success: function (data) {
var data = JSON.parse(data);
x_axis_data = [];
y_axis_data = [];
for(index=0; index < data.length; index++) {
item = data[index];
x_axis_data.push(item['platform'])
y_axis_data.push(parseFloat(item['value__sum']))
}
Highcharts.chart('container', {
title: {
text: 'learnbatta.com'
},
xAxis: {
title: {
text: 'X Value'
},
categories: x_axis_data
},
yAxis: {
title: {
text: 'Y Value'
},
},
series: [{
name: 'Curve',
data: y_axis_data
}]
});
}
});
</script>
I've manage to solve it by updated my views.py using django rest API and my template accordingly. Here is my updated code:
views.py
from rest_framework.views import APIView
from rest_framework.response import Response
class ChartView(View):
def get(self, request, *args, **kwargs):
return render(request, 'app/charts.html')
class ChartData(APIView):
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
totalvendor= Contract.objects.all().values("vendor_name_id__name").
annotate(Count("id")).order_by('-id__count')[:8]
labels = totalvendor.values_list('vendor_name_id__name')
default_items = totalvendor.values_list('id__count', flat=True)
default_items = list(default_items)
data = {
"labels": labels,
"default": default_items,
}
return Response(data)
Pass an array from queryset to template and js
Here is my urls.py
url(r'^chart/', views.ChartView.as_view(), name='chart'),
url(r'^api/chart/data/$', ChartData.as_view(), name='chartdata'),
Here my code for charts.html
<script>
{% block jquery %}
var endpoint = '/api/chart/data/'
var defaultData = []
var labels = [];
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
labels = data.labels
defaultData = data.default
setChart()
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
function setChart(){
var ctx = document.getElementById("myChart");
var ctx2 = document.getElementById("myChart2");
var myChart = new Chart(ctx2, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Value Contract for Platform',
data: defaultData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
title:{
display:true,
text:'Count Contract for Every Platform',
fontSize:18,
position:'top'
},
legend:{
display:false,
position:'right',
labels:{
fontColor:'#000'
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: labels,
datasets: [{
label: 'Count Contract for Platform',
data: defaultData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
// var ctx = document.getElementById("myChart");
{% endblock %}
</script>
{% block content %}
<div class='row'>
<div class='col-sm-12' url-endpoint='{% url "chartdata" %}'>
<h1>Data Presentation</h1>
<div class=''>
<div class='col-sm-6'>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<div class='col-sm-6'>
<canvas id="myChart2" width="400" height="400"></canvas>
</div>
</div>
</div>
</div>
{% endblock content %}
Anyway thanks to those who answered my questions
I'm trying to create a chart using CanvasJS but I'm getting the following error:
Uncaught TypeError: b[a].render is not a function
w.render # canvasjs.min.js:84
Aa.Chart.render # canvasjs.min.js:412
window.onload # statistics:107
The code is the example code found on their website:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Number of Students in Each Room"
},
axisX:{
title: "Rooms"
},
axisY:{
title: "percentage"
},
data: [
{
type: "stackedColumn100",
legendText: "Boys",
showInLegend: "true",
indexLabel: "#percent %",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [
{ y: 40, label: "Cafeteria"},
{ y: 10, label: "Lounge" },
{ y: 72, label: "Games Room" },
{ y: 30, label: "Lecture Hall" },
{ y: 21, label: "Library"}
]
},
{
type: "stackedColumn100",
legendText: "Girls",
showInLegend: "true",
indexLabel: "#percent %",
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
dataPoints: [
{ y: 20, label: "Cafeteria"},
{ y: 14, label: "Lounge" },
{ y: 40, label: "Games Room" },
{ y: 43, label: "Lecture Hall" },
{ y: 17, label: "Library"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
I've tried the same code on my machine and it's working fine, but when I upload it to my server, then I'm getting the previously mentioned error.
Does anyone has any idea what is wrong here?
Thanks!
The issue is a bug in Canvas.js - they are using "for...in" to iterate over an array, but if any other Javascript has extended the Array prototype they mistakenly assume the array is non-empty and you get the error (see Why is using "for...in" with array iteration a bad idea? for a discussion about this type of problem).
See my bug report: http://canvasjs.com/forums/topic/canvas-js-javascript-bug/ and fiddle reproducing this: http://jsfiddle.net/QwZuf/298/
If you're willing to use the non-minified code temporarily, you can patch this yourself by using "canvasjs.js" and locating the following (line 2406 in 1.7.0 GA):
for (index in plotAreaElements) {
plotAreaElements[index].render();
}
Wrap it in a simple length test and you should be fine until an official patch is available:
if (plotAreaElements.length > 0) {
for (index in plotAreaElements) {
plotAreaElements[index].render();
}
}
Edit: per the comment below, this bug has now been officially patched.
The below code opens fine in all browsers, but when I'm trying to run the code in WPF web browser control, it gives a Javascript error "canvas.getContext("2d") is undefined".
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.js" type="text/javascript"></script>
<script type="text/javascript">
var canvas = null;
var context = null;
window.onload = function () {
invokeService();
canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
alert(context);
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
};
var barChartData;
function invokeService() {
alert("q");
barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
}
</script>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
</body>
</html>
Edit 1: chart.js can be download for here https://github.com/nnnick/Chart.js
After one cup of coffee I have solved that issue by adding following line
<meta http-equiv="X-UA-Compatible" content="IE=9">
I have problem with items order in legend, when I using Google Chrome browser and when I have more than 10 items. In all other browsers items are displayed in appropriate order, but in Chrome - not.
version: Highcharts JS v2.1.6 (2011-07-08)
Chrome versions: 19.0.1084.56 and 20.0.1132.47
The chart looks like below:
Please see following code:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
plotOptions: {
pie: {
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
distance: 10
},
showInLegend: true
}
},
legend: {
itemWidth: 100
},
series: [{
type: 'pie',
data: [
['label1', 10],
['label2', 20],
['label3', 30],
['label4', 40],
['label5', 155.89],
['label6', 50],
['label7', 60],
['label8', 70],
['label9', 80],
['label10', 90],
['label11', 65.70],
['label12', 100],
]
}]
});
});
</script>
<div id="chart" style="width: 460px; height: 290px; margin: 0 auto">
</div>
</body>
</html>
Solution: update highcharts library to 2.2.5.