Using Chart.js 2.7.2, I'm updating a single dataset when a table is filtered to graph the data displayed in the filtered table in the following chart:
volumeChart = new Chart(volume, {
type: 'bar',
data: {
labels: labelList,
datasets: [{
label: 'Data',
data: volumeDataSet
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
type: 'time',
ticks: {
source: 'labels',
beginAtZero: false
},
bounds: 'labels',
time: {
unit: 'day'
},
gridLines: {
display: false
},
categoryPercentage: 0.5,
barPercentage: 0.5,
offset: true
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
The data updates fine, but the displayed bars have different widths and spacing depending on the dataset.
Here is how the chart displays when the data is not filtered
Here is how it displays when it is filtered
All I am doing upon filtering is creating a new array of data from the filtered results, and replacing the dataset like so:
volumeChart.data.datasets[0].data = volumeDataSet;
Then updating the chart like so:
volumeChart.update();
Related
I am trying to make a bar chart from a JSON dictionary, but it doesn't work.
Here's my code:
new Chart("log", {
type: "bar",
data: {
labels: Object.keys(log),
datasets: [{
backgroundColor: barColors,
data: [ Object.values(log)]
}]
},
options: {
legend: {display: false},
title: {
display: true,
text: "Historial de logueo"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor:"#8f9092",
}
}]
}
}
});
log is a dictionary like this: {'somedate':somenumber}
I want 'log' keys to be x and values to be y. It shows the key as x value, but no graph. However, if i put "Object.values(log)[0]" in data, it works. Obviously, it only works as long as there is 1 value.
I am trying to load annotation the dynamic chart that I create after receiving data from the database and I have tried all possible options but somehow the chart loads but no the annotations.
chart.js version = v2.9.4
chart-plugin-annotation.min.js version = 0.5.7
Function in JS that runs when data is receiving from db:
function DrawChart(timeLabelList, unitsProducedList, goalList){
if(draw_the_chart != null) draw_the_chart.destroy();
Chart.defaults.global.defaultFontColor = 'white';
var ctx = document.getElementById('draw_the_chart').getContext("2d");
draw_the_chart = new Chart(ctx, {
type: 'line',
//plugins: [ChartAnnotation],
data: {
labels: timeLabelList,
datasets: [
{
label: 'Goal',
yAxisID: 'A',
data: goalList,
//backgroundColor: chartColumnColorBlueSolid,
borderColor: chartColumnColorGreenSolid,
borderWidth: 2,
pointStyle: 'star'
}]
},
options: {
annotation: {
annotations: [
{
id: "a-line-1",
type: "line",
mode: "vertical",
scaleID: "y-axis-0",
value: "1",
borderColor: "red",
borderWidth: 2
}
]
},
legend: {
position: 'bottom',
display: true,
},
elements: {
line: {
tension: 0
}
},
scales: {
xAxes: [{
stacked: true,
type: 'time',
time: {
unit: 'hour'
},
}],
yAxes: [{
stacked: false,
id: 'A',
type: 'linear',
position: 'right',
}]
},
}
});
}
I tried all possible ways to register and also different ways to used the plugin but had no luck plotting it. I even used latest CDN versions but had no luck.
Can anyone help with it.
Thanks!
I'm currently attempting to use Chart.JS to create a line graph, displaying brightness percentages (0-100%) of an LED over 24H.
I'm trying to configure the chart to have set X and Y axis scales.
I need the X axis to display every hour (0,1,2,3... 21,22,23,24), and the Y axis to display values up to 100, going up by 10 (0,10,20... 90,100). I'm unsure how to get it to work. So far I've tried "unitStepSize: 1" and "min: 00:00" + "max: 24:00" as below, but these do not work in the way I had hoped. How can I get this graph to display correctly? Here's my code:
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'White',
data: data,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: "H:mm",
unit: 'hour',
unitStepSize: '1',
tooltipFormat: "H:mm A",
displayFormats: {
hour: 'H',
min: '00:00',
max: '24:00',
}
}
}]
},
}
});```
under options / scale try something like this: --> see yAxes
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
...
}
When plotting a time scatter plot by category (x-axis = time, y-axis = category) the points at the top and the bottom of the graph get cut in half:
Is there are way to solve this problem?
I use ChartJS with Angular 6 and the ng2-charts wrapper. This is my Options Object:
public scatterChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
min: this.minDate.toISOString(),
max: this.maxDate.toISOString()
},
display: true,
ticks:{
padding: 50
}
}],
yAxes: [{
display: true,
type: 'category',
gridLines: {
display:true,
},
}],
}
};
[UPDATE] The question seems to be solved (see comments). I will update the answer as soon as i am sure about it
I am trying to achieve a weather chart using chartjs library.
The chart will always have the weather date of the first day of the month and in addition to that one value in between (makes 24 values).
I want all "first day of the month" labels to be shown (with the corresponding gridline), the other data point in between should not be shown (or at least with no gridline).
The Problem now, somehow the last (12th) label is not gonna be shown and I have no idea why. The result looks like that:
My javascript code is that
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
"01","","02","","03","","04", "","05","","06","","07","","08","","09","","10","","11", "","12",""
],
datasets: [{
label: 'Temperature [°C]',
data: [
1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6
],
borderColor: "rgb(0, 182, 206)",
pointRadius: 1,
backgroundColor: "rgba(0, 182, 206,0.4)"
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display:false // Suppress interactive legend
},
scales: {
xAxes: [{
scaleLabel: {
display: false,
labelString: 'Month'
} ,
afterTickToLabelConversion: function(data){
var xLabels = data.ticks;
xLabels.forEach(function (labels, i) {
if (xLabels[i].length == 0){
xLabels[i] = '';
}
});
},
ticks: {
//maxRotation: 0,
//minRotation: 0,
autoSkip: true,
maxTicksLimit: 12
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature [°C]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
Do you have some ideas?