Develop Reference

Group Data by month and week according to count and filter in chart.js

I have the following data set and I am using chart.js
<script>
let chart = new Chart(mychart, {
type:'line',
data: {
datasets: [{
label: 'Issues',
fill: false,
backgroundColor: 'rgba(255,0,255,0.4)',
borderColor: 'rgba(255,0,255,0.4)',
data: [{
x: new Date(2018, 4, 1),
y: 20
}, {
x: new Date(2018, 10, 3),
y: 17
},{
x: new Date(2019, 0, 1),
y: 20
}, {
x: new Date(2019, 0, 3),
y: 17
},{
x: new Date(2019, 2, 7),
y: 17
}, {
x: new Date(2020, 1, 1),
y: 20
}, {
x: new Date(2020, 3, 3),
y: 17
}, {
x: new Date(2020, 4, 1),
y: 20
}, {
x: new Date(2020, 5, 3),
y: 17
}, {
x: new Date(2020, 7, 1),
y: 20
}, {
x: new Date(2020, 9, 3),
y: 17
}, {
x: new Date(2020, 10, 5),
y: 28
}, {
x: new Date(2020, 11, 4),
y: 11
}]
}],
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
unitStepSize: 1,
distributions: 'series',
displayFormats: {
'day': 'DD/MM/YYYY'
}
}
}]
}
}
})
The chart currently look like this:
What I want is whenever user selects the filter either month or week from the drop down the above data should be grouped accordingly to the count for week or month in the chart.
For example we have total 20 + 17 entries for January 2019 but they are coming as separate points what I want is it should be shown like 37 for January 2019.

Chart.js Dynamically Updating Chart with X Axis Time

I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:

as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>

mortgage calculator using highchart

I want to create a high chart as bankrate.com created
In it, I would like to show principal, balance and interest. It would be shown according to year.
I have tried to create it but I am unable to group years according to above example:
$(function () {
$('#container').highcharts(
{"chart":{"type":"area"},
"xAxis":{
"dateTimeLabelFormats":{"year":"%Y"},
"type":"datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
}
},
tickPositions: [
Date.UTC(2012, 02, 30),
Date.UTC(2015, 02, 30),
Date.UTC(2019, 02, 30),
Date.UTC(2019, 02, 1),
Date.UTC(2021, 06, 4),
Date.UTC(2021, 03, 7),
Date.UTC(2021, 07, 5),
]
},
"series":[
{
pointInterval: 24 * 3600 * 1000,
"data":[
{"x":Date.UTC(2012, 02, 30),"y":1998.0},{"x":Date.UTC(2019, 02, 30),"y":22417.0},{"x":Date.UTC(2015, 02, 30),"y":358.0},{"x":Date.UTC(2019, 02, 1),"y":358.0},
{"x":Date.UTC(2021, 06, 4),"y":1158.0},
{"x":Date.UTC(2021, 03, 7),"y":2258.0},
{"x":Date.UTC(2021, 07, 5),"y":45358.0}]}]}
);
});

I have corrected your code and made an example for you below. Your main issue was that you are formatting the tick positions to the same as your points. And since some of your points were very close together, the ticks would be on top of each other.
I have also taken the liberty to do some changes to your data so that it looks nicer.
In the example I made two series, and I changed the bar scaling to show 2010, 2020 and 2030 as per your example. This was done with the following code:
min: Date.UTC(2010, 01, 01),
max: Date.UTC(2030, 01, 01),
tickPositions: [
Date.UTC(2010, 01, 01),
Date.UTC(2020, 01, 01),
Date.UTC(2030, 01, 01)
]
That is, setting min and max so that the ticks are included, and specifying a tick per decade.
Full example here:
var chart = Highcharts.chart('container', {
chart: {
"type": "area"
},
xAxis: {
"dateTimeLabelFormats": {
"year": "%Y"
},
"type": "datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
}
},
min: Date.UTC(2010, 01, 01),
max: Date.UTC(2030, 01, 01),
tickPositions: [
Date.UTC(2010, 01, 01),
Date.UTC(2020, 01, 01),
Date.UTC(2030, 01, 01)
]
},
series: [{
name: 'Series1',
pointInterval: 24 * 3600 * 1000,
"data": [{
"x": Date.UTC(2012, 02, 30),
"y": 1998.0
}, {
"x": Date.UTC(2015, 02, 30),
"y": 358.0
}, {
"x": Date.UTC(2019, 02, 1),
"y": 358.0
}, {
"x": Date.UTC(2019, 02, 30),
"y": 22417.0
}, {
"x": Date.UTC(2021, 03, 7),
"y": 2258.0
}, {
"x": Date.UTC(2021, 06, 4),
"y": 1158.0
}, {
"x": Date.UTC(2025, 07, 5),
"y": 45358.0
}]
},
{
name: 'Series2',
pointInterval: 24 * 3600 * 1000,
"data": [{
"x": Date.UTC(2012, 02, 30),
"y": 5.0
}, {
"x": Date.UTC(2015, 02, 30),
"y": 2555.0
}, {
"x": Date.UTC(2019, 02, 1),
"y": 2777.0
}, {
"x": Date.UTC(2019, 02, 30),
"y": 26.0
}, {
"x": Date.UTC(2021, 03, 7),
"y": 25000.0
}, {
"x": Date.UTC(2021, 06, 4),
"y": 21000.0
}, {
"x": Date.UTC(2025, 07, 5),
"y": 30000.0
}]
}
]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

I have prepared a similar example to what is presented on a provided image. Hope it helps.
API Reference:
http://api.highcharts.com/highcharts/legend
Example:
http://jsfiddle.net/760qfdm0/

Highcharts 24 hours displayed on x axis

I would like to show 24 hour days going across the Highcharts chart with 1 hour intervals on the x axis and 7 days on the y axis.
How do I get the chart to start at midnight and run for 24 hours across?
As you can see below the chart is currently starting at 8:00am and going until 3:00pm. Instead we would like it to start at 12:00am and end at 11:59pm.
$('#graph').highcharts({
exporting: { enabled: false },
chart: {
type: 'columnrange',
inverted: true
},
title: {
text:''
},
yAxis: {
type: 'datetime',
tickAmount: 24,
tickInterval: 3600 * 1000,
minTickInterval: 3600 * 1000,
lineWidth: 1,
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
enabled: false
}
},
xAxis: {
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointWidth: 10,
}
},
series: [{
data: [
{
x: 0,
low: Date.UTC(2010, 1, 1, 9, 0, 0),
high: Date.UTC(2010, 1, 1, 12, 0, 0),
color: 'blue'
}, {
x: 0,
low: Date.UTC(2010, 1, 1, 12, 30, 0),
high: Date.UTC(2010, 1, 1, 14, 0, 0),
color: 'blue'
},
{
x: 1,
low: Date.UTC(2010, 1, 2, 9, 0, 0),
high: Date.UTC(2010, 1, 2, 12, 0, 0),
color: 'blue'
},
{
x: 2,
low: Date.UTC(2010, 1, 3, 9, 0, 0),
high: Date.UTC(2010, 1, 3, 12, 0, 0),
color: 'blue'
},
{
x: 3,
low: Date.UTC(2010, 1, 4, 9, 0, 0),
high: Date.UTC(2010, 1, 4, 12, 0, 0),
color: 'blue'
},
{
x: 4,
low: Date.UTC(2010, 1, 5, 9, 0, 0),
high: Date.UTC(2010, 1, 5, 12, 0, 0),
color: 'blue'
},
{
x: 5,
low: Date.UTC(2010, 1, 6, 9, 0, 0),
high: Date.UTC(2010, 1, 6, 12, 0, 0),
color: 'blue'
},
{
x: 6,
low: Date.UTC(2010, 1, 7, 9, 0, 0),
high: Date.UTC(2010, 1, 7, 12, 0, 0),
color: 'blue'
},
]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="graph"></div>
----------------EDIT----------------
I updated the data to replicate what we actually want. The output is working but "broken". We would like the graph to look like the picture.

You can use yAxis.min and yAxis.max for setting the min and max values of your axis. You can use tickPositioner for setting the positions of your labels on axis:
http://api.highcharts.com/highcharts/yAxis.tickPositioner
yAxis: {
min: Date.UTC(2010, 0, 1, 0, 0, 0),
max: Date.UTC(2010, 0, 2, 0, 0, 0),
type: 'datetime',
tickPositioner: function() {
var info = this.tickPositions.info;
var positions = [];
for (i = Date.UTC(2010, 0, 1, 0, 0, 0); i <= Date.UTC(2010, 0, 2, 0, 0, 0); i += 3600 * 1000) {
positions.push(i);
}
positions.info = info;
return positions;
},
lineWidth: 1,
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
enabled: false
}
},
Here you can see an example how it can work:
http://jsfiddle.net/1yccghgy/1/

How I can stick together the lines on the Highcharts timeline chart?

I creates the timeline Highchart like this jsfiddle.net
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Equipment Status'
},
scrollbar: {
enabled: true
},
xAxis: {
categories: ['Status']
},
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
}
},
plotOptions: {
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
}
},
series: [{
name: 'Producing',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 4, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 10, 0, 0),
high: Date.UTC(2013, 07, 03, 12, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 14, 0, 0),
high: Date.UTC(2013, 07, 03, 15, 0, 0)
}
]
}, {
name: 'Breakdown',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}]
}, {
name: "Changeover",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 1, 0, 0),
high: Date.UTC(2013, 07, 04, 5, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 10, 0, 0),
high: Date.UTC(2013, 07, 02, 23, 0, 0)
}, ]
}, {
name: "TrialRun",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 5, 0, 0),
high: Date.UTC(2013, 07, 04, 13, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 2, 0, 0),
high: Date.UTC(2013, 07, 02, 10, 0, 0)
}]
}]
});
});
As you can see, first part (with date range 2 August 02:00 - August 2 10:00 and has orange color) was placed directly before the second part (with date range 2 August 10:00 - August 2 23:00 and has green color). But between them we see a wite space. How I can remove this white space from chart, where dates are stuck together (like this: end of first part August 2 10:00, start of second part 2 August 10:00)

You don't need to do anything in CSS - that's overkill, and causes maintenance headaches.
Highcharts has options for this, and many other formatting issues.
In your case, just set the borderWidth to 0 in your plotOptions:
plotOptions: {
columnrange: {
borderWidth:0,
}
}
(and/or set borderColor: 'transparent')
Example:
http://jsfiddle.net/u3eWz/80/
Reference:
http://api.highcharts.com/highcharts#plotOptions.columnrange.borderWidth