I have a dynamic data that is need to be put inside a for loop in order to display the data of interest. I tested putting animation into 0 from this issue and also try the same update() function.
This is my code below
barChartMonth() {
let backgroundColor: any = [
'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)',
'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)'
];
let borderColor: any = [
'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)',
'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)'
];
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'bar',
data: {
labels: this.monthcostlabor,
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
for(let bard = 0; bard < this.monthcostlabor.length; bard++){
this.barChart.data.datasets.push({ label: this.monthcostlabor[bard], backgroundColor: backgroundColor[bard], borderColor: borderColor[bard], borderWidth: 1 });
}
this.barChart.data.datasets.forEach(element => {
element.data.push(this.monthcostglobal)
});
this.barChart.update();
}
The code above dynamically choose color, hover and based on the data recorded. See for loop. Is there any other way to solve this issue?
A few of the glaring problems is how the length of backgroundColor and borderColor could be less than this.monthcostlabor leading to undefined values when loaded through the bard iterator.
Also, why cannot you loop within the constructor?
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'bar',
data: {
labels: this.monthcostlabor,
datasets: this.monthcostlabor.map((elem,i) => ({
label: elem,
backgroundColor: backgroundColor[(i % backgroundColor.length)],
borderColor: borderColor[(i % borderColor.length)],
borderWidth: 1,
data:[this.monthcostglobal] })); // the second push() can be included here?
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
/*
for(let bard = 0; bard < this.monthcostlabor.length; bard++){
this.barChart.data.datasets.push({ label: this.monthcostlabor[bard], backgroundColor: backgroundColor[bard], borderColor: borderColor[bard], borderWidth: 1 });
}
this.barChart.data.datasets.forEach(element => {
element.data.push(this.monthcostglobal)
});
this.barChart.update(); */
I guess the problem is related to async api calls
I solved it with :
async setChart () {
this.myChart = await this.apiService.setChartData(this.myChart, this.myCanvas);
this.myChart.update();
}
async this.apiService.setChartData(mChart, mCanvas) {
mChart.data = this.getChrData(mLabel, dtSets, this.colourList, this.colourBordList, cType);
mChart.data.labels = mLabel;
return mChart;
}
Same issue was happened to me. I resolved it using a setTimeout(function(){chart.update()},50) but your solution is more elegant.
Nice
Related
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: [{
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>
Hey I have only been javascript for a little bit but I am trying to get user input so that it can split up that number into 50% 30% and 20% which will also display the percentages in a chart using chart.js. Now I have tried many different ways which either result in no chart, no output of the numbers in the div elements, or just nothing at all. I assume it has to deal with scope issues on the perfifty variables being in the function but then getDocumentById is not retrieving them when they are global and I still can't get those variables to be part of the chart. Sorry if this is a simple fix I have just been on this for too many days and I still cant figure it out. Thank you.
function calculate(){
var user_input = document.getElementById("monthlyincome").value;
var percentages = {
perfifty: (50 / 100) * user_input,
perthirty: (30 / 100) * user_input,
pertwenty: (20 / 100) * user_input
};
document.getElementById("50%").innerHTML = percentages.perfifty;
document.getElementById("30%").innerHTML = percentages.perthirty;
document.getElementById("20%").innerHTML = percentages.pertwenty;
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '',
data: [percentages.perfifty, percentages.perthirty, percentages.pertwenty],
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: {
y: {
beginAtZero: true
}
}
}
});
I assume you call calculate when the user has given input and you create the chart outside of any function. This would mean you create the chart immediately when loading the script, when the user has not given any input yet. you want to create the chart inside calculate or if you want to see the canvas before user input, you can update the chart.
Here is an example:
function handleInput() {
let text = document.getElementById("uInput");
var num = Number(text.value);
if (isNaN(num)) {
alert("bad input!");
return;
}
var percentages = {
perfifty: (50 / 100) * num,
perthirty: (30 / 100) * num,
pertwenty: (20 / 100) * num
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '',
data: [percentages.perfifty, percentages.perthirty, percentages.pertwenty],
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: {
y: {
beginAtZero: true
}
}
}
});
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.5.1/dist/chart.min.js"></script>
<label for="uInput">Input:</label>
<input type="text" id="uInput">
<button onclick="handleInput()"> Submit </button>
<canvas id="myChart"></canvas>
I have a working chart.js on https://www.flottefeger.ch/charts.html
I am trying to add an on click event to my Line chart using Chart.js. two values I can alert to pop up.
But I need one more parameter. The ones which are in the label in the datasets.
It looks like that:
But now my question, how can I get which graph I have clicked?
I mean the value in the label?
In my example, it could be Timmy or Siri
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Timmy',
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
},
{
label: 'Siri',
data: [24, 38, 6, 10, 4, 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,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
}
}]
}
},
});
/* https://github.com/chartjs/Chart.js/issues/2292 */
document.getElementById("myChart").onclick = function(evt) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
alert(label + ": " + value);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<h1>chart.js, click on data demo</h1>
<canvas id="myChart"></canvas>
You can change your onclick function as follows:
document.getElementById("myChart").onclick = function(evt) {
const datasetIndex = myChart.getElementAtEvent(event)[0]._datasetIndex;
if (datasetIndex >= 0) {
...
alert(myChart.data.datasets[datasetIndex].label + '\n' + label + ": " + value);
}
};
Please take a look at your amended code and see how it works.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Timmy',
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
},
{
label: 'Siri',
data: [24, 38, 6, 10, 4, 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,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
}
}]
}
},
});
document.getElementById("myChart").onclick = function(evt) {
const datasetIndex = myChart.getElementAtEvent(event)[0]._datasetIndex;
if (datasetIndex >= 0) {
var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
var firstPoint = activePoints[0];
var label = myChart.data.labels[firstPoint._index];
var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
alert(myChart.data.datasets[datasetIndex].label + '\n' + label + ": " + value);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I made my first bar with Chart.js library.
My data looks nice, but I can't give my valuest some color.
enter image description here
My function looks like this:
var $barData =
{
type: 'bar',
labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
datasets:
[
{
label: 'Antal stemmer',
data: [
[$arrStemmer[0]],
[$arrStemmer[1]],
[$arrStemmer[2]],
[$Snit_Vaerdi]
],
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)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}
]
}
// Hent graf initialiserings setup
var $Stemmer = document.getElementById("can_afstemning_graf").getContext("2d");
// Tegn graf, men data fra barData objektet
new Chart($Stemmer).Bar($barData);
What am I missing?
I am looking here in the documentation and it look fine: https://www.chartjs.org/docs/latest/.
Thanks,
Nenad
You are setting the data incorrectly.
You should use
data: [
$arrStemmer[0],
$arrStemmer[1],
$arrStemmer[2],
$Snit_Vaerdi
],
Instead of
data: [
[$arrStemmer[0]],
[$arrStemmer[1]],
[$arrStemmer[2]],
[$Snit_Vaerdi]
],
This should work. if the $arrStemmer and $snit_Vaerdi are filled.
let $stemmer = document.getElementById('can_afstemning_graf').getContext('2d');
let myChart = new Chart($stemmer, {
type: 'bar',
data: {
labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
datasets: [{
label: 'Antal stemmer',
data: [
$arrStemmer[0],
$arrStemmer[1],
$arrStemmer[2],
$Snit_Vaerdi
],
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)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});