Highcharts Column Chart - pointRange causes extra space to the right

Highcharts Column Chart - pointRange causes extra space to the right - javascript

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)
});

Related

Add second series to highchart master detail

I'm using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart
const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
data => {
let detailChart;
// create the detail chart
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = data[0][0];
masterChart.series[0].data.forEach(point => {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
zoomType: "x",
spacingLeft: 10,
spacingRight: -20,
borderRadius: 10,
backgroundColor: "#F3F3F3",
borderColor: "#335cad",
height: priceChartHeight,
style: { fontFamily: "Manrope" },
style: {
position: 'absolute'
},
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: -40,
y: 5
},
theme: {
fill: '#377DED',
stroke: 'transparent',
r: 0,
style: {
color: 'white',
borderRadius: 10
},
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
},
},
},
},
},
marginBottom: 90,
reflow: false,
marginLeft: 10,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: null,
align: 'left'
},
subtitle: {
text: null,
align: 'left'
},
xAxis: {
type: 'datetime',
visible: false,
},
yAxis: {
title: {
text: null,
},
opposite: true,
gridLineColor: "rgba(87, 87, 87, 0.15)",
gridLineDashStyle: "dash",
left: -40
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '' + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> ' + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>' + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>' },
shared: true,
borderRadius: 5,
borderColor: 'transparent',
shadow: false,
backgroundColor: '#fff'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [
{
name: 'Nominal',
data: detailData,
type: 'area',
},
],
exporting: {
enabled: false
}
}); // return chart
}
// create the master chart
function createMaster() {
Highcharts.chart('master-container', {
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
spacingLeft: 10,
spacingRight: 30,
borderRadius: 10,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
this.series[0].data.forEach(point => {
if (point.x > min && point.x < max) {
detailData.push([point.x, point.y]);
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: data[0][0],
to: min,
color: 'rgba(0, 0, 0, 0)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
});
xAxis.addPlotBand({
id: 'mask-after',
from: min,
to: max,
color: 'rgba(255, 255, 255, 1)',
borderColor: "#377DED",
borderWidth: 2
});
detailChart.series[0].setData(detailData);
console.log(min)
console.log(max)
return false;
}
}
},
title: {
text: null
},
accessibility: {
enabled: false
},
xAxis: {
type: "datetime",
labels: { format: '{value:%b %e }' },
crosshair: {
color: '#377DED80'
},
lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', minorTickLength: 0, tickLength: 0,
top: -5,
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
plotBands: [{
id: 'mask-before',
from: data[0][0],
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
}],
title: {
text: null
},
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
borderRadius: 50,
borderColor: 'red'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(255,255,255,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: data[0][0],
data: data
}],
exporting: {
enabled: false
}
}, masterChart => {
createDetail(masterChart);
}); // return chart instance
}
// make the container smaller and add a second container for the master chart
const container = document.getElementById('price-chart-main');
container.style.position = 'relative';
container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';
// create master and in its callback, create the detail chart
createMaster();
}
);
there is example that i used https://www.highcharts.com/demo/dynamic-master-detail

Adding a new series to a master-detail chart is very simple. You need to only add a new data set and connect it to the right series. For example:
var detailData = [
[],
[]
],
detailStart = data1[0][0];
masterChart.series.forEach((s, index) => {
s.points.forEach(point => {
if (point.x >= detailStart) {
detailData[index].push(point.y);
}
});
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
type: 'area',
...
},
...,
series: [{
data: detailData[0]
}, {
data: detailData[1]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/97dxakfe/
API Reference: https://api.highcharts.com/highcharts/series

Align a data label below a point on a bubble graph (Chart.JS)

I am trying to position a label related to the dataset below a point on a bubble graph and to have the value displayed on top of the point.
I have tried returning two different values, but it only allows me to return one.
Because of this I have returned both values within the same string.
Is it possible to return the label and position it below the value of the dataset and to put the value above the point of the dataset?
If it isn't possible would it be possible to somehow get the text to align to the center after the line break I have added to the string?
Here is what I have so far
This is what I am trying to achieve, but with the value above the bubble
Here is my code so far:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label: 'Top',
data: [
{x: 110, y: 0, r: 12, name: "Performance"}
],
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(91,182,209,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,255,255,1)",
hoverBorderWidth : 2
},
{
label: 'Average',
data: [
{x: 75, y: 0, r: 12, name: "Performance"}
],
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(91,182,209,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,255,255,1)",
hoverBorderWidth : 2
},
{
label: 'You 2017',
data: [
{x: 55, y: 0, r: 15, name: "Performance"}
],
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(91,182,209,1)",
borderWidth: 2,
hoverBackgroundColor : "rgba(255,255,255,1)",
hoverBorderWidth : 2
},
{
label: 'You 2018',
data: [
{x: 90, y: 0, r: 15, name: "Performance"} // The labe needs to be
],
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(91,182,209,1)",
borderWidth: 2,
hoverBackgroundColor : "rgba(255,255,255,1)",
hoverBorderWidth : 2
}
]
},
options: {
legend: {
display: false
},
plugins: {
datalabels: {
anchor: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
align: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
color: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? context.dataset.borderColor : 'white';
},
font: {
weight: 'bold'
},
formatter: function (value, context) {
ctx.textAlign = "center";
return context.dataset.label + "\n" + Math.round(value.x);
},
offset: 2,
padding: 0
}
},
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'first-y-axis',
type: 'linear',
ticks: {
min: 0,
max: 1,
stepSize: 1,
display: false
},
gridLines: {
display: false,
drawBorder: false
}
}],
xAxes: [
{
id: 'first-x-axis',
ticks: {
min: 50, // Controls where axis starts
max: 120, // Controls where axis finishes
stepSize: 70 // Control the gap between the first x-axis value and the last x-axis value
},
gridLines: {
display: false,
lineWidth: 3 // Width of bottom line
}
}
]
}
}
});
Any help or suggestions would be greatly appreciated ^_^

I figured this out by applying 'textAlign' within the charts parameters and set it to centre.
You can see this in the code below:
plugins: {
datalabels: {
anchor: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
align: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
color: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? context.dataset.borderColor : 'white';
},
textAlign: 'center',
font: {
weight: 'bold',
alignment: 'right' // Is this the place to be doing this?
},
formatter: function (value, context) {
return context.dataset.label + '\n' + Math.round(value.x);
},
offset: 2,
padding: 0
}
},
Hope this helps ^^

Want to move y-axis scrollbar with mouse wheel in highcharts/highstock

Referring to the question i want to move my y-axis scrollbar with mouse wheel
Is there any way to do it ?
yAxis:
{
scrollbar: {
enabled: true,
showFull: false
},
}
Updated Code
Bellow is my updated code
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',
//type: 'column',
//zoomType: 'xy',
//panning: true,
//pankey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar:{
enabled: true
},
navigator: {
//xAxis: {
// tickWidth: 0,
// lineWidth: 0,
// gridLineWidth: 1,
// tickPixelInterval: 200,
// labels: {
// align: 'left',
// style: {
// color: '#888'
// },
// x: 3,
// y: -4
// }
//},
//yAxis: {
// gridLineWidth: 0,
// startOnTick: false,
// endOnTick: false,
// minPadding: 0.1,
// maxPadding: 0.1,
// labels: {
// enabled: false
// },
// title: {
// text: null
// },
// tickWidth: 0
//},
//series: {
// //data: arry_kwh_2,
// type: 'column',
// color: '#4572A7',
// fillOpacity: 0.05,
// dataGrouping: {
// smoothed: true
// },
// lineWidth: 1,
// marker: {
// enabled: true
// }
//},
enabled: true,
height: 30,
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
enabled: true,
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
plotOptions: {
column: {
turboThreshold: 50000
}
},
title: {
text: 'Energy vs Date & Time',
style: {
fontWeight: 'bold',
}
},
xAxis: {
type: 'datetime',
//min: 0,
//max: 100000
},
yAxis:
{
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Energy (kWh)',
style: {
//color: '#FF00FF',
fontSize: '12px',
//sfont: 'bold 200px Verdana, sans-serif',
}
}
},
series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
}
],
});
The data in the series is in array format
Any help would be highly appreciated

There is no such feature in Highcharts nor in Highstock. You could add a mouse wheel event and bind it with a setExtremes function for yAxis.
http://jsfiddle.net/3q79ey8h/1/
(function(H) {
//internal functions
function stopEvent(e) {
if (e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble = true;
}
}
//the wrap
H.wrap(H.Chart.prototype, 'render', function(proceed) {
var chart = this,
mapNavigation = chart.options.mapNavigation;
proceed.call(chart);
// Add the mousewheel event
H.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function(event) {
var delta, extr, step, newMin, newMax, axis = chart.yAxis[0];
e = chart.pointer.normalize(event);
// Firefox uses e.detail, WebKit and IE uses wheelDelta
delta = e.detail || -(e.wheelDelta / 120);
delta = delta < 0 ? 1 : -1;
if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
extr = axis.getExtremes();
step = (extr.max - extr.min) / 5 * delta;
axis.setExtremes(extr.min + step, extr.max + step, true, false);
}
stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
return false;
});
});
}(Highcharts));

HighCharts - Hide/Show Label on mouse Events

I'm trying to hide the label and change the border width on mouse over, and return the graph to its original state on mouse out.
The "Uncaught TypeError: Cannot read property 'states' of undefined" keeps showing and I don't know what to do.
var showLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = true;
options.plotOptions.series.borderWidth = 0;
myChart = new Highcharts.Chart(options);
};
var hideLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = false;
options.plotOptions.series.borderWidth = 3;
myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits:false,
exporting:false,
title: {
text: ''
},
xAxis: {
categories:['Captação'],
labels: {
//AQUI
enabled:true,
x: 80,
y: 5,
style:{
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled:false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled:false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
stickyTracking: false,
borderColor: '#000000',
//AQUI
borderWidth: 0,
events: {
mouseOver: function (event) {
console.log('Mouse over');
return hideLabel();
},
mouseOut: function () {
console.log('Moused out');
return showLabel();
}
}
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
JS Fiddle

Instead of recreating charts on each mouse event you should update the chart dynamically using axis.update and series.update.
It will be also better to get event of charts container instead of series, since you want to change the chart and the series.
Example: https://jsfiddle.net/aythcvop/
$(function() {
var showLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: true
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 0
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = true;
//options.plotOptions.series.borderWidth = 0;
//myChart = new Highcharts.Chart(options);
};
var hideLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: false
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 3
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = false;
//options.plotOptions.series.borderWidth = 3;
//myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function() {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits: false,
exporting: false,
title: {
text: ''
},
xAxis: {
categories: ['Captação'],
labels: {
//AQUI
enabled: true,
x: 80,
y: 5,
style: {
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled: false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled: false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
borderColor: '#000000',
//AQUI
borderWidth: 0
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
$('#graph_capt').on('mouseenter', function() {
console.log('hide');
hideLabel(myChart);
});
$('#graph_capt').on('mouseleave', function() {
console.log('show');
showLabel(myChart);
});
});
<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>
<div id="graph_capt" style="height:100px"></div>

HighCharts JS Ajax Data Guage

Could someone please assist me on modifying the code from HighCharts Angular Gauge demo to load data from a comma-separated values file?
The comma-separated values column should be specifiable. i.e: data[0], data[1], data[2]
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
An Example of comma-separated values data being loaded into Highcharts Demo - Ajax loaded data, clickable points.
$(function () {
// Register a parser for the American date format used by Google
Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
parser: function (match) {
return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
}
};
// Get the CSV and create the chart
$.get('/samples/highcharts/demo/line-ajax/analytics.csv', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
Many Thanks,

First of all I see that you have empty series.data which doesn't exists. In case when you download data by ajax, you push your data to series or use i.e setData() / addPoint() functions. All of them are documented here: http://api.highcharts.com/highcharts
I advice to familiar with article about preprocessing data http://docs.highcharts.com/#preprocessing

Develop Reference

JavaScript is the programming language of the Web.

Highcharts Column Chart - pointRange causes extra space to the right - javascript

Related

Add second series to highchart master detail

Align a data label below a point on a bubble graph (Chart.JS)

Want to move y-axis scrollbar with mouse wheel in highcharts/highstock

HighCharts - Hide/Show Label on mouse Events

HighCharts JS Ajax Data Guage

Categories

Resources