Highcharts: Dates Off By 1 Month - highcharts

I'm not sure what's going on, but dates are being displayed on the axis and in tooltips a month out. So the first date in data on this chart is in July but it shows up as in August and so on. Any ideas? I've put the code in a JSFiddle (http://jsfiddle.net/Z2VGL/1/) and also below:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: ''
},
plotOptions: {
series: {
lineWidth: 5,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
radius: 6,
lineColor: null // inherit from series
}
}
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Ability Score (out of 100)',
style: {
color: '#323A45',
fontWeight: 'bold'
}
},
min: 0
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b', this.x) + ': ' + this.y;
}
},
series: [{
name: 'Overall Ability',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2013, 07, 12), 50],
[Date.UTC(2013, 08, 13), 57.9474605576],
[Date.UTC(2013, 08, 14), 58.5667571154],
[Date.UTC(2013, 08, 15), 69.0590308869], ]
}, {
name: 'Target',
data: [
[Date.UTC(2013, 07, 12), 80],
[Date.UTC(2013, 08, 13), 80],
[Date.UTC(2013, 08, 14), 80],
[Date.UTC(2013, 08, 15), 80],
/*
[Date.UTC(2013, 0, 1), 80.0],
[Date.UTC(2013, 1, 1), 80.0],
[Date.UTC(2013, 2, 1), 80.0],
[Date.UTC(2013, 3, 1), 80.0],
[Date.UTC(2013, 4, 1), 80.0],
[Date.UTC(2013, 5, 1), 80.0],
[Date.UTC(2013, 6, 1), 80.0],
[Date.UTC(2013, 7, 1), 80.0]
*/
],
dashStyle: 'longdash',
marker: {
enabled: false
}
}]
});
});
Thanks in advance.


As you can see from this doc: Mozilla JS Reference Date UTC
month
An integer between 0 and 11 representing the month.

Related

Highchart Stock with combine scatter and column type series with Time format 24 hours. Not displaying 24 hours format its taking own x values

Here the bottom x axis not showing same as top x axis with each hour details when combine both line, scatter and column. Have code in JS Fiddle.
Please let me know how to resolve this issue i need to display each hour on bottom x axis.
You can see code in below link and Chart
Time Display format is not matching when combine multiple charts
Highcharts.stockChart('container', {
chart: {
animation: {
duration: 1000,
},
},
title: { text: 'Hourly Revenues for Today' },
navigator: {
xAxis: {
startOnTick: true,
endOnTick: true,
type: 'datetime',
tickAmount: 24,
tickInterval: 3600000,
min: 1656460800000,
max: 1656547199000,
}
},
xAxis: [
{
type: 'datetime',
tickAmount: 24,
tickInterval: 3600000,
startOnTick: true,
endOnTick: true,
minRange: Date.UTC(2022, 5, 29, 0, 0, 0),
maxRange: Date.UTC(2022, 5, 29, 23, 59, 59),
min: Date.UTC(2022, 5, 29, 0, 0, 0),
max: Date.UTC(2022, 5, 29, 23, 59, 59),
zoomEnabled: false
},
{
type: 'datetime',
tickAmount: 24,
tickInterval: 3600000,
minRange: Date.UTC(2022, 5, 29, 0, 0, 0),
maxRange: Date.UTC(2022, 5, 29, 23, 59, 59),
min: Date.UTC(2022, 5, 29, 0, 0, 0),
max: Date.UTC(2022, 5, 29, 23, 59, 59),
opposite: true
},
],
yAxis: {
min: 0,
title: {
text: 'Revenues in USD',
},
},
legend: {
enabled: false,
},
tooltip: {
pointFormat: 'Revenues today: <b>{point.y:,.0f} </b>',
},
credits: { enabled: false },
series: [
{
type: 'line',
name: 'Revenues today',
pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
color: 'red',
// pointWidth: 40,
data: [
{ x: Date.UTC(2022, 5, 29, 13, 4, 5), y: 23 },
{ x: Date.UTC(2022, 5, 29, 18, 4, 5), y: 20 },
],
},
{
type: 'column',
name: 'Revenues today',
getExtremesFromAll: true,
maxPointWidth: 10,
pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
// pointWidth: 40,
data: [
{ x: Date.UTC(2022, 5, 29, 22, 4, 5), y: 20 },
],
},
{
type: 'column',
name: 'Revenues today',
color: 'red',
// pointWidth: 40,
visible: false,
data: [
{ x: Date.UTC(2022, 5, 29, 0, 0, 0), y: 23 },
{ x: Date.UTC(2022, 5, 29, 23, 59, 59), y: 20 },
],
},
{
type: 'scatter',
name: 'Revenues today',
// pointWidth: 40,
data: [
{ x: Date.UTC(2022, 5, 29, 5, 4, 5), y: 23 },
{ x: Date.UTC(2022, 5, 29, 6, 4, 5), y: 20 },
],
},
],
plotOptions:{
series: {
pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
pointInterval: 3600 * 1000,
}
},
exporting: {
// we don't show the 'show data view' and 'edit in highmaps cloud' buttons
buttons: {
contextButton: {
menuItems: [
'viewFullscreen',
'printChart',
'separator',
'downloadPDF',
'downloadPNG',
'downloadJPEG',
'downloadSVG',
'separator',
'downloadXLS',
'downloadCSV',
],
},
},
},
});

The main concept for setting xAxis at the same value is to synchronize by method Highcharts.Axis#setExtremes.
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(
e.min,
e.max,
undefined,
false, {
trigger: 'syncExtremes'
}
);
}
if (chart.xAxis[1].setExtremes) { // It is null while updating
chart.xAxis[1].setExtremes(
e.min,
e.max,
undefined,
false, {
trigger: 'syncExtremes'
}
);
}
});
}
}
The next step is to fire the event handler for the axis xAxis.events.setExtremes and implement inside our syncExtremes function.
xAxis: [{
type: 'datetime',
events: {
setExtremes: syncExtremes
},
}, {
type: 'datetime',
events: {
setExtremes: syncExtremes
},
opposite: true
}],
Live demo:
https://jsfiddle.net/BlackLabel/dzvou1es/3/
API References:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/highcharts/xAxis.events.setExtremes

HIghcharts: Bubble are not showing up beyond scale

Here is the code I have added to plot the bubble chart
{
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
},
title: {
text: 'Highcharts bubbles with radial gradient fill',
},
xAxis: {
gridLineWidth: 1,
min: 0,
},
yAxis: {
min: 0,
max: 100,
},
plotOptions: {
series: {
maxSize: 20,
cursor: 'pointer',
stickyTracking: false,
},
bubble: {
dataLabels: {
enabled: true,
format: '{point.y:,.0f}%',
inside: false,
align: 'center',
x: 0,
y: -8,
style: {
textOutline: 0,
fontWeight: '400',
color: 'black',
},
},
marker: {
lineWidth: 0,
},
},
},
series: [
{
data: [
[42, 38, 500],
[6, 18, 1],
[0, 93, 505],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 187, 89],
[57, 191, 82],
[45, 15, 98],
],
},
],
}
There you might find 2 data points not showing up because y-axis range has been defined. I would also need those points to be rendered in the graph at boundary level (at 100). Is there any special property to set this (or) it is not working even if highcharts had default feature like that. Please help me with this.

You can preprocess your data to set y: 100 for values that are greater than 100 and save the original value to show it, for example in a tooltip:
var data = [
...
];
var processedData = data.map(el => ({
x: el[0],
y: el[1] > 100 ? 100 : el[1],
z: el[2],
realYVal: el[1]
}));
Highcharts.chart('container', {
...,
series: [{
data: processedData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/jx0o7e1d/

HighStock doesn't work with gapsize the same way

I have some data that was taken every minute. But there are irregular gaps in it. I'm using stockchart (v6.0.5) with the 'line' chart type and my xAxis is 'datetime'. I want that the gaps don't cut the xAxis in pieces but rather reflect the time that has passed as in http://jsfiddle.net/VwkHu/177/ .
I don't really want to fill in Null values in my dataset as the gaps can be large.
How can I get this behavior with stockchart?
BTW:
If I change in the upper mentioned fiddle to stock chart by adding StockChart the following way
...
$('#container').highcharts('StockChart',{
...
then the gaps don't reflect the size of the actual gap in the data but are constant or equal the gapsize.

Using highstock, you need to set ordinal: false to keep missing times in the chart.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Like this:
xAxis: {
ordinal: false,
...
},
$(function() {
$('#container').highcharts('StockChart',{
chart: {
type: 'line'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
ordinal: false
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
series: [{
name: 'Winter 2007-2008',
gapSize: 5,
//connectNulls: true,
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 27), 0],
[Date.UTC(1970, 10, 10), 0.6],
[Date.UTC(1970, 10, 18), 0.7],
[Date.UTC(1970, 11, 2), 0.8],
[Date.UTC(1970, 11, 9), 0.6],
[Date.UTC(1970, 11, 16), 0.6],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 10), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8],
[Date.UTC(1971, 4, 3), 2.1],
[Date.UTC(1971, 4, 26), 1.1],
[Date.UTC(1971, 11, 9), 0.25],
[Date.UTC(1971, 11, 12), 0]
]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Working JSFiddle example: http://jsfiddle.net/ewolden/VwkHu/183/

How to render custom Highstock Timeline with Highcharts

We use Higcharts/Highstocks. (great job!)
We need to render in one chart:
one or many timelines
the chart navigator
marking facts flags
maybe other curves
So we need to use Highstocks
You can see an adaptation of the best base we found here :
http://jsfiddle.net/g4KLk/100/
customrange are representing a duration in seconds
We need to display the navigator in order to be able to zoom on specifiq a timerange
In order to get customrange detailed seconds by seconds, we've had to render a point each second on the last line int the graph.
Any solution to get what we want without having to display a "seconds line" ?
And by the way, is there a solution in order to custom the color of each customrange ?
Regards !
The based JSFidle here :
// WGV chart demo
$(function() {
$.getJSON('//www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
var inputs = [{
name: 'Bookmark',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 1, 00),
to: Date.UTC(2013, 9, 27, 9, 1, 01)
}, {
from: Date.UTC(2013, 9, 27, 9, 20),
to: Date.UTC(2013, 9, 27, 9, 21)
}]
}, {
name: 'Mic 1',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 3, 00),
to: Date.UTC(2013, 9, 27, 9, 6, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 18, 00),
to: Date.UTC(2013, 9, 27, 9, 23, 00)
}]
}, {
name: 'Mic 2',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 3, 00),
to: Date.UTC(2013, 9, 27, 9, 9, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 16, 00),
to: Date.UTC(2013, 9, 27, 9, 18, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 42, 00),
to: Date.UTC(2013, 9, 27, 9, 44, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 49, 00),
to: Date.UTC(2013, 9, 27, 10, 05, 00)
}]
}, {
name: 'Lights',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00)
}]
}, {
name: 'Brakes',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00)
}]
}, {
name: 'Siren',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00)
}]
}];
// re-structure the tasks into line seriesvar status = [];
var status = [];
$.each(inputs.reverse(), function(i, input) {
var item = {
name: input.name,
data: []
};
$.each(input.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (input.intervals[j + 1]) {
item.data.push(
[(interval.to + input.intervals[j + 1].from) / 2, null]
);
}
});
status.push(item);
});
// split the data set into ohlc and volume
var volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// set the allowed units for data grouping
var groupingUnits = [
['millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
],
[
'second', [1, 2, 5, 10, 15, 30]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 4, 6, 8, 12]
],
[
'day', [1]
]
];
// create the chart
$('#container').highcharts('StockChart', {
chart: {
renderTo: 'container',
marginTop: 40
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false,
inputEnabled: false,
selected: 3,
buttons: [{
type: 'second',
count: 1,
text: '1s'
}, {
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'all',
text: 'All'
}]
},
navigator: {
adaptToUpdatedData: false,
// ^-- This should be false when loading data asynchronously,
// to prevent circular loading
margin: 5,
// maskInside: false,
series: {
lineWidth: 0,
marker: {
enabled: false
}
}
},
title: {
text: '' // title above chart
},
xAxis: {
type: 'datetime',
events: {
afterSetExtremes: function(e) {},
setExtremes: function(e) {
var min = e.min,
max = e.max;
$('#report').html('Start Time: ' + min + ',<br/> Stop Time: ' + max + ',<br/> e.trigger: ' + e.trigger);
}
},
plotBands: [{ // mark the weekend
color: '#222',
from: Date.UTC(2013, 9, 27, 9, 1, 00),
to: Date.UTC(2013, 9, 27, 9, 7, 00),
label: {
text: 'Missing Video',
style: {
color: '#888'
}
}
},
{ // mark the weekend
color: '#222',
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00),
label: {
text: 'Missing Video',
style: {
color: '#888'
}
}
}, ],
},
yAxis: [{
height: '60%',
opposite: false,
tickInterval: 1,
tickWidth: 0,
labels: {
formatter: function() {
if (inputs[this.value]) {
return inputs[this.value].name;
}
},
align: 'right',
x: -20,
y: 4
},
showLastLabel: true
}, {
height: '40%',
top: '60%',
opposite: false,
offset: 60,
lineWidth: 1,
tickWidth: 0,
labels: {
align: 'right',
formatter: function() {
return this.value + ' MPH';
},
x: 52,
y: 4
},
showLastLabel: true,
title: {
text: 'Speed',
align: 'middle',
opposite: false,
style: {
color: '#fff'
}
}
}],
plotOptions: {
series: {
states: {
hover: {
lineWidth: 2
}
}
},
line: {
linecap: 'square',
marker: {
enabled: true // shows markers for all graphs points
},
point: {
events: {
click: function() {
// let's show the data value of the selected point (on click)
$('#click-value').html(Highcharts.dateFormat('%m/%d/%Y at %H:%M:%S', this.x));
}
}
}
}
},
series: [{
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[0].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[1].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[2].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[3].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[4].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[5].data,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'GPS Speed',
data: [
[Date.UTC(2013, 9, 27, 9, 1, 00), 32],
[Date.UTC(2013, 9, 27, 9, 2, 33), 40],
[Date.UTC(2013, 9, 27, 9, 3, 00), 55],
[Date.UTC(2013, 9, 27, 9, 6, 00), 55],
[Date.UTC(2013, 9, 27, 9, 9, 00), 65],
[Date.UTC(2013, 9, 27, 9, 11, 00), 66],
[Date.UTC(2013, 9, 27, 9, 14, 00), 67],
[Date.UTC(2013, 9, 27, 9, 16, 00), 71],
[Date.UTC(2013, 9, 27, 9, 18, 00), 78],
[Date.UTC(2013, 9, 27, 9, 20, 00), 81],
[Date.UTC(2013, 9, 27, 9, 23, 00), 83],
[Date.UTC(2013, 9, 27, 9, 30, 00), 85],
[Date.UTC(2013, 9, 27, 9, 35, 00), 85],
[Date.UTC(2013, 9, 27, 9, 38, 00), 92],
[Date.UTC(2013, 9, 27, 9, 42, 00), 90],
[Date.UTC(2013, 9, 27, 9, 44, 00), 88],
[Date.UTC(2013, 9, 27, 9, 46, 00), 87],
[Date.UTC(2013, 9, 27, 9, 49, 00), 85],
[Date.UTC(2013, 9, 27, 9, 50, 00), 80],
[Date.UTC(2013, 9, 27, 9, 53, 00), 75],
[Date.UTC(2013, 9, 27, 9, 55, 00), 70],
[Date.UTC(2013, 9, 27, 10, 02, 00), 65],
[Date.UTC(2013, 9, 27, 10, 04, 00), 60],
[Date.UTC(2013, 9, 27, 10, 05, 00), 40],
[Date.UTC(2013, 9, 27, 10, 08, 00), 35]
],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'Patrol Speed',
data: [
[Date.UTC(2013, 9, 27, 9, 1, 00), 30],
[Date.UTC(2013, 9, 27, 9, 2, 33), 33],
[Date.UTC(2013, 9, 27, 9, 3, 00), 37],
[Date.UTC(2013, 9, 27, 9, 6, 00), 40],
[Date.UTC(2013, 9, 27, 9, 9, 00), 48],
[Date.UTC(2013, 9, 27, 9, 11, 00), 52],
[Date.UTC(2013, 9, 27, 9, 14, 00), 55],
[Date.UTC(2013, 9, 27, 9, 16, 00), 60],
[Date.UTC(2013, 9, 27, 9, 18, 00), 66],
[Date.UTC(2013, 9, 27, 9, 20, 00), 68],
[Date.UTC(2013, 9, 27, 9, 23, 00), 80],
[Date.UTC(2013, 9, 27, 9, 30, 00), 88],
[Date.UTC(2013, 9, 27, 9, 35, 00), 90],
[Date.UTC(2013, 9, 27, 9, 38, 00), 80],
[Date.UTC(2013, 9, 27, 9, 42, 00), 75],
[Date.UTC(2013, 9, 27, 9, 44, 00), 63],
[Date.UTC(2013, 9, 27, 9, 50, 00), 46],
[Date.UTC(2013, 9, 27, 9, 55, 00), 35],
[Date.UTC(2013, 9, 27, 10, 08, 00), 28]
],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
$("#slider").slider({
value: 0,
min: Date.UTC(2013, 9, 27, 9, 1, 00),
max: Date.UTC(2013, 9, 27, 10, 08, 00),
step: 0.0001,
slide: function(event, ui) {
//$("#slider1").slider("value", ui.value);
$("#slider-value").html(ui.value);
}
}).find('.ui-slider-handle').append('<div class="line"></div>');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 10px;
background: #323334
}
p {
font-family: Helvetica, Arial;
color: #aaa;
font-size: 14px;
}
a, a:visited, a:hover {
color: #FFDD45;
text-decoration: underline;
outline: none;
}
#container {
min-height: 400px;
min-width: 310px;
position: relative;
z-index: 1;
}
.ui-slider {
margin: 0 22px 0 110px;
}
.ui-slider .ui-slider-handle {
background: url('https://revivemarketing.github.io/images/playhead_top.png') no-repeat 50% 50% !important;
border: none !important;
width: 18px !important;
height: 20px !important;
margin-left: -.75em;
cursor: pointer;
outline: none;
}
#slider.ui-slider .ui-slider-handle {
background: url('https://revivemarketing.github.io/images/playhead_bottom.png') no-repeat 50% 50% !important;
}
.ui-slider {
position: relative;
text-align: left;
background: #6F7073 !important;
border-color: #303030 !important;
border-left: none;
border-right: none;
box-shadow: 0px 1px 1px 0px #000 inset !important;
height: .75em;
border-radius: 0;
}
.line {
width: 2px;
background: #FF2600;
border-left: #9A0900 1px solid;
bottom: 15px;
left: 8px;
height: 68px;
z-index: 100;
position: absolute;
pointer-events: none;
box-shadow: 1px 0 0 0 #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://revivemarketing.github.io/js/highcharts-dark.js"></script>
<div id="container"></div>
<div id="slider"></div>
<p id="slider-value"></p>
<p id="click-value"></p>
<p id="report"></p>

Highcharts Bug. Why does heatmap on highcharts doesn't render correctly the rectangles if not all coordinates are provided?

As it is written in the Title i try to render a heatmap charts using highcharts.
I added a click event to change the color of one point when it is clicked.
But not all coordinates have data. As a result the points are not rendering correctly.
if i try to click the top left rectangle from the datalabel and below the wrong point is being colored.
Is this a bug?
Do i have to provide the whole set of coordinates in my data?
Here is a fiddle example of my problem
error example
(this doesn t apply to all scenarios where you don't the whole set of coordinates in your data. for example this works working example)
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
plotOptions: {
heatmap: {
cursor: 'pointer',
allowPointSelect: true,
events: {
click: function (event) {
if (event.point.shapeArgs && event.point.shapeArgs.fill == 'red') {
event.point.update({
color: null,
})
} else {
event.point.update({
color: 'red',
})
}
}
},
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 4, 67], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});});

Resources