Related
With a duplicate value in the data labels - Is there a way to draw the bubble on the first or second duplicate value in the bubble chart?
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById("myChart");
var options = {responsive: true,
maintainAspectRatio: false,
};
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1", "2", "1", "4"], //Same Value on First and Third Position
datasets: [
//Lines
{
label: "First_Line",
type: "line",
borderColor: "#8e5ea2",
data: [5,10,7,12],
fill: false
}, {
label: "Second_Line",
type: "line",
borderColor: "#3e95cd",
data: [1,4,15,6],
fill: false
},
//Bubbles
{
label: "Bubble_One",
type: "bubble",
backgroundColor: "#8e5ea2",
data: [{ x: "2", y: 10, r: 15}],
},
{
label: "Bubble_Two",
type: "bubble",
backgroundColor: "#3e95cd",
backgroundColorHover: "#3e95cd",
data: [{x: ???, y: 6, r: 15}] //First "1" or Second "1" possible?
}
]
},
options: options
});
</script>
Something like "1"[0] unfortunately does not work.
You can not do it directly afaik but you can put an extra part in the label and filter it out of there with the callbacks for the tooltip and the axis:
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById("myChart");
var options = {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
offset: false,
ticks: {
callback: function(val) {
return this.getLabelForValue(val).split('-')[0]
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => {
if (ttItem.dataset.type === "bubble") {
return `${ttItem.label}: (${ttItem.raw.x.split('-')[0]},${ttItem.raw.y})`
} else if (ttItem.dataset.type === "line") {
return `${ttItem.dataset.label}: ${ttItem.parsed.y}`
}
},
title: (ttItem) => (ttItem[0].label.split('-')[0])
}
}
}
};
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1-1", "2", "1-2", "4"], //Same Value on First and Third Position
datasets: [
//Lines
{
label: "First_Line",
type: "line",
borderColor: "#8e5ea2",
data: [5, 10, 7, 12],
fill: false
}, {
label: "Second_Line",
type: "line",
borderColor: "#3e95cd",
data: [1, 4, 15, 6],
fill: false
},
//Bubbles
{
label: "Bubble_One",
type: "bubble",
backgroundColor: "#8e5ea2",
data: [{
x: "2",
y: 10,
r: 15
}],
},
{
label: "Bubble_Two",
type: "bubble",
backgroundColor: "#3e95cd",
backgroundColorHover: "#3e95cd",
data: [{
x: "1-2",
y: 6,
r: 15
}] //First "1" or Second "1" possible?
}
]
},
options: options
});
</script>
I have a chartjs line chart that has multiple lines like that;
I have been trying to add a date-time selector but I am not able to update my chart because I don't get how to reach the datas of my chart. Here is my chart decleration;
var ctx = document.getElementById('canvas');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time1, time2,
datasets: [
{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
},
{
label: 'Temperature - 2',
data: temp2,
backgroundColor: 'transparent',
borderColor: 'purple',
borderWidth: 3
},
{
label: 'Humidity - 1',
data: hum1,
backgroundColor: 'transparent',
borderColor: 'green',
borderWidth: 3
},
{
label: 'Humidity - 2',
data: hum2,
backgroundColor: 'transparent',
borderColor: 'yellow',
borderWidth: 3
}]
},
options: {
elements: {
line: {
tension: 0
}
},
scales: {
y: {
title: "Temperature/Humidity",
beginAtZero: true,
min: 10,
max: 60
}
}
}
});
time1, time2, temp1, temp2, hum1, hum2 are all array. When I want to update the chart using chart.update() function that I read at its own documentation, as I said I don't get it how to reach to data arrays like temp1, temp2.
Something like myChart.data.datasets.data would not work, making them like json;
{first_data:{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
}},
Doesn't work also, how can I reach to temp1 for example?
SOLUTION:
Because of my carelessness I had asked a nonsense question. Because of myChart.data.datasets is an object, I am able to reach to temp1 like myChart.data.datasets[0].data, sorry everyone
You will need to target the specific dataset you want to get the data from so to get the data of the Temperature - 1 dataset you will need to target it like this: myChart.data.datasets[0].data
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, options);
console.log(myChart.data.datasets[0].label)
console.log(myChart.data.datasets[0].data)
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
I am trying to display linechart from charts.js where it shows the pass,fail and skipped test case reults in graph. Here i have hardcoded the number of data in a dataset. I want to add the datapoints by iterating through the object.
Object looks like this
var temp = {"2020":[1,2,3],
"2021":[4,5,6]}
And my javascript function for line chart below.
function GetHealthReport(health,id) {
console.log(health);
var Date = Object.keys(health);
var ctxL = document.getElementById(id).getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: Date,
datasets: [
{
label:"Pass",
data: [health[Date[0]][0],health[Date[1]][0],health[Date[2]][0],health[Date[3]][0],health[Date[4]][0]],
backgroundColor: [
'rgba(71,193,28,0.71)'
]
},
{
label:"Failed",
data: [health[Date[0]][1],health[Date[1]][1],health[Date[2]][1],health[Date[3]][1],health[Date[4]][1]],
backgroundColor: [
'rgba(212,0,13,0.71)'
]
},
{
label:"Skipped",
data: [health[Date[0]][2],health[Date[1]][2],health[Date[2]][2],health[Date[3]][2],health[Date[4]][2]],
backgroundColor: [
'rgba(228,78,231,0.56)'
]
}
]
},
options: {
responsive: true
}
});
}
Given the data is available in the variable health, you can extract the labels through Object.keys() as follows.
labels: Object.keys(health),
The data of individual datasets can be extracted through Object.values(), followed by Array.map(). The data of the first dataset for example is defined as follows.
data: Object.values(health).map(v => v[0]),
Please have a look at your amended and runnable code below.
const health = {
"2020": [1, 2, 3],
"2021": [4, 5, 6]
}
var myLineChart = new Chart('myChart', {
type: 'line',
data: {
labels: Object.keys(health),
datasets: [{
label: "Pass",
data: Object.values(health).map(v => v[0]),
backgroundColor: 'rgba(71,193,28, 0.71)',
borderColor: 'rgb(71,193,28)',
fill: false
},
{
label: "Failed",
data: Object.values(health).map(v => v[1]),
backgroundColor: 'rgba(212,0,13,0.71)',
borderColor: 'rgb(212,0,13)',
fill: false
},
{
label: "Skipped",
data: Object.values(health).map(v => v[2]),
backgroundColor: 'rgba(228,78,231,0.56)',
borderColor: 'rgb(228,78,231)',
fill: false
}
]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
I was able to create a great radar chart with Chart js. My only problem is that the datasets attribute hoverBackgroundColor is not making any affect.
Here's my code:
chosen = [[5.2,0,1,9,11],[5.1,2,4,9,7],[5.1,2,2,9,8]]
playerNames= ['Henderson','Baldock','Stevens']
function createRadarComparison(chosen, playerNames) {
var ctx = document.getElementById('myChart').getContext('2d');
var borderColors = ['#ff82827d', '#82ff917d', '#fdff827d','#b882ff7d']
var colors = ['#ff828252', '#82ff8c52', '#fdff8252', '#b882ff52' ];
datasetdata = []
for (var i = 0; i < chosen.length; i++) {
datasetdata[i] = {
label: playerNames[i],
data: chosen[i],
backgroundColor: colors[i],
hoverBackgroundColor: colors[i],
borderColor: borderColors[i],
pointBorderColor: "#fff",
pointBackgroundColor: borderColors[i],
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
}
}
var config = {
type: 'radar',
data: {
labels: ['Price', 'Goals', 'Assits', 'Clean Sheets', 'Bonus'],
datasets: datasetdata
},
options: {
legend: {
position: 'top',
labels: {
"fontSize": 10,
}
},
scale: {
ticks: {
beginAtZero: true,
display: false
}
},
maintainAspectRatio: false,
}
};
var myChart = new Chart(ctx, config);
}
Here's the image of the chart
I am expecting the color of the whole dataset area to change on hover, but nothing changes. Appreciate your help
I following the example of Chart.js for a stacked colum graph
http://www.chartjs.org/samples/latest/charts/bar/stacked-group.html
But when I try to replicate for my graph... the stack parameter does not works.
I use the version 2.4.
Here is my code
var color = Chart.helpers.color;
var barChartData = {
labels: [1,2,3,4,5,6,7]<?php // echo ($asse) ?> ,
datasets: [
{
label: '2016',
backgroundColor: color('#FCB441').alpha(0.5).rgbString(),
borderColor: '#FCB441',
borderWidth: 1,
data: [2,4,6,8,10,12,14] ,
stack: 0,
},
{
label: '2017',
backgroundColor: color('#FF0000').alpha(0.5).rgbString(),
borderColor: '#FF0000',
borderWidth: 2,
data: [2,4,6,8,10,12,14] ,
stack: 0,
},
{
label: '3',
backgroundColor: color('#FFFF00').alpha(0.5).rgbString(),
borderColor: '#FFFF00',
borderWidth: 2,
data: [1,2,3,4,5,6,7] ,
stack: 1,
},
]
};
window.onload = function() {
var ctx = document.getElementById('Chart_<?php echo $this->id ?>').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
};
`});
Here is my graph:
My Graph
I still don't get it where's my mistake, it seems like the demo code.
Thanks in advice.
Phil