Chart.js not showing up on online site - javascript

I really can't figure this out.
I'm using Chart.js - and the chart works fine local but when I try to show it online on my server it doesn't work.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Udvikling i motorvejstrafikken 2010-2017',
data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
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: 4
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 90
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400px" height="400px"></canvas>
When I check the console in chrome I get this error:tester:890 Uncaught ReferenceError: Chart is not defined
at tester:890
I check in sources and it says that there is an error here:
var myChart = new Chart(ctx, {
But what is causing this problem. Works fine local and on fiddle.net.
Hopefully somebody is able to help me. Thanks in advance.

Bit late but I had the same problem. To fix it you need to get your chart to generate from window.onload.
e.g.
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myLine = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Udvikling i motorvejstrafikken 2010-2017',
data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
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: 4
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 90
}
}]
}
}
});
};
Don't know why it works locally without this, but needed this change to display on the server.

Related

Bar Chart bars not showing up in Chart.js

Currently trying to create a bar chart in HTML/Javascript. Can't seem to get the bars showing for some reason. Below is the code and image..
Chart shows up but not the actual bars. Guessing this is a data issue but I've been stumped for ages. Any help is greatly appreciated!
HTML
<canvas id="myChart"></canvas>
JS
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
label: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
label: 'number of votes',
data: [1,2,3,4,5,6],
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, 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)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
You have to use labels instead of label for the bar labels. See the official documentation: LINK
So your JS would look like this (see the change on line 5):
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{
label: 'number of votes',
data: [1,2,3,4,5,6],
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, 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)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
It is a basic typo error. It should be 'labels' whereas you have written 'label'.
data: {
labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
datasets: [{

How to set chartJs Doughnut labels on right side?

Actually i'm using chart js chartJs Doughnut chart, this is working fine but how can I set chartJs Doughnut labels on right side?
My Code:-
const countryChart = new Chart(document.getElementById('countryChart').getContext('2d'), {
type: 'doughnut',
data: {
labels: ['India', 'Netherlands', 'UAE', 'Egypt', 'Others'],
datasets: [{
label: 'Revenue',
data: [12, 19, 3, 5, 2],
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
}],
},
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="countryChart" height="150"></canvas>
I want like this:-
ThankYou for your efforts!
I got the solution for it, We need to just add legend positions as given below answer:-
You can also follow given URL to know more about ChartJs positions:-
click here to know more
options: {
plugins: {
legend: {
position: 'right'
}
}
}
const countryChart = new Chart(document.getElementById('countryChart').getContext('2d'), {
type: 'doughnut',
data: {
labels: ['India', 'Netherlands', 'UAE', 'Egypt', 'Others'],
datasets: [{
label: 'Revenue',
data: [12, 19, 3, 5, 2],
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: {
plugins: {
legend: {
position: 'right'
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="countryChart" height="150"></canvas>

Displaying data from simple html form to display in chartjs

I am trying to create a simple form to collect input from the user then display the user data in a bar chart using chartjs. Below is my current javascript code. I want the testValue1, testValue2, testValue3 and testValue4 to display as my data. Any help on what I am missing would be greatly appreciated.
function displayGraph () {
let testOutput = document.getElementById("welcome");
let testValue1 = document.getElementById("test1");
let testValue2 = document.getElementById("test2");
let testValue3 = document.getElementById("test3");
let testValue4 = document.getElementById("test4");
}
let barChart = new Chart(rateOfReturn, {
type: 'bar',
data: {
labels: ["Rate of Return", "Fee #1", "Fee #2", "Fee #3"],
datasets: [{
label: 'Balance by Year',
data: [],
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
}]
},
});
I am not sure your implementation. If you trying to get a value from an input into a chart. Won't something like this work?
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var testOutput = document.getElementById("welcome").value;
var testValue1 = document.getElementById("test1").value;
var testValue2 = document.getElementById("test2").value;
var testValue3 = document.getElementById("test3").value;
var testValue4 = document.getElementById("test4").value;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [testValue1, testValue2, testValue3, testValue4],
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
}
}]
}
}
});
</script>
Reference: http://www.chartjs.org/docs/latest/
Maybe you can pass data instead of the empty array
datasets: [{
label: 'Balance by Year',
data: [], // Empty Array
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
}]
You can first follow the latest Bar chart example and then reproduce it for yourself. http://www.chartjs.org/docs/latest/charts/bar.html
Here you go. This works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SimpleAdd</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" charset="utf-8"></script>
</head>
<body>
<form>
Test:<br>
<input id="test1" type="text">
<input type="button" value="Add data" onclick="adddata()">
</form>
<canvas id="myChart"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("myChart").getContext('2d');
function adddata() {
let test1 = document.getElementById("test1").value;
// myChart.data.labels[1] = testName1;
myChart.data.datasets[0].data[0] = test1;
myChart.update();
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [test1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>

Chartjs – change tooltip border radius

I have created a simple horizontal bar chart using chartjs.
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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
}]
},
});
Now my requirement is to change the border radius of tooltip to make it rectangle. I have tried changing the border radius property but It doesn’t seem to work. Does anyone know how can I change radius of tooltip?
Thanks in advance.
This can be achieved by setting cornerRadius property to 0 (or any number) for tooltips in your chart options.
options: {
tooltips: {
cornerRadius: 0
},
...
}
working example
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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: {
tooltips: {
cornerRadius: 0 //<- set this
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Bar chart does not appear with Chart.js

I'm a beginner trying out Chart.js and I'm having trouble with getting my bar chart to appear. When I try and run this code all I get is a blank screen, any idea why?
<div id="chart">
<canvas id="myGraph" width="400" height="400"></canvas>
</div>
<script>
var myData = {
labels: ["2000", "2001", "2002", "2003"],
datasets: [{
label: 'Test chart',
data: [20, 50, 10, 12],
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
}]
},
});
var ctx = document.getElementById("myGraph").getContext("2d");
var debt = new Chart(ctx).Bar(myData);
</script>
You have several typos in your JSON literal.
I rewrote it like so (see here for the JSFiddle)
var config = {
type: 'bar',
data: {
labels: ["2000", "2001", "2002", "2003"],
datasets: [{
label: 'Test chart',
data: [20, 50, 10, 12],
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
}]
}
};
var ctx = document.getElementById("myGraph");
var debt = new Chart(ctx, config);

Categories