I am trying to develop a stacked bar graph based on time series data. The data is representing the running of a machine logged to Influx.
Looking about I have not seen this done and cannot seem to get my data to line up correctly to make the stacked bar chart. Essentially I want to show one color for running and one for not running. This isn't an issue as this can be changed programmatically.
However, the issue I seem to be facing is possible more of a configuration issue. I would expect the time series adaptor to automatically align my data up with how it would correspond in my dataset.
See my example so far. To clarify, I am using the latest Chart.js at time of writing 3.7
const data = {
labels: ["Label 1"],
datasets: [{
label: "Testing",
data: [{
x: moment().valueOf(),
y: moment().valueOf()
}],
backgroundColor: "red"
},
{
label: "Testing",
data: [{
x: moment().add(1, 'day').valueOf(),
y: moment().add(1, 'day').valueOf()
}],
backgroundColor: "blue"
}]
};
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
x: {
ticks: {
beginAtZero: true
},
stacked: true,
type: 'time',
time: {
unit: 'day',
unitStepSize: 6
}
},
y: {
stacked: true
}
}
}
};
new Chart("myChart", config)<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
<canvas id="myChart"></canvas>Any point in the correct direction would be most beneficial. I will also answer any queries to clarify my though process on the config also.
The problem is that Date represents milliseconds since 1 January 1970 UTC. Therefore you need to define the start date to see only the period of interest. This can be done by adding the min option to the x-axis as follows:
min: moment().startOf('day').subtract(1, 'day')
You should also use
moment().startOf('day')when defining yourdata. That way, the ticks on the x-axis will be correctly positioned.
Please take a look at your amended code below and see how it works.
const data = {
datasets: [{
label: "Testing",
data: [{
x: moment().startOf('day'),
y: 0
}],
backgroundColor: "red"
},
{
label: "Testing",
data: [{
x: moment().startOf('day').add(1, 'day'),
y: 0
}],
backgroundColor: "blue"
}
]
};
const config = {
type: 'bar',
data,
options: {
plugins: {
tooltip: {
callbacks: {
title: () => ''
}
}
},
indexAxis: 'y',
scales: {
x: {
stacked: true,
type: 'time',
time: {
unit: 'day'
},
min: moment().startOf('day').subtract(1, 'day')
},
y: {
stacked: true
}
}
}
};
new Chart("myChart", config)<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
<canvas id="myChart" height="90"></canvas>