I want to plot my temperature readings of my DIY thermostat and the heater-state using Chart.js. The heater-state is 0 or 1, but I saved it in a minimal representation: I have values only, when it comes on/off. The heating times are never equal to the measurement times, but in between.
I want to plot time-data on the same time x-axis. From at least 20 examples, questions here and other resources I collected this Fiddle, which is my best guess. However, I can't reasonably plot both time axes and their data. If I reduce it to numerical data on the x axis in a very much simplified example, I get the smaller dataset plotted on the first few x-values of the latter one.
The js code is:
var options = {
type: 'line',
data: {
labels: ["2018-12-07 08:45:17",
"2018-12-07 09:30:17", "2018-12-07 10:15:16",
"2018-12-07 11:00:17", "2018-12-07 14:45:16"],
datasets: [
{
label: '1st line',
data: [12, 19, 7, 9, 10, 8],
},
{
steppedLine: 'before',
xAxisID: 'x-axis-2',
label: '2nd line',
data: [
{
x: "2018-12-07 09:15:47",
y: 3
}, {
x: "2018-12-07 10:55:25",
y: 5
}, {
x: "2018-12-07 13:05:00",
y: 3
}],
}
]
},
options: {
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
//display: false,
}],
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
First, you could use a unique xAxis and define it as a time cartesian axis.
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
Also you shouldn't provide data.labels but rather define each data point using an object containing x and y properties.
var options = {
type: 'line',
data: {
datasets: [{
label: '1st line',
data: [{
x: "2018-12-07 08:45:17",
y: 12
},
{
x: "2018-12-07 09:30:17",
y: 19
},
{
x: "2018-12-07 10:15:16",
y: 7
},
{
x: "2018-12-07 11:00:17",
y: 9
},
{
x: "2018-12-07 14:45:16",
y: 10
}
]
},
{
label: '2nd line',
steppedLine: 'before',
data: [{
x: "2018-12-07 09:15:47",
y: 3
},
{
x: "2018-12-07 10:55:25",
y: 5
},
{
x: "2018-12-07 13:05:00",
y: 3
}
],
backgroundColor: 'lightgreen'
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chartJSContainer" height="90"></canvas>
I was finally able to figure out the problem which was the datastructure of the javaScript object. It requires this structure [{ "x": 1, "y":1}, {"x":2, "y":3} ] where in particular the x and y are the object properties x and y for each entry, rather than once and for all (which always made a lot more sense to me). But I can send the data without this extra labels and convert them on the fly with javascript like so:
datasets: [
{
label: 'Temperature',
data: response.temperature.x.map((x, i) => ({ x, y: response.temperature.y[i] })),
},
{
label: 'Room 2 Temperature',
data: response.temp2.x.map((x, i) => ({ x, y: response.temp2.y[i] })),
},
] // datasets
Related
I've got a Gantt chart:
And I want to use the series.gantt.custom object to set specific properties for each series on the yAxis.
From these properties I want to construct the yAxis labels.
My code:
Highcharts.ganttChart('container', {
yAxis: {
categories: ['1', '2'],
labels: {
formatter() {
return this.value
/* + this.chart.series[this.pos].custom.size */
},
}
},
series: [{
groupPadding: 1,
custom: {
size: "small",
},
type: 'line',
zoneAxis: 'x',
data: [{
y: 0,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1,
}
}, {
y: 0,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}, {
type: 'line',
zoneAxis: 'x',
custom: {
size: "large",
},
data: [{
y: 1,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1
}
}, {
y: 1,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}]
});
this.chart.series[this.pos].custom.size it's the bit that is not working.
The labels should be 1 small and 2 large.
A fiddle
You can reach this property through the series.options:
this.chart.series[this.pos].options.custom.size
Demo:
https://jsfiddle.net/BlackLabel/gLkn9uqf/
I am trying to make a line chart by using chart.js. But I facing a problem. I want to control the space between points, but the chart.js makes it equal.
Here is my code:
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" integrity="sha512-OD9Gn6cAUQezuljS6411uRFr84pkrCtw23Hl5TYzmGyD0YcunJIPSBDzrV8EeCiFxGWWvtJOfVo5pOgB++Jsag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var ctx = document.getElementById("myChart");
var points = [1,1,9,9.3];
var Dates = ["Dec 29th", "jan 10th", "Feb 21st", "Feb 25th"];
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: Dates,
datasets: [
{
label: "My chart",
data: points,
backgroundColor: "black",
borderColor: "blue",
borderWidth: 3,
fill: false,
lineTension: 0.4,
}
]
},
options: {
legend: {display: false},
scales: {
yAxes:[{
ticks: {
min:1,
max: 9.9,
callback: function(value, index, values) {
return '$' + value;
}
}
}],
},
elements: {
point:{
radius: 0
}
}
}
});
</script>
Here is the result of my code:
But I want the big space in middle like this:
How can I make the big space between point 3 and point4, please?
Can you use time on the x axis?
Below is an example
// "+" before (new Date(2021,11,29)) return miliseconds from 1970 year
const dataA = [
{x:+new Date(2021,11,29), y:1}, // { x: 1640732400000, y: 1},
{x:+new Date(2022,0,10), y:1}, // { x: 1641769200000, y: 1},
{x:+new Date(2022,1,21), y:9}, // { x: 1645398000000, y: 9},
{x:+new Date(2022,1,25), y:9.3}, // { x: 1645743600000, y: 9.3}
];
const cfgChart = {
type: 'line',
data: {
datasets: [
{
backgroundColor: '#74adf7',
borderColor: '#74adf7',
data: dataA,
label: 'A',
lineTension: 0.4,
},
],
},
options: {
animation: false,
parsing: false,
interaction: {
mode: 'index',
axis: 'x',
intersect: false,
},
scales: {
x: {
type: 'time',
},
},
},
};
const chart = new Chart(document.querySelector('#chart').getContext('2d'), cfgChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="chart"></canvas>
</div>
I have 2 set of datasets I want to display in single line chart for last 7 days, and if possible only show single Y axis with max value from all data sets. I try to use time as xAxes but it is not showing up.
here is my code https://jsfiddle.net/e6trkxL0/
You have to place the labels for datapoints.
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
let chart = new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
labels: [],
datasets: [{
label: 'Dataset 1',
data: [1, 4, 66, 7, 12, 3, 8],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [31, 14, 6, 71, 1, 35, 9],
borderColor: '#880000',
backgroundColor: '#880000',
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
stacked: false,
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
xAxes: [{
type: "time",
// this is not doing much
// time: {
// min: start,
// max: end,
// unit: "day"
//}
}]
}
}
});
chart.render();
for (let i = 0; i < 7; i++) {
var labelDate = start;
labelDate.setDate(start.getDate() + 1);
chart.data.labels.push(labelDate.toLocaleString())
}
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="lastSevenDaysOverview"></canvas>
2 things, for a time axis in chart.js you need according to the documentation a time adapter. Also you defined you x axis scales as a array which is incorrect. You need to define all scales as an object where the key of the object is the scale ID, you can read more about it in the migration guide
For points to be mapped in the chart you also need to provide a x place which in this case needs to be the date for which the datapoint is valid.
To just show a single axis with the highest values you can let both datasets be mapped to the same y axis:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-14-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
min: start,
max: end,
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
I am trying to plot some data as a scatter plot using Chart.js. I tryed almost everything on the internet and I am still getting the x-axis as shown in the screenshot below. The date format is an interger and I need it a date.
EDIT:
I also find out, when I omit the square brackets for the axis properties, which is teh way described in the documentations, I am getting an error (Uncaught Error: This method is not implemented: Check that a complete date adapter is provided. ). When I used the square brackets for the axis, the properties are not recognised.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
The result I am getting is:
You can use a callback function to alter how the data on the axis is displayed.
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
callback: function(value, index, values){
// do something with value
return value;
}
}
}],
},
};
I found out, where the problem was:
I needed to reference an adaptor for the moment like this and remove the the square brackets for the properties of the axis as shown in the documetnation:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#0.1.2"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: {ticks: {min: 0}},
xAxes: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
},
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
I'm using the Echarts library. For some reason, the legend isn't appearing in this simple chart using dataset and dimensions.
I've been stuck for quite a long time, have tried all kinds of examples but to no avail. Please help!
JS fiddle: https://jsfiddle.net/jcgqfns8/
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
dataset: [{
source: [
['Test1', 10],
['Test2', 20]
],
dimensions: ['Category', 'Value']
},
{
source: [
['Test1', 15],
['Test2', 25]
],
dimensions: ['Category', 'Value2']
}],
xAxis: [{ type: 'category' }, { type: 'category' }],
yAxis: [{ position: 'left' }, { position: 'right' }],
series: [
{
type: 'line',
encode: {
x: 'Category',
y: 'Value'
},
datasetIndex: 0,
yAxisIndex: 0
},
{
type: 'line',
encode: {
x: 'Category',
y: 'Value2'
},
datasetIndex: 1,
yAxisIndex: 1
}
],
color: ["#c22e34", "#e7b603", "#0097da", "#2b821e", "#035daa", "#339ca8"]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
You need to add legend to the option object. and give names to series objects.
var option = {
dataset: [{
source: [
['Test1', 10],
['Test2', 20]
],
dimensions: ['Category', 'Value']
},
{
source: [
['Test1', 15],
['Test2', 25]
],
dimensions: ['Category', 'Value2']
}],
legend: {}, //need this to show legend
xAxis: [{ type: 'category' }, { type: 'category' }],
yAxis: [{ position: 'left' }, { position: 'right' }],
series: [
{
name: 'legend1', //give a name to series
type: 'line',
encode: {
x: 'Category',
y: 'Value'
},
datasetIndex: 0,
yAxisIndex: 0
},
{
type: 'line',
name: 'legend2',
encode: {
x: 'Category',
y: 'Value2'
},
datasetIndex: 1,
yAxisIndex: 1
}
],
color: ["#c22e34", "#e7b603", "#0097da", "#2b821e", "#035daa", "#339ca8"]
};
jsfiddle