Develop Reference

How can I create a line chart containing the overlapping data of 2 years?

If I fill in my data in this format:
series: [{
name: "2020",
data: dataForThisYear
}, {
name: "2019",
data: dataForLastYear
}],
with type datetime, I get 2 separate line charts side by side, as it is ordered by time of course. How can I get the two lines to overlap, to see data for both years in comparison?
The whole code:
var options = {
chart: {
type: "line",
fontFamily: 'inherit',
height: 40.0,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
dataLabels: {
enable: true,
position: 'bottom'
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series: [{
name: "2020",
data: dataForThisYear
}, {
name: "2019",
data: dataForLastYear
}],
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
padding: 0
},
tooltip: {
enabled: false
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
colors: ["#206bc4", "#a8aeb7"],
legend: {
show: false,
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Here is an example wherein the timestamp for the overlaid lines is the elapsed from start of year.
// make some sample data
function randomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var
results_2019 = []
, results_2020 = []
;
a_date_in_2019 = new Date(2019,0); limit_2019 = new Date(2020,0);
a_date_in_2020 = new Date(2020,0); limit_2020 = new Date(2021,0);
y_2019 = 10;
y_2020 = 20;
for (var index=0; a_date_in_2019 < limit_2019 && a_date_in_2020 < limit_2020 && index < 1000; index++) {
if (a_date_in_2019 < limit_2019) results_2019[index] = { x: a_date_in_2019, y: y_2019 };
if (a_date_in_2020 < limit_2020) results_2020[index] = { x: a_date_in_2020, y: y_2020 };
y_2019 += randomInt(5) / 2 - 1;
y_2020 += randomInt(5) / 2 - 1.5;
// add 3 days and a random number of days
next_date = new Date();
next_date.setTime(a_date_in_2019.getTime() + 1000*60*60*24*(3 + randomInt(3)));
a_date_in_2019 = next_date;
next_date = new Date();
next_date.setTime(a_date_in_2020.getTime() + 1000*60*60*24*(3 + randomInt(3)));
a_date_in_2020 = next_date;
}
// chart the sample data
var options = {
chart: {
type: "line",
fontFamily: 'inherit',
height: 300,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
dataLabels: {
enable: true,
position: 'bottom'
},
fill: {
opacity: 1,
},
stroke: {
width: [2, 1],
dashArray: [0, 3],
lineCap: "round",
curve: "smooth",
},
series:
[{
name: "2019",
data: results_2019
}
,{
name: "2020",
data: results_2020
}],
grid: {
strokeDashArray: 4,
},
xaxis: {
lines: {
show: false,
},
labels: {
padding: 0
},
tooltip: {
enabled: false
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
colors: ["#206bc4", "#a8aeb7"],
legend: {
show: true,
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
var elapsed_2019 = [];
var elapsed_2020 = [];
var base_2019 = new Date(2019,0);
var base_2020 = new Date(2020,0);
for (const result of results_2019) { elapsed_2019.push( { x:new Date(result.x - base_2019), y:result.y }) }
for (const result of results_2020) { elapsed_2020.push( { x:new Date(result.x - base_2020), y:result.y }) }
let options2 = JSON.parse(JSON.stringify(options))
options2.series[0].data = elapsed_2019;
options2.series[1].data = elapsed_2020;
var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
chart.render();
chart2.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts?.js"></script>
<div id="chart"></div>
<div id="chart2"></div>

Highcharts Column Chart - pointRange causes extra space to the right

I need to display two sets of data on an existing Highcharts column chart in my codebase. The current chart represents a 24 timespan with millisecond units.
For one dataset each value spans an hour while for the other dataset the value spans 6 minutes. I am able to show these values on Highcharts, and even use pointRange to have the data span the proper width of the chart but then there is a gap with no data to the right of the chart. This ruins the formatting in context of the rest of the application.
Is there a way to avoid this extra spacing? If I remove pointRange, the extra spacing is gone on the right but the bars do not fill the area like I want them to.
Here are jsfiddles for each case:
with pointRange: https://jsfiddle.net/eh5fgcw6/62/
const MIN_ZOOM_IN_MS = 3600 * 1000 * 4;
const MS_IN_ONE_DAY = 86400000;
const size = 'LARGE';
const COLORS = {
'black': '#000000',
'gray_1': '#222222',
'gray_2': '#7A7A7A',
'gray_3': '#888888',
'gray_4': '#B2B2B2',
'gray_5': '#CBCBCB',
'gray_6': '#E6E6E6',
'gray_7': '#EEEEEE',
'gray_8': '#F9F9F9',
'gray_9': '#FAFAFA',
'blue_1': '#3397ed',
'blue_2': '#11a9ed',
'blue_3': '#70CAFF',
'blue_4': '#0e334c',
'blue_5': '#b0e1f7',
'blue_6': '#beeffF',
'blue_7': '#0e334c',
'blue_8': '#8CD3FA',
'blue_9': '#73D4FF',
'green_1': '#9AF144',
'green_2': '#76FFE5',
'green_3': '#72ea24',
'green_4': '#50b012',
'green_5': '#B6D56B',
'orange_1': '#E9AE00',
'orange_2': '#FED7A5',
'red_1': '#F02751',
'red_2': '#FF0035'
};
const parseISOUTC = function(value) {
return moment(value).toDate();
}
const mergedSummary = {
startTimeGmt: "2018-07-09T21:00:00.0"
};
const myChartData = {"valuesArray":[[1531170000000,78],[1531231200000,84],[1531238400000,88],[1531242000000,96],[1531249200000,93],[1531252800000,92]],"monitoringEnvironmentValueDescriptorList":[{"monEnvValueDescIndex":0,"monEnvValueDescKey":"timestamp"},{"monEnvValueDescIndex":1,"monEnvValueDescKey":"monitoringEnvironmentLevel"}],"monitoringEnvironmentValuesArray":[[1531170000000,353.0],[1531170360000,353.0],[1531170720000,353.0],[1531171080000,353.0],[1531171440000,353.0],[1531171800000,353.0],[1531172160000,353.0],[1531172520000,353.0],[1531172880000,353.0],[1531173240000,353.0],[1531173600000,353.0],[1531173960000,353.0],[1531174320000,353.0],[1531174680000,353.0],[1531175040000,353.0],[1531175400000,353.0],[1531175760000,353.0],[1531176120000,353.0],[1531176480000,353.0],[1531176840000,353.0],[1531177200000,353.0],[1531177560000,353.0],[1531177920000,353.0],[1531178280000,353.0],[1531178640000,353.0],[1531179000000,353.0],[1531179360000,353.0],[1531179720000,353.0],[1531180080000,353.0],[1531180440000,353.0],[1531180800000,353.0],[1531181160000,353.0],[1531181520000,353.0],[1531181880000,353.0],[1531182240000,353.0],[1531182600000,353.0],[1531182960000,353.0],[1531183320000,353.0],[1531183680000,353.0],[1531184040000,353.0],[1531184400000,353.0],[1531184760000,353.0],[1531185120000,353.0],[1531185480000,353.0],[1531185840000,353.0],[1531186200000,353.0],[1531186560000,353.0],[1531186920000,353.0],[1531187280000,353.0],[1531187640000,353.0],[1531188000000,353.0],[1531188360000,353.0],[1531188720000,353.0],[1531189080000,353.0],[1531189440000,353.0],[1531189800000,353.0],[1531190160000,353.0],[1531190520000,353.0],[1531190880000,353.0],[1531191240000,353.0],[1531191600000,353.0],[1531191960000,353.0],[1531192320000,353.0],[1531192680000,353.0],[1531193040000,353.0],[1531193400000,353.0],[1531193760000,353.0],[1531194120000,353.0],[1531194480000,353.0],[1531194840000,353.0],[1531195200000,353.0],[1531195560000,353.0],[1531195920000,353.0],[1531196280000,353.0],[1531196640000,353.0],[1531197000000,353.0],[1531197360000,353.0],[1531197720000,353.0],[1531198080000,353.0],[1531198440000,353.0],[1531198800000,353.0],[1531199160000,353.0],[1531199520000,353.0],[1531199880000,353.0],[1531200240000,353.0],[1531200600000,353.0],[1531200960000,353.0],[1531201320000,353.0],[1531201680000,353.0],[1531202040000,353.0],[1531202400000,353.0],[1531202760000,353.0],[1531203120000,353.0],[1531203480000,353.0],[1531203840000,353.0],[1531204200000,353.0],[1531204560000,353.0],[1531204920000,322.0],[1531205280000,307.0],[1531205640000,307.0],[1531206000000,307.0],[1531206360000,307.0],[1531206720000,307.0],[1531207080000,307.0],[1531207440000,307.0],[1531207800000,307.0],[1531208160000,307.0],[1531208520000,307.0],[1531208880000,307.0],[1531209240000,307.0],[1531209600000,307.0],[1531209960000,307.0],[1531210320000,307.0],[1531210680000,307.0],[1531211040000,307.0],[1531211400000,307.0],[1531211760000,307.0],[1531212120000,307.0],[1531212480000,307.0],[1531212840000,307.0],[1531213200000,307.0],[1531213560000,307.0],[1531213920000,307.0],[1531214280000,307.0],[1531214640000,307.0],[1531215000000,307.0],[1531215360000,307.0],[1531215720000,307.0],[1531216080000,307.0],[1531216440000,307.0],[1531216800000,307.0],[1531217160000,307.0],[1531217520000,307.0],[1531217880000,307.0],[1531218240000,307.0],[1531218600000,307.0],[1531218960000,307.0],[1531219320000,307.0],[1531219680000,307.0],[1531220040000,307.0],[1531220400000,307.0],[1531220760000,307.0],[1531221120000,307.0],[1531221480000,307.0],[1531221840000,307.0],[1531222200000,307.0],[1531222560000,307.0],[1531222920000,307.0],[1531223280000,307.0],[1531223640000,307.0],[1531224000000,307.0],[1531224360000,307.0],[1531224720000,307.0],[1531225080000,307.0],[1531225440000,307.0],[1531225800000,307.0],[1531226160000,307.0],[1531226520000,307.0],[1531226880000,307.0],[1531227240000,307.0],[1531227600000,307.0],[1531227960000,307.0],[1531228320000,307.0],[1531228680000,305.0],[1531229040000,304.0],[1531229400000,329.0],[1531229760000,333.0],[1531230120000,346.0],[1531230480000,354.0],[1531230840000,354.0],[1531231200000,354.0],[1531231560000,354.0],[1531231920000,354.0],[1531232280000,341.0],[1531232640000,341.0],[1531233000000,341.0],[1531233360000,341.0],[1531233720000,341.0],[1531234080000,341.0],[1531234440000,341.0],[1531234800000,341.0],[1531235160000,341.0],[1531235520000,341.0],[1531235880000,341.0],[1531236240000,341.0],[1531236600000,354.0],[1531236960000,354.0],[1531237320000,354.0],[1531237680000,354.0],[1531238040000,354.0],[1531238400000,354.0],[1531238760000,354.0],[1531239120000,354.0],[1531239480000,354.0],[1531239840000,354.0],[1531240200000,354.0],[1531240560000,354.0],[1531240920000,354.0],[1531241280000,354.0],[1531241640000,354.0],[1531242000000,354.0],[1531242360000,354.0],[1531242720000,354.0],[1531243080000,354.0],[1531243440000,354.0],[1531243800000,354.0],[1531244160000,354.0],[1531244520000,354.0],[1531244880000,354.0],[1531245240000,354.0],[1531245600000,354.0],[1531245960000,354.0],[1531246320000,354.0],[1531246680000,354.0],[1531247040000,354.0],[1531247400000,354.0],[1531247760000,354.0],[1531248120000,354.0],[1531248480000,354.0],[1531248840000,354.0],[1531249200000,354.0],[1531249560000,354.0],[1531249920000,354.0],[1531250280000,354.0],[1531250640000,354.0],[1531251000000,354.0],[1531251360000,354.0],[1531251720000,354.0],[1531252080000,354.0],[1531252440000,354.0],[1531252800000,354.0],[1531253160000,354.0],[1531253520000,354.0],[1531253880000,354.0],[1531254240000,354.0],[1531254600000,354.0],[1531254960000,346.0],[1531255320000,342.0],[1531255680000,346.0],[1531256040000,355.0]]};
const getEmptyBookends = function() {
return [
[parseISOUTC(mergedSummary.startTimeGmt).getTime(), null], // add a point at the beginning to force 24 hour display
[parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null] // add a point at the end of the day to force 24 hour display
];
}
const getLowerTimelineData = function() {
const indexes = {};
const data = [];
let x, y, color, dataType;
const chartDataArray = myChartData.monitoringEnvironmentValuesArray;
// Use the descriptors from the endpoint to retrieve the indexes, the data is located here for future-proofing
myChartData.monitoringEnvironmentValueDescriptorList.forEach((valueDescriptor) => {
indexes[valueDescriptor.monEnvValueDescKey] = valueDescriptor.monEnvValueDescIndex;
});
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime(), null]); // add a point at the beginning to force 24 hour display
for(var j = 0, lengthJay = chartDataArray.length; j < lengthJay; j++) {
x = chartDataArray[j][indexes['timestamp']];
y = chartDataArray[j][indexes['reading']];
color = COLORS.gray_9;
dataType = 'stress';
y = -5;
color = COLORS.gray_9;
dataType = 'stress';
data.push({
x: x,
y: y,
color: color,
type: dataType
});
}
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null]); // add a point at the end of the day to force 24 hour display
return data;
}
const getXAxesConfig = function(size) {
const xAxis = [];
xAxis.push({
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
enabled: false
},
minRange: MIN_ZOOM_IN_MS
});
xAxis[0].min = 1531170000000;
xAxis[0].max = 1531256400000;
return xAxis;
}
const getYAxesConfig = function(size) {
const yAxis = [];
const maxValue = 710;
yAxis.push({
labels: {
align: 'left',
x: 2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
title: {
text: 'BOTTOM',
margin: 0
},
opposite: true,
allowDecimals: false,
max: maxValue,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [maxValue * -.05, Math.round(maxValue * .25), Math.round(maxValue * .5), Math.round(maxValue * .75), maxValue];
},
}, {
title: {
text: 'TOP',
margin: 0
},
labels: {
align: 'right',
x: -2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
max: 100,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [-5, 25, 50, 75, 100];
},
})
return yAxis;
}
const buildSeries = function() {
const series = [];
const lowerTimelineData = getLowerTimelineData();
const chartData = myChartData.monitoringEnvironmentValuesArray;
const spoChartData = myChartData.valuesArray;
series.push({
name: 'top data',
type: 'column',
yAxis: 1,
data: spoChartData,
tooltip: {
valueSuffix: '%'
},
threshold: Infinity,
zones: [{
value: 70,
color: '#ed7e00'
}, {
value: 80,
color: '#FC9E31'
}, {
value: 90,
color: '#F6E639'
}, {
value: 101,
color: '#54AE25'
}],
pointPadding: 0,
// pointInterval: 3600 * 1000,
groupPadding: 0,
borderWidth: 0,
pointRange: 3600 * 2000,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
showInLegend: false,
pointPlacement: 'between'
}, {
name: 'bottom data',
type: 'column',
yAxis: 0,
zIndex: 1,
data: chartData,
tooltip: {
valueSuffix: 'k'
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
color: '#C7C7C7',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
// pointInterval: 3600 * 200,
pointRange: 3600 * 200,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
// events: {
// legendItemClick: function () {
// return false;
// }
// },
pointPlacement: 'between'
}, {
type: 'column',
data: lowerTimelineData,
color: COLORS.gray_3,
name: 'base data',
showInLegend: false,
yAxis: 0,
zIndex: 1,
grouping: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0,
events: {
legendItemClick: function() {
return false;
}
},
pointRange: 3600 * 200,
// pointInterval: 3600 * 200,
pointPlacement: 'between',
threshold: -Infinity
})
if(series.length > 0) {
series.push({
type: 'line',
color: COLORS.blue_7,
name: "hidden_series",
showInLegend: false,
data: getEmptyBookends()
});
}
return series;
}
Highcharts.chart('container', {
backgroundColor: 'transparent',
marginBottom: 95,
marginTop: 50,
marginLeft: 48,
marginRight: 48,
height: 365,
reflow: true,
zoomType: 'x',
resetZoomButton: {
theme: {
display: 'none'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
margin: 0
},
legend: {
itemDistance: 22,
borderColor: "transparent",
useHTML: true,
symbolHeight: 10,
y: 20,
labelFormatter: function() {
return this.name;
},
itemStyle: {
fontWeight: 'normal',
lineHeight: '20px'
}
},
series: buildSeries(),
xAxis: getXAxesConfig(size),
yAxis: getYAxesConfig(size)
});
without pointRange: https://jsfiddle.net/eh5fgcw6/60/
const MIN_ZOOM_IN_MS = 3600 * 1000 * 4;
const MS_IN_ONE_DAY = 86400000;
const size = 'LARGE';
const COLORS = {
'black': '#000000',
'gray_1': '#222222',
'gray_2': '#7A7A7A',
'gray_3': '#888888',
'gray_4': '#B2B2B2',
'gray_5': '#CBCBCB',
'gray_6': '#E6E6E6',
'gray_7': '#EEEEEE',
'gray_8': '#F9F9F9',
'gray_9': '#FAFAFA',
'blue_1': '#3397ed',
'blue_2': '#11a9ed',
'blue_3': '#70CAFF',
'blue_4': '#0e334c',
'blue_5': '#b0e1f7',
'blue_6': '#beeffF',
'blue_7': '#0e334c',
'blue_8': '#8CD3FA',
'blue_9': '#73D4FF',
'green_1': '#9AF144',
'green_2': '#76FFE5',
'green_3': '#72ea24',
'green_4': '#50b012',
'green_5': '#B6D56B',
'orange_1': '#E9AE00',
'orange_2': '#FED7A5',
'red_1': '#F02751',
'red_2': '#FF0035'
};
const parseISOUTC = function(value) {
return moment(value).toDate();
}
const mergedSummary = {
startTimeGmt: "2018-07-09T21:00:00.0"
};
const myChartData = {"valuesArray":[[1531170000000,78],[1531231200000,84],[1531238400000,88],[1531242000000,96],[1531249200000,93],[1531252800000,92]],"monitoringEnvironmentValueDescriptorList":[{"monEnvValueDescIndex":0,"monEnvValueDescKey":"timestamp"},{"monEnvValueDescIndex":1,"monEnvValueDescKey":"monitoringEnvironmentLevel"}],"monitoringEnvironmentValuesArray":[[1531170000000,353.0],[1531170360000,353.0],[1531170720000,353.0],[1531171080000,353.0],[1531171440000,353.0],[1531171800000,353.0],[1531172160000,353.0],[1531172520000,353.0],[1531172880000,353.0],[1531173240000,353.0],[1531173600000,353.0],[1531173960000,353.0],[1531174320000,353.0],[1531174680000,353.0],[1531175040000,353.0],[1531175400000,353.0],[1531175760000,353.0],[1531176120000,353.0],[1531176480000,353.0],[1531176840000,353.0],[1531177200000,353.0],[1531177560000,353.0],[1531177920000,353.0],[1531178280000,353.0],[1531178640000,353.0],[1531179000000,353.0],[1531179360000,353.0],[1531179720000,353.0],[1531180080000,353.0],[1531180440000,353.0],[1531180800000,353.0],[1531181160000,353.0],[1531181520000,353.0],[1531181880000,353.0],[1531182240000,353.0],[1531182600000,353.0],[1531182960000,353.0],[1531183320000,353.0],[1531183680000,353.0],[1531184040000,353.0],[1531184400000,353.0],[1531184760000,353.0],[1531185120000,353.0],[1531185480000,353.0],[1531185840000,353.0],[1531186200000,353.0],[1531186560000,353.0],[1531186920000,353.0],[1531187280000,353.0],[1531187640000,353.0],[1531188000000,353.0],[1531188360000,353.0],[1531188720000,353.0],[1531189080000,353.0],[1531189440000,353.0],[1531189800000,353.0],[1531190160000,353.0],[1531190520000,353.0],[1531190880000,353.0],[1531191240000,353.0],[1531191600000,353.0],[1531191960000,353.0],[1531192320000,353.0],[1531192680000,353.0],[1531193040000,353.0],[1531193400000,353.0],[1531193760000,353.0],[1531194120000,353.0],[1531194480000,353.0],[1531194840000,353.0],[1531195200000,353.0],[1531195560000,353.0],[1531195920000,353.0],[1531196280000,353.0],[1531196640000,353.0],[1531197000000,353.0],[1531197360000,353.0],[1531197720000,353.0],[1531198080000,353.0],[1531198440000,353.0],[1531198800000,353.0],[1531199160000,353.0],[1531199520000,353.0],[1531199880000,353.0],[1531200240000,353.0],[1531200600000,353.0],[1531200960000,353.0],[1531201320000,353.0],[1531201680000,353.0],[1531202040000,353.0],[1531202400000,353.0],[1531202760000,353.0],[1531203120000,353.0],[1531203480000,353.0],[1531203840000,353.0],[1531204200000,353.0],[1531204560000,353.0],[1531204920000,322.0],[1531205280000,307.0],[1531205640000,307.0],[1531206000000,307.0],[1531206360000,307.0],[1531206720000,307.0],[1531207080000,307.0],[1531207440000,307.0],[1531207800000,307.0],[1531208160000,307.0],[1531208520000,307.0],[1531208880000,307.0],[1531209240000,307.0],[1531209600000,307.0],[1531209960000,307.0],[1531210320000,307.0],[1531210680000,307.0],[1531211040000,307.0],[1531211400000,307.0],[1531211760000,307.0],[1531212120000,307.0],[1531212480000,307.0],[1531212840000,307.0],[1531213200000,307.0],[1531213560000,307.0],[1531213920000,307.0],[1531214280000,307.0],[1531214640000,307.0],[1531215000000,307.0],[1531215360000,307.0],[1531215720000,307.0],[1531216080000,307.0],[1531216440000,307.0],[1531216800000,307.0],[1531217160000,307.0],[1531217520000,307.0],[1531217880000,307.0],[1531218240000,307.0],[1531218600000,307.0],[1531218960000,307.0],[1531219320000,307.0],[1531219680000,307.0],[1531220040000,307.0],[1531220400000,307.0],[1531220760000,307.0],[1531221120000,307.0],[1531221480000,307.0],[1531221840000,307.0],[1531222200000,307.0],[1531222560000,307.0],[1531222920000,307.0],[1531223280000,307.0],[1531223640000,307.0],[1531224000000,307.0],[1531224360000,307.0],[1531224720000,307.0],[1531225080000,307.0],[1531225440000,307.0],[1531225800000,307.0],[1531226160000,307.0],[1531226520000,307.0],[1531226880000,307.0],[1531227240000,307.0],[1531227600000,307.0],[1531227960000,307.0],[1531228320000,307.0],[1531228680000,305.0],[1531229040000,304.0],[1531229400000,329.0],[1531229760000,333.0],[1531230120000,346.0],[1531230480000,354.0],[1531230840000,354.0],[1531231200000,354.0],[1531231560000,354.0],[1531231920000,354.0],[1531232280000,341.0],[1531232640000,341.0],[1531233000000,341.0],[1531233360000,341.0],[1531233720000,341.0],[1531234080000,341.0],[1531234440000,341.0],[1531234800000,341.0],[1531235160000,341.0],[1531235520000,341.0],[1531235880000,341.0],[1531236240000,341.0],[1531236600000,354.0],[1531236960000,354.0],[1531237320000,354.0],[1531237680000,354.0],[1531238040000,354.0],[1531238400000,354.0],[1531238760000,354.0],[1531239120000,354.0],[1531239480000,354.0],[1531239840000,354.0],[1531240200000,354.0],[1531240560000,354.0],[1531240920000,354.0],[1531241280000,354.0],[1531241640000,354.0],[1531242000000,354.0],[1531242360000,354.0],[1531242720000,354.0],[1531243080000,354.0],[1531243440000,354.0],[1531243800000,354.0],[1531244160000,354.0],[1531244520000,354.0],[1531244880000,354.0],[1531245240000,354.0],[1531245600000,354.0],[1531245960000,354.0],[1531246320000,354.0],[1531246680000,354.0],[1531247040000,354.0],[1531247400000,354.0],[1531247760000,354.0],[1531248120000,354.0],[1531248480000,354.0],[1531248840000,354.0],[1531249200000,354.0],[1531249560000,354.0],[1531249920000,354.0],[1531250280000,354.0],[1531250640000,354.0],[1531251000000,354.0],[1531251360000,354.0],[1531251720000,354.0],[1531252080000,354.0],[1531252440000,354.0],[1531252800000,354.0],[1531253160000,354.0],[1531253520000,354.0],[1531253880000,354.0],[1531254240000,354.0],[1531254600000,354.0],[1531254960000,346.0],[1531255320000,342.0],[1531255680000,346.0],[1531256040000,355.0]]};
const getEmptyBookends = function() {
return [
[parseISOUTC(mergedSummary.startTimeGmt).getTime(), null], // add a point at the beginning to force 24 hour display
[parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null] // add a point at the end of the day to force 24 hour display
];
}
const getLowerTimelineData = function() {
const indexes = {};
const data = [];
let x, y, color, dataType;
const chartDataArray = myChartData.monitoringEnvironmentValuesArray;
// Use the descriptors from the endpoint to retrieve the indexes, the data is located here for future-proofing
myChartData.monitoringEnvironmentValueDescriptorList.forEach((valueDescriptor) => {
indexes[valueDescriptor.monEnvValueDescKey] = valueDescriptor.monEnvValueDescIndex;
});
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime(), null]); // add a point at the beginning to force 24 hour display
for(var j = 0, lengthJay = chartDataArray.length; j < lengthJay; j++) {
x = chartDataArray[j][indexes['timestamp']];
y = chartDataArray[j][indexes['reading']];
color = COLORS.gray_9;
dataType = 'stress';
y = -5;
color = COLORS.gray_9;
dataType = 'stress';
data.push({
x: x,
y: y,
color: color,
type: dataType
});
}
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null]); // add a point at the end of the day to force 24 hour display
return data;
}
const getXAxesConfig = function(size) {
const xAxis = [];
xAxis.push({
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
enabled: false
},
minRange: MIN_ZOOM_IN_MS
});
xAxis[0].min = 1531170000000;
xAxis[0].max = 1531256400000;
return xAxis;
}
const getYAxesConfig = function(size) {
const yAxis = [];
const maxValue = 710;
yAxis.push({
labels: {
align: 'left',
x: 2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
title: {
text: 'BOTTOM',
margin: 0
},
opposite: true,
allowDecimals: false,
max: maxValue,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [maxValue * -.05, Math.round(maxValue * .25), Math.round(maxValue * .5), Math.round(maxValue * .75), maxValue];
},
}, {
title: {
text: 'TOP',
margin: 0
},
labels: {
align: 'right',
x: -2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
max: 100,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [-5, 25, 50, 75, 100];
},
})
return yAxis;
}
const buildSeries = function() {
const series = [];
const lowerTimelineData = getLowerTimelineData();
const chartData = myChartData.monitoringEnvironmentValuesArray;
const spoChartData = myChartData.valuesArray;
series.push({
name: 'top data',
type: 'column',
yAxis: 1,
data: spoChartData,
tooltip: {
valueSuffix: '%'
},
threshold: Infinity,
zones: [{
value: 70,
color: '#ed7e00'
}, {
value: 80,
color: '#FC9E31'
}, {
value: 90,
color: '#F6E639'
}, {
value: 101,
color: '#54AE25'
}],
pointPadding: 0,
// pointInterval: 3600 * 1000,
groupPadding: 0,
borderWidth: 0,
// pointRange: 3600 * 1000,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
showInLegend: false,
pointPlacement: 'between'
}, {
name: 'bottom data',
type: 'column',
yAxis: 0,
zIndex: 1,
data: chartData,
tooltip: {
valueSuffix: 'k'
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
color: '#C7C7C7',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
// pointInterval: 3600 * 200,
// pointRange: 3600 * 200,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
// events: {
// legendItemClick: function () {
// return false;
// }
// },
pointPlacement: 'between'
}, {
type: 'column',
data: lowerTimelineData,
color: COLORS.gray_3,
name: 'base data',
showInLegend: false,
yAxis: 0,
zIndex: 1,
grouping: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0,
events: {
legendItemClick: function() {
return false;
}
},
// pointRange: 3600 * 200,
// pointInterval: 3600 * 200,
pointPlacement: 'between',
threshold: -Infinity
})
if(series.length > 0) {
series.push({
type: 'line',
color: COLORS.blue_7,
name: "hidden_series",
showInLegend: false,
data: getEmptyBookends()
});
}
return series;
}
Highcharts.chart('container', {
backgroundColor: 'transparent',
marginBottom: 95,
marginTop: 50,
marginLeft: 48,
marginRight: 48,
height: 365,
reflow: true,
zoomType: 'x',
resetZoomButton: {
theme: {
display: 'none'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
margin: 0
},
legend: {
itemDistance: 22,
borderColor: "transparent",
useHTML: true,
symbolHeight: 10,
y: 20,
labelFormatter: function() {
return this.name;
},
itemStyle: {
fontWeight: 'normal',
lineHeight: '20px'
}
},
series: buildSeries(),
xAxis: getXAxesConfig(size),
yAxis: getYAxesConfig(size)
});

Data label position

Whenever i resize my chart my code will not work.
I want to show all my data labels at the same height but I'm unable to adjust it. All data labels should be above max height which i calculated in the code. Max height is the two times of max data value.Plz help me in it.
Below is my jsfiddle link
Jsfiddle link
var i = 0, max = 0, min = 0;
var val = [-6, 5, 10, 4];
var cat = ['Sep-2016', 'Oct-2016', 'Nov-2016', 'Dec-2016'];
var color = ['#f442d4', '#41f4f1', '#4149f4', '#f49a41'];
var fixed = [];
var variable = [];
var val2= new Array();
for( i=0; i<val.length; i++ )
{
var str = {y:0, color: ""};
str.y = val[i];
str.color = color[i];
val2.push(str);
}
for(i=0;val[i];)
{
if(min>val[i])
min=val[i];
if(max<val[i])
max=val[i];
i++;
}
max=2*max;
if(min<0)
min=2*min;
else
min=0;
for( i=0; i<val.length; i++ )
{
if(val[i]<0)
fixed.push(-2);
else
fixed.push(2);
}
for( i=0; i<val.length; i++ )
{
if(val[i]<0)
{
variable.push(min-fixed[i]-val[i]);
}
else
{
variable.push(max-fixed[i]-val[i]-2);
}
}
var seriesData= [{
type: 'areaspline',
color: '#e1e4e8',
data: val,
dataLabels:{
enabled:false
}
}, {
type: 'column',
color: '#bbc1c9',
data: fixed,
dataLabels:{
enabled:false
}
}, {
type: 'column',
color: '#dce0e5',
data: variable,
dataLabels:{
enabled:false
}
}, {
type: 'column',
data: val2,
dataLabels:{
enabled:true,
formatter: function () {
return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";transform:translate(0px,-150px)'>" + this.point.y +"</div></html>";
},
useHTML:true,
}
}]
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
backgroundColor: '#f4f7f7'
},
legend: {
enabled: false
},
xAxis: {
categories: cat,
tickmarkPlacement: 'on',
title: {
enabled: false
},
tickLength: 0
},
yAxis: {
max: max,
min: min,
tickInterval: 2,
labels: {
enabled: false
},
title: {
text: '',
},
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#FFFFFF',
},
series: {
pointWidth: 5,
borderWidth: 0,
stacking: 'normal',
}
},
series: seriesData,
});
Note: max positive value : 160, max negative value : -60
for further reference you can check the below image

add at the end this line
jQuery('.highcharts-label').css('top','0px');
and update your formater
formatter: function () {
return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";position:absolute;left:-15px'>" + this.point.y +"</div></html>";
https://jsfiddle.net/f3gscp3d/1/

Hide Series on Click with jQuery Flot

I have a Flot graph which I am trying to make it so that when you click a particular legend item it makes that data disappear from the chart.
I am having limited success in getting this to work. I've gotten as far as being able to click a legend item and a series line is removed, but not the points, and it appears to be the wrong line data as well.
Any help on this would be really appreciated :)
var Graphs = function () {
return {
//main function
initCharts: function () {
if (!jQuery.plot) {
return;
}
function showChartTooltip(x, y, xValue, yValue) {
$('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 40,
border: '0px solid #ccc',
padding: '2px 6px',
'background-color': '#fff'
}).appendTo("body").fadeIn(200);
}
if ($('#site_revenue').size() != 0) {
//site revenue
var previousPoint2 = null;
var plot_statistics = null;
var data = [];
togglePlot = function(seriesIdx)
{
var previousPoint2 = plot_statistics.getData();
previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
plot_statistics.setData(previousPoint2);
plot_statistics.draw();
}
$('#site_revenue_loading').hide();
$('#site_revenue_content').show();
var data = [{
label: "Gross Revenue",
color: ['#44b5b1'],
points: {
fillColor: "#44b5b1"
},
data: [
['Sep', 264.41],
['Aug', 6653.98],
['Jul', 921.35],
['Jun', 937.00],
['May', 1839.25],
['Apr', 1561.96],
['Mar', 2289.62],
['Feb', 2661.91],
['Jan', 6021.44],
['Dec', 4129.21],
['Nov', 0.00],
['Oct', 2865.28],
],
idx:1
},{
label: "Tax",
color: ['#8fc2ed'],
points: {
fillColor: "#8fc2ed"
},
data: [
['Sep', 0.00],
['Aug', 2865.28],
['Jul', 2661.91],
['Jun', 6653.98],
['May', 6021.44],
['Apr', 0.00],
['Mar', 2289.62],
['Feb', 1561.96],
['Jan', 921.35],
['Dec', 937.00],
['Nov', 1839.25],
['Oct', 4129.21]
],
idx: 2
}];
var plot_statistics = $.plot($("#site_revenue"), data, {
series: {
lines: {
show: true,
fill: 0.2,
lineWidth: 0,
fill: false,
lineWidth: 3
},
shadowSize: 1,
points: {
show: true,
fill: true,
radius: 4,
lineWidth: 2
},
},
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 18,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
legend: {
show: true,
placement: 'outsideGrid',
container: $('#site_revenue_legend'),
labelFormatter: function(label, series){
return ''+label+'';
}
}
});
$("#site_revenue").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint2 != item.dataIndex) {
previousPoint2 = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], '$' + item.datapoint[1]);
}
}
});
$('#site_revenue').bind("mouseleave", function () {
$("#tooltip").remove();
});
}
}
};
}();
jQuery(document).ready(function() {
Graphs.initCharts(); // init index page's custom scripts
});
JSFiddle: http://jsfiddle.net/fxc4vyg3/

You must be tired, you just have an off-by-one error, and you only called the update for the lines, not the points.
togglePlot = function(seriesIdx)
{
var previousPoint2 = plot_statistics.getData();
seriesIdx--; // ***HERE***
previousPoint2[seriesIdx].points.show = // ***AND HERE***
previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
plot_statistics.setData(previousPoint2);
plot_statistics.draw();
}
Here's the fixed fiddle: http://jsfiddle.net/it_turns_out/fxc4vyg3/3/

Flot Chart show dates

First of all, excuse me for my english!
I want to show a flot chart with jquery. My code is the following:
charts.chart_simple =
{
// data
data:
{
d1: []
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid:
{
color: "#dedede",
borderWidth: 1,
borderColor: "transparent",
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: false,
lineWidth: 2,
steps: false
},
points: {
show:true,
radius: 5,
lineWidth: 3,
fill: true,
fillColor: "#000"
}
},
xaxis: {
mode: "time",
tickColor: 'transparent',
tickDecimals: 2,
tickSize: 2
},
yaxis: {
tickSize: 10
},
legend: { position: "nw", noColumns: 2, backgroundColor: null, backgroundOpacity: 0 },
shadowSize: 0,
tooltip: true,
tooltipOpts: {
content: "%s : %y.3",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
placeholder: "#chart_simple",
// initialize
init: function()
{
// this.options.colors = ["#72af46", "#466baf"];
this.options.colors = [successColor, primaryColor];
this.options.grid.backgroundColor = { colors: ["#fff", "#fff"]};
var that = this;
if (this.plot == null)
{
this.data.d1 = new Array();
var o = 0;
for(var i = 0; i < data.length; i++){
var group = data[i];
for(var e = 0; e < group.length; e++){
var elem = new Array(date, intVal);
this.data.d1[o] = elem;
o++;
}
}
}
this.plot = $.plot(
$(this.placeholder),
[{
label: "Consumo Medio",
data: this.data.d1,
lines: { fill: 0.05 },
points: { fillColor: "#fff" }
}], this.options);
}
};
// uncomment to init on load
charts.chart_simple.init();
The problem is the variable "date". If I put a number it works perfectly.
Variable "date" has this format -> 2014-02-26

You have to use timestamps. See the documentation for explanation and examples.

Thank you very much for your replies.
Finally I found the solution.
var data1 = new Array();
var o = 0;
for(var i = 0; i < data.length; i++){
var group = data[i];
for(var e = 0; e < group.length; e++){
var date = group[e][0];
var year = date.substring(0,4)
var month = date.substring(5,7)
var day = date.substring(8,10)
console.log(year + " | " + month + " | " + day);
var elem = new Array(gd(year, month, day), (group[e][1]/group[e][2]));
data1[o] = elem;
o++;
}
}
var dataset = [
{
label: "Consumo Semana",
data: data1,
color: "#FF0000",
xaxis:2,
points: { fillColor: "#FF0000", show: true },
lines: { show: true }
}
];
var dayOfWeek = ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"];
var options = {
series: {
shadowSize: 5
},
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: 0,
axisLabel: "2012",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "Gold Price in USD/oz",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
xaxes: [{
mode: "time",
tickFormatter: function (val, axis) {
return dayOfWeek[new Date(val).getDay()];
},
color: "black",
position: "top",
axisLabel: "Weekday",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 5
},
{
mode: "time",
timeformat: "%d/%m",
tickSize: [1, "day"],
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}],
grid: {
hoverable: true,
borderWidth: 2,
borderColor: "#633200",
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
},
colors: ["#FF0000", "#0022FF"]
};
$.plot($("#chart_simple_2"), dataset, options);
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
The problem was the way that I was introducing date data. With this tutorial I found the answer.
http://www.jqueryflottutorial.com/how-to-make-jquery-flot-time-series-chart.html
Thank you very much again!
Regards!