Highcharts stacked column chart is missing some values? - highcharts

in the picture below the middle column is missing the yellow portion. if you look at the label column you can see a value of 10 for green, 12 for yellows(missing) and 5 for reds.
I have checked the json and the database records they look fine and match to these values but highcharts is just not rendering these sections.
this happens randomly across the whole chart.
var chartOptions = dashboards.getChartOptions(data.ChartSize,
{
title: { text: options.title },
series: options.series,
legend: $.extend({
enabled: (data.legend) && data.legend != 'none',
align: align,
verticalAlign: vAlign,
layout: layout,
y: 20
}, legendOptions),
tooltip: {
formatter: function () {
if (this.series.chart.options.plotOptions.series.stacking && !data.isTimeCharted) {
return '<b>' + dashboards.Utils.shorten(this.series.name, 20) + '</b><br/>'
+ dashboards.Utils.shorten(this.point.category, 20) + ': ' + this.y;
}
else if (data.isTimeCharted) {
return '<b>' + dashboards.formatDate(this.point.category) + '</b><br/>'
+ (data.ChartType === 'line' | data.ChartType === 'column' ? '<b>' + dashboards.Utils.shorten(this.series.name, 20) + '</b><br/>' : '') +
(percentage ? parseFloat(this.percentage).toFixed(2) + '%' : this.y);
}
else {
return '<b>' + dashboards.Utils.shorten(this.point.category, 20) + '</b><br/>'
+ (data.ChartType === 'line' ? '<b>' + dashboards.Utils.shorten(this.series.name, 20) + '</b><br/>' : '')+
(percentage ? parseFloat(this.percentage).toFixed(2) + '%' : this.y);
}
},
followPointer: (data.ChartType!=="line"),
shared: false
},
chart: {
type: data.ChartType,
renderTo: chartContainer[0]
},
xAxis: {
type: (data.isTimeCharted ? "datetime" : "categories"),
categories: (data.isTimeCharted ? undefined : currentData.chartData.categories),
minTickInterval: (data.isTimeCharted ? 24 * 3600 * 1000 : undefined),
labels: (data.isTimeCharted ? { formatter: null } : (data.ChartType === 'column' && (data.topXvalue >=20 || data.topXvalue == 0)) ? { rotation: -85, align: 'right' } : undefined)
},
yAxis: options.yAxis,
plotOptions: {
series: {
stacking: data.stacking,
}
},
exporting: {
enabled: false
}
});
a cut of the json:
{
"charts":[
{
"vitals":[
],
"chartData":[
{
"name":"Favourable",
"data":[
{
"category":"2013-12-01",
"y":"27.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-02",
"y":"189.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-03",
"y":"143.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-04",
"y":"146.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-05",
"y":"74.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-06",
"y":"142.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-07",
"y":"142.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-08",
"y":"111.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-09",
"y":"226.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-10",
"y":"66.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-11",
"y":"14.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-12",
"y":"28.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-13",
"y":"69.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-14",
"y":"12.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-15",
"y":"10.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-16",
"y":"32.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-17",
"y":"72.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-18",
"y":"35.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-19",
"y":"40.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-20",
"y":"145.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-21",
"y":"24.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-22",
"y":"3.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-23",
"y":"13.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
},
{
"category":"2013-12-24",
"y":"3.00",
"xFilter":"date",
"xFilterID":0,
"yFilter":null,
"yFilterID":0,
"seriesFilter":"favourability",
"seriesFilterID":1
}

Some things to check:
Is that your data for each series sorted correctly by date (category)?
Check that each series has an entry for every date.

Related

The opposite X aXis series is not showed in the navigator

I have a problem.
My graphic has 6 series, of which 3 belong to the lower X axis and the other 3 to the upper one. The problem is that the series belonging to the upper X axis are not displayed in the navigator. This causes that when modifying the range these series "break". Here the evidence:
http://jsfiddle.net/6gqbj8sk/
Also, I would like the points of the 2 axes to be aligned (the number of points in each series is the same).
Thanks!
The code:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
xAxis: [{
type: 'datetime',
}, {
type: 'datetime',
opposite: true,
}],
yAxis: {
visible: true,
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
format: "{value}",
align: "right"
},
},
tooltip: {
pointFormatter: function () {
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + Highcharts.numberFormat(this.y, 2) + '</b> ' + unidades + '<br/>';
}
},
legend: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: true
},
scrollbar: {
enabled: true
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [{"name":"Activa","stack":0,"type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.352],[1540340100000,0.288],[1540341000000,0.464],[1540341900000,0.576],[1540342800000,0.304],[1540343700000,0.288],[1540344600000,0.464],[1540345500000,0.512],[1540346400000,0.368],[1540347300000,0.336],[1540348200000,0.384],[1540349100000,0.496],[1540350000000,0.432],[1540350900000,0.368],[1540351800000,0.304],[1540352700000,0.432],[1540353600000,0.544],[1540354500000,0.368],[1540355400000,0.288],[1540356300000,0.352],[1540357200000,0.544],[1540358100000,0.416],[1540359000000,0.272],[1540359900000,0.288],[1540360800000,0.56],[1540361700000,0.48],[1540362600000,0.256],[1540363500000,0],[1540364400000,0.272],[1540365300000,0.256],[1540366200000,0.224],[1540367100000,0.72],[1540368000000,0.304],[1540368900000,0.304],[1540369800000,0.064],[1540370700000,0.928],[1540371600000,0.4],[1540372500000,0.848],[1540373400000,0.24],[1540374300000,0.16],[1540375200000,0],[1540376100000,0.192],[1540377000000,0.864],[1540377900000,0.096],[1540378800000,0.432],[1540379700000,0.48],[1540380600000,0.336],[1540381500000,0.032],[1540382400000,0],[1540383300000,0.128],[1540384200000,0.32],[1540385100000,0.048],[1540386000000,0],[1540386900000,0.112],[1540387800000,0.32],[1540388700000,0.224],[1540389600000,0],[1540390500000,0.128],[1540391400000,0.208],[1540392300000,0.192],[1540393200000,0.08],[1540394100000,1.28],[1540395000000,1.808],[1540395900000,1.984],[1540396800000,1.84],[1540397700000,1.296],[1540398600000,0.128],[1540399500000,0.368],[1540400400000,1.248],[1540401300000,0],[1540402200000,0.08],[1540403100000,0.336],[1540404000000,0.256],[1540404900000,0.672],[1540405800000,0.144],[1540406700000,0.4],[1540407600000,0.816],[1540408500000,0.736],[1540409400000,0.912],[1540410300000,0.656],[1540411200000,0.544],[1540412100000,0.48],[1540413000000,0.384],[1540413900000,0.304],[1540414800000,0.448],[1540415700000,0.592],[1540416600000,0.368],[1540417500000,0.304],[1540418400000,0.4],[1540419300000,0.592],[1540420200000,0.4],[1540421100000,0.304],[1540422000000,0.384],[1540422900000,0.496],[1540423800000,0.464],[1540424700000,0.368]]},{"name":"Reactiva","stack":1,"type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.352],[1540340100000,0.416],[1540341000000,0.096],[1540341900000,0],[1540342800000,0.4],[1540343700000,0.416],[1540344600000,0.176],[1540345500000,0],[1540346400000,0.256],[1540347300000,0.352],[1540348200000,0.272],[1540349100000,0],[1540350000000,0.096],[1540350900000,0.288],[1540351800000,0.384],[1540352700000,0.128],[1540353600000,0],[1540354500000,0.272],[1540355400000,0.416],[1540356300000,0.272],[1540357200000,0],[1540358100000,0.208],[1540359000000,0.416],[1540359900000,0.416],[1540360800000,0],[1540361700000,0.112],[1540362600000,0.432],[1540363500000,0.544],[1540364400000,0.144],[1540365300000,0.176],[1540366200000,0.512],[1540367100000,0.272],[1540368000000,0.112],[1540368900000,0.128],[1540369800000,0.448],[1540370700000,0.288],[1540371600000,0.384],[1540372500000,0.208],[1540373400000,0.336],[1540374300000,0.416],[1540375200000,0.528],[1540376100000,0.24],[1540377000000,0.56],[1540377900000,0.416],[1540378800000,0.432],[1540379700000,0.208],[1540380600000,0.032],[1540381500000,0.512],[1540382400000,0.528],[1540383300000,0.336],[1540384200000,0.016],[1540385100000,0.464],[1540386000000,0.528],[1540386900000,0.4],[1540387800000,0.064],[1540388700000,0.368],[1540389600000,0.544],[1540390500000,0.384],[1540391400000,0.24],[1540392300000,0.24],[1540393200000,0.432],[1540394100000,0.24],[1540395000000,0.064],[1540395900000,0],[1540396800000,0.048],[1540397700000,0.256],[1540398600000,0.448],[1540399500000,0],[1540400400000,1.184],[1540401300000,0.576],[1540402200000,0.528],[1540403100000,0.048],[1540404000000,0.176],[1540404900000,0.736],[1540405800000,0.432],[1540406700000,0.24],[1540407600000,0.144],[1540408500000,0.256],[1540409400000,0.112],[1540410300000,0.16],[1540411200000,0],[1540412100000,0.064],[1540413000000,0.288],[1540413900000,0.416],[1540414800000,0.112],[1540415700000,0],[1540416600000,0.32],[1540417500000,0.416],[1540418400000,0.288],[1540419300000,0],[1540420200000,0.192],[1540421100000,0.416],[1540422000000,0.288],[1540422900000,0.016],[1540423800000,0.032],[1540424700000,0.304]]},{"name":"Aparente","stack":2,"type":"spline","xAxis":0,"pointStart":"1540339200000","data":[[1540339200000,0.496],[1540340100000,0.504],[1540341000000,0.472],[1540341900000,0.576],[1540342800000,0.504],[1540343700000,0.504],[1540344600000,0.496],[1540345500000,0.512],[1540346400000,0.448],[1540347300000,0.488],[1540348200000,0.472],[1540349100000,0.496],[1540350000000,0.444],[1540350900000,0.468],[1540351800000,0.488],[1540352700000,0.452],[1540353600000,0.544],[1540354500000,0.456],[1540355400000,0.504],[1540356300000,0.444],[1540357200000,0.544],[1540358100000,0.464],[1540359000000,0.496],[1540359900000,0.504],[1540360800000,0.56],[1540361700000,0.492],[1540362600000,0.504],[1540363500000,0.544],[1540364400000,0.308],[1540365300000,0.312],[1540366200000,0.56],[1540367100000,0.768],[1540368000000,0.324],[1540368900000,0.328],[1540369800000,0.452],[1540370700000,0.972],[1540371600000,0.556],[1540372500000,0.872],[1540373400000,0.412],[1540374300000,0.444],[1540375200000,0.528],[1540376100000,0.308],[1540377000000,1.028],[1540377900000,0.428],[1540378800000,0.612],[1540379700000,0.524],[1540380600000,0.336],[1540381500000,0.512],[1540382400000,0.528],[1540383300000,0.36],[1540384200000,0.32],[1540385100000,0.468],[1540386000000,0.528],[1540386900000,0.416],[1540387800000,0.328],[1540388700000,0.432],[1540389600000,0.544],[1540390500000,0.404],[1540391400000,0.316],[1540392300000,0.308],[1540393200000,0.44],[1540394100000,1.304],[1540395000000,1.808],[1540395900000,1.984],[1540396800000,1.84],[1540397700000,1.32],[1540398600000,0.464],[1540399500000,0.368],[1540400400000,1.72],[1540401300000,0.576],[1540402200000,0.536],[1540403100000,0.34],[1540404000000,0.312],[1540404900000,0.996],[1540405800000,0.456],[1540406700000,0.468],[1540407600000,0.828],[1540408500000,0.78],[1540409400000,0.92],[1540410300000,0.676],[1540411200000,0.544],[1540412100000,0.484],[1540413000000,0.48],[1540413900000,0.516],[1540414800000,0.46],[1540415700000,0.592],[1540416600000,0.488],[1540417500000,0.516],[1540418400000,0.492],[1540419300000,0.592],[1540420200000,0.444],[1540421100000,0.516],[1540422000000,0.48],[1540422900000,0.496],[1540423800000,0.464],[1540424700000,0.476]]},{"name":"Activa","stack":0,"type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.288],[1540253700000,0.608],[1540254600000,0.48],[1540255500000,0.288],[1540256400000,0.384],[1540257300000,0.384],[1540258200000,0.496],[1540259100000,0.512],[1540260000000,0.304],[1540260900000,0.288],[1540261800000,0.528],[1540262700000,0.56],[1540263600000,0.32],[1540264500000,0.288],[1540265400000,0.432],[1540266300000,0.528],[1540267200000,0.416],[1540268100000,0.288],[1540269000000,0.384],[1540269900000,0.448],[1540270800000,0.48],[1540271700000,0.352],[1540272600000,0.352],[1540273500000,0.32],[1540274400000,0.48],[1540275300000,0.528],[1540276200000,0.304],[1540277100000,0.128],[1540278000000,0.24],[1540278900000,0.32],[1540279800000,0.016],[1540280700000,0.432],[1540281600000,0.4],[1540282500000,0.384],[1540283400000,0.608],[1540284300000,0.64],[1540285200000,0.16],[1540286100000,0.304],[1540287000000,0.224],[1540287900000,0.112],[1540288800000,0],[1540289700000,0.192],[1540290600000,0.784],[1540291500000,0.736],[1540292400000,0.128],[1540293300000,0.16],[1540294200000,0.256],[1540295100000,0.912],[1540296000000,0.224],[1540296900000,0.032],[1540297800000,0.256],[1540298700000,0.32],[1540299600000,0],[1540300500000,0],[1540301400000,0.336],[1540302300000,0.256],[1540303200000,0.048],[1540304100000,0.096],[1540305000000,0.176],[1540305900000,0.256],[1540306800000,0.416],[1540307700000,1.856],[1540308600000,1.792],[1540309500000,2.16],[1540310400000,3.152],[1540311300000,1.968],[1540312200000,1.888],[1540313100000,1.984],[1540314000000,2.256],[1540314900000,1.36],[1540315800000,0],[1540316700000,0.528],[1540317600000,0.352],[1540318500000,1.344],[1540319400000,0.048],[1540320300000,0.304],[1540321200000,0.32],[1540322100000,0.368],[1540323000000,0.384],[1540323900000,0.352],[1540324800000,0.368],[1540325700000,0.496],[1540326600000,0.48],[1540327500000,0.32],[1540328400000,0.304],[1540329300000,0.544],[1540330200000,0.544],[1540331100000,0.304],[1540332000000,0.304],[1540332900000,0.496],[1540333800000,0.512],[1540334700000,0.368],[1540335600000,0.384],[1540336500000,0.32],[1540337400000,0.496],[1540338300000,0.528]]},{"name":"Reactiva","stack":1,"type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.416],[1540253700000,0],[1540254600000,0],[1540255500000,0.416],[1540256400000,0.272],[1540257300000,0.24],[1540258200000,0],[1540259100000,0.096],[1540260000000,0.384],[1540260900000,0.416],[1540261800000,0.064],[1540262700000,0],[1540263600000,0.352],[1540264500000,0.416],[1540265400000,0.208],[1540266300000,0],[1540267200000,0.112],[1540268100000,0.4],[1540269000000,0.256],[1540269900000,0.096],[1540270800000,0],[1540271700000,0.272],[1540272600000,0.304],[1540273500000,0.352],[1540274400000,0],[1540275300000,0.08],[1540276200000,0.384],[1540277100000,0.48],[1540278000000,0.24],[1540278900000,0.048],[1540279800000,0.512],[1540280700000,0.496],[1540281600000,0.256],[1540282500000,0.192],[1540283400000,0.4],[1540284300000,0.432],[1540285200000,0.432],[1540286100000,0.224],[1540287000000,0.24],[1540287900000,0.448],[1540288800000,0.56],[1540289700000,0.288],[1540290600000,0.048],[1540291500000,0.448],[1540292400000,0.464],[1540293300000,0.384],[1540294200000,0.208],[1540295100000,0.528],[1540296000000,0.4],[1540296900000,0.56],[1540297800000,0.224],[1540298700000,0.064],[1540299600000,0.56],[1540300500000,0.56],[1540301400000,0.16],[1540302300000,0.176],[1540303200000,0.48],[1540304100000,0.464],[1540305000000,0.368],[1540305900000,0.208],[1540306800000,0.256],[1540307700000,0.016],[1540308600000,0.08],[1540309500000,0.016],[1540310400000,0],[1540311300000,0],[1540312200000,0.064],[1540313100000,0.096],[1540314000000,0],[1540314900000,0.176],[1540315800000,0.56],[1540316700000,0.736],[1540317600000,0.032],[1540318500000,1.136],[1540319400000,0.592],[1540320300000,0.48],[1540321200000,0.256],[1540322100000,0.08],[1540323000000,0.256],[1540323900000,0.32],[1540324800000,0.272],[1540325700000,0],[1540326600000,0.128],[1540327500000,0.384],[1540328400000,0.416],[1540329300000,0.032],[1540330200000,0.032],[1540331100000,0.416],[1540332000000,0.416],[1540332900000,0.128],[1540333800000,0],[1540334700000,0.288],[1540335600000,0.288],[1540336500000,0.368],[1540337400000,0],[1540338300000,0.08]]},{"name":"Aparente","stack":2,"type":"column","xAxis":1,"pointStart":"1540252800000","data":[[1540252800000,0.504],[1540253700000,0.608],[1540254600000,0.48],[1540255500000,0.504],[1540256400000,0.472],[1540257300000,0.452],[1540258200000,0.496],[1540259100000,0.52],[1540260000000,0.488],[1540260900000,0.504],[1540261800000,0.532],[1540262700000,0.56],[1540263600000,0.476],[1540264500000,0.504],[1540265400000,0.48],[1540266300000,0.528],[1540267200000,0.432],[1540268100000,0.492],[1540269000000,0.46],[1540269900000,0.46],[1540270800000,0.48],[1540271700000,0.444],[1540272600000,0.464],[1540273500000,0.476],[1540274400000,0.48],[1540275300000,0.536],[1540276200000,0.488],[1540277100000,0.496],[1540278000000,0.34],[1540278900000,0.324],[1540279800000,0.512],[1540280700000,0.656],[1540281600000,0.476],[1540282500000,0.428],[1540283400000,0.728],[1540284300000,0.772],[1540285200000,0.46],[1540286100000,0.376],[1540287000000,0.328],[1540287900000,0.46],[1540288800000,0.56],[1540289700000,0.348],[1540290600000,0.784],[1540291500000,0.86],[1540292400000,0.48],[1540293300000,0.416],[1540294200000,0.328],[1540295100000,1.052],[1540296000000,0.46],[1540296900000,0.56],[1540297800000,0.34],[1540298700000,0.328],[1540299600000,0.56],[1540300500000,0.56],[1540301400000,0.372],[1540302300000,0.312],[1540303200000,0.484],[1540304100000,0.472],[1540305000000,0.408],[1540305900000,0.328],[1540306800000,0.488],[1540307700000,1.856],[1540308600000,1.792],[1540309500000,2.16],[1540310400000,3.152],[1540311300000,1.968],[1540312200000,1.888],[1540313100000,1.988],[1540314000000,2.256],[1540314900000,1.372],[1540315800000,0.56],[1540316700000,0.904],[1540317600000,0.352],[1540318500000,1.76],[1540319400000,0.592],[1540320300000,0.568],[1540321200000,0.408],[1540322100000,0.376],[1540323000000,0.46],[1540323900000,0.476],[1540324800000,0.456],[1540325700000,0.496],[1540326600000,0.496],[1540327500000,0.5],[1540328400000,0.516],[1540329300000,0.544],[1540330200000,0.544],[1540331100000,0.516],[1540332000000,0.516],[1540332900000,0.512],[1540333800000,0.512],[1540334700000,0.468],[1540335600000,0.48],[1540336500000,0.488],[1540337400000,0.496],[1540338300000,0.536]]}]
});
To create a chart with a series that you want to compare (data from one day in your example) you can set the same date for the particular points and use the tooltip to present the precise date. Check simplified demo I posted you below.
Code:
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
xAxis: [{
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
}],
yAxis: {
visible: true,
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
format: "{value}",
align: "right"
},
},
tooltip: {
pointFormatter: function() {
var timestamp = this.series.userOptions.pointStart,
date = Highcharts.dateFormat('%b %e, %Y', +timestamp);
return '<span style="color:' + this.series.color + '">' + this.series.name + ' - ' + date + '</span>: <b>' + Highcharts.numberFormat(this.y, 2) + '</b><br/>';
},
xDateFormat: '%H:%M'
},
legend: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [{
"name": "Activa",
"type": "spline",
"xAxis": 0,
"pointStart": "1540339200000",
"data": [
[1540339200000, 0.352],
[1540340100000, 0.288],
[1540341000000, 0.464],
]
}, {
"name": "Reactiva",
"type": "spline",
"xAxis": 0,
"pointStart": "1540339200000",
"data": [
[1540339200000, 0.352],
[1540340100000, 0.416],
[1540341000000, 0.096],
]
}, {
"name": "Aparente",
"type": "spline",
"xAxis": 0,
"pointStart": "1540339200000",
"data": [
[1540339200000, 0.496],
[1540340100000, 0.504],
[1540341000000, 0.472],
]
}, {
"name": "Activa",
"type": "column",
"xAxis": 0,
"pointStart": "1540252800000",
"data": [
[1540339200000, 0.288],
[1540340100000, 0.608],
[1540341000000, 0.48],
]
}, {
"name": "Reactiva",
"type": "column",
"xAxis": 0,
"pointStart": "1540252800000",
"data": [
[1540339200000, 0.416],
[1540340100000, 0],
[1540341000000, 0],
]
}, {
"name": "Aparente",
"type": "column",
"xAxis": 0,
"pointStart": "1540252800000",
"data": [
[1540339200000, 0.504],
[1540340100000, 0.608],
[1540341000000, 0.48],
]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/9cye2qrm/
Investigating thoroughly, I found out that it is not possible to show 2 X-axis in the same "Navigator" component. Therefore, I had to find another solution.
What I did was to take the new extremes when modifying the zoom of the range in the "Navigator" and set them to the upper axis, in the following way:
xAxis: [{
type: 'datetime',
events: {
afterSetExtremes() {
let bottomAxis = this,
topAxis = this.chart.xAxis[1],
diferenciaMin = Math.abs(bottomAxis.dataMin - bottomAxis.min),
diferenciaMax = Math.abs(bottomAxis.dataMax - bottomAxis.max);
topAxis.setExtremes(topAxis.dataMin + diferenciaMin, topAxis.dataMax - diferenciaMax, true)
}
}
}, {
type: 'datetime',
opposite: true,
}],
The logic is simple. I also leave the official documentation of the afterSetExtremes() function:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

Highchart hide a category and rescale is messing

I'm trying to draw a chart where categories can be filtered, and it's working pretty nicely, I used this to do it.
Problem is : my last category is the total of the others, and so is taller. I want that when the "total" checkbox is unchecheck the chart resize, but it doesn't and resize only if I also uncheck the "class7" checkbox.
you can try it here : https://jsfiddle.net/4rfdgvum/
var chart=null;
$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'column',
shadow: true
},
title: {
text: 'My Title'
},
xAxis: {
categories: [{"class":"class1","name":"cat1"},{"class":"class2","name":"cat2"},{"class":"class3","name":"cat3"},{"class":"class4","name":"cat4"},{"class":"class5","name":"cat5"},{"class":"class6","name":"cat6"},{"class":"class7","name":"cat7"},{'class': 'total','name':'total'}],
labels: {
formatter: function() {
return this.value.name;
},
useHTML: true
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Numbers'
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x.name + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function(){
return Highcharts.numberFormat(this.percentage,0) + '%';
}
}
}
},
series: [{
name: 'Ok',
color: 'green',
stack: 'a',
data: [
223,174,139,27,17,6,3,589 ]
},
{
name: 'Not Ok',
color: 'red',
stack: 'a',
data: [
21,29,26,14,15,11,11,127 ]
},
{
name: 'Partialy Ok',
color:'orange',
stack: 'a',
data: [
5,11,25,1,1,3,0,46 ]
},
{
name: 'Not usable',
color:'grey',
stack: 'a',
data: [
20,70,67,160,163,170,168,818 ]
},
{
name: 'Not done',
color:'brown',
stack: 'a',
data: [
173,158,185,240,246,252,260,1514 ]
}
]
}, function() {
$('input[type=checkbox]').bind('click', function() {
togglePointsByClass(this.value, $(this).is(':checked'), chart)
});
});
var visibleArr = [0,1,2,3,4,5,6,7];
function togglePointsByClass(className, shouldShow, chart) {
var isChartDirty = false;
if (shouldShow) {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className) {
visibleArr.push(i);
}
});
} else {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className && visibleArr.indexOf(i) > -1) {
visibleArr.splice(visibleArr.indexOf(i), 1);
}
});
}
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
})
}
}
$('#container').highcharts().redraw();
});
Thanks
You can use axis.setExtremes() for setting max of the yAxis.
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
}, false, false);
const max = visibleArr.reduce((a, b) => Math.max(chart.yAxis[0].stacks.columna[b].total, a), -Infinity)
chart.yAxis[0].setExtremes(0, max);
}
example: https://jsfiddle.net/mw7euo1a/

How to open multiple level drilldown in highcharts programatically?

I have this code for my chart
angular.module('myModule', []).service("CompOffLeaveService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "/Dashboard/GetCompOffLeaveReport",
params: [{ YearID: $("#YearIn option:selected").text() }],
dataType: "json"
});
};
}).controller('myController', function (CompOffLeaveService) {
GetAlldata();
function GetAlldata() {
var getCompOffLeaveData = CompOffLeaveService.getdata();
getCompOffLeaveData.then(function (NoOfLeaves) {
var myData = new Array();
for (var j = 0; j < NoOfLeaves.data.TeamNames.length; j++) {
debugger;
if (NoOfLeaves.data.TeamNames[j] != null) {
myData[j] = [
NoOfLeaves.data.TeamNames[j],
NoOfLeaves.data.TeamWiseCompOffLeaves[j]
];
}
else { break; }
}
var mySeries = [];
for (var i = 0; i < myData.length; i++) {
mySeries.push({ name: myData[i][0], y: myData[i][1], drilldown: true });
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Comp Off Leave Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total CompOffLeave Recorded'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}COL'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} COL</b> in total<br/>',
},
series: [{
name: 'Team',
colorByPoint: true,
data: mySeries
}],
drilldown: {
series: []
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "home";
});
$(function () {
$("#draggable").draggable({ axis: "y", containment: "#parent", scroll: false, revert: true });
$("#resizable").resizable();
});
});
it is working perfectly well and gives me this output
what I want is to open a drilldown on any column click which will be having all months of the year e.g:
and on further drilldown I want this.e.g:
I can pass the data then..but drilldown is not getting open.

Show only two axis values in highcharts

I would like to show just the 2GB and the 4GB values (just 2 values) in the y-axis of this chart (see jsFiddle):
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Size']
},
yAxis: {
min: 0,
max: 4294967296,
labels: {
formatter: function() {
var maxElement = this.axis.max;
var kb = 1024, mb = 1048576, gb = 1073741824;
if (maxElement > gb) {
return (this.value / gb).toFixed(1) + " GB";
} else if (maxElement > mb) {
return (this.value / mb).toFixed(1) + " MB";
} else if (maxElement > kb) {
return (this.value / kb).toFixed(1) + " KB";
} else {
return (this.value) + " B";
}
}
},
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + filesize(this.y);
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Versioned trees',
data: [94371840]
}, {
name: 'Metadata',
data: [115343360]
}, {
name: 'Data',
data: [1395864371.2]
}]
});
});
Is it possible?
You can use the tickPositions property, like this:
tickPositions:[0, 1073741824 * 2, 1073741824 * 4]
It doesn't appear to respect the min:0 if you don't include 0, but you can hide the 0 label by adding:
showFirstLabel: false
Updated Fiddle:
http://jsfiddle.net/jlbriggs/kv684von/2/
Reference:
http://api.highcharts.com/highcharts#yAxis.tickPositions

Highcharts redraw not working with alignTicks

I have updated from version 2.1.6 to 4.0.4 and I have problem with refreshing the alignTicks option.
I start with the property at true and then I set it to false via a button.
From true to false the graph is only updated after a windows resize or if I disable/enable one set of data. From false back to true then it work correctly...
Here an example:
chart = new Highcharts.Chart({
'chart': {
'renderTo': 'graph',
'type': 'line',
'zoomType': 'x',
'alignTicks': true
},
'tooltip': {
'formatter': function () {
var d = new Date(this.x);
return 'Time: <b>' + ('0' + d.getUTCHours()).slice( - 2) + ':' + ('0' + d.getUTCMinutes()).slice( - 2) + ':' + ('0' + d.getUTCSeconds()).slice( - 2) + '</b><br/> Value: <b>' + this.y + '</b>';
}
},
'credits': false,
'title': {
'text': 'Date: 04-11-2014 - Location: Locale'
},
'xAxis': {
'type': 'datetime'
},
'yAxis': [
{
'title': {
'text': 'SK_angle',
'style': {
'color': '#4572A7'
}
},
'labels': {
'style': {
'color': '#4572A7'
}
},
'opposite': false,
'allowDecimals': true
},
{
'title': {
'text': 'EL_angle',
'style': {
'color': '#AA4643'
}
},
'labels': {
'style': {
'color': '#AA4643'
}
},
'opposite': true,
'allowDecimals': true
},
{
'title': {
'text': 'Software Status',
'style': {
'color': '#89A54E'
}
},
'labels': {
'style': {
'color': '#89A54E'
}
},
'opposite': false,
'allowDecimals': false
}
],
'series': [
{
'color': '#4572A7',
'name': 'SK_angle',
'yAxis': 0,
'data': [
[1415064918000,305.89],
[1415064919000,335.0],
[1415064923000,306.05],
]
},
{
'color': '#AA4643',
'name': 'EL_angle',
'yAxis': 1,
'data': [
[1415064918000,37.87],
[1415064919000,37.2],
[1415064923000,37.9],
]
},
{
'color': '#89A54E',
'name': 'Software Status',
'yAxis': 2,
'data': [
[1415064918000,1362],
[1415064919000,1362],
[1415064923000,1256],
]
}
]
});
$('#scaleAlign').click(function() {
if (chart.options.chart.alignTicks) {
chart.options.chart.alignTicks = false;
$('#scaleAlign').attr('value','Align Scale');
}
else {
chart.options.chart.alignTicks = true;
$('#scaleAlign').attr('value','Unalign Scale');
}
chart.isDirtyBox = true;
chart.redraw();
});
http://jsfiddle.net/04Lffe0r/3/
Update the code like this: http://jsfiddle.net/04Lffe0r/4/
By adding this:
chart.series[0].isDirty = true;
Because the series should be set as dirty for the chart to redraw.

Resources