highchart line don't show line even when data points exists - highcharts
I have an issue with highcharts of type 'spline'
I've sent data to the chart and even that the data exist the chart line seems to be cut at random parts
more ever between null points on the graph a line is drawn(the drop on the 12/06/16 in the black series) so it isn't a null issue. and I've got no errors on my console.
this is my graph init:
getChartElement().highcharts({
exporting: {enabled: false},
chart: {
type: 'spline',
zoomType: 'x',
events: {
selection: rangeSelection
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br>' +
Highcharts.dateFormat('%e %b %Y %H:%M', this.x) + '<br>' +
Highcharts.numberFormat(this.y, 2);
}
},
series: series,
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
labels: {
format: '{value:%m/%d/%y}'
},
events: {},
plotLines: [{
value: vm.issueDate,
width: 1,
color: 'green',
dashStyle: 'dash',
zIndex: 5,
}]
},
yAxis: {},
plotOptions: {
series: {
turboThreshold: configuration.maxGraphPoints
},
spline: {
marker: {
enabled: vm.isMarkersVisible
}
}
}
});
I can't seem to find a reason for the gaps in the graph. has anyone seen something like this before?
EDIT:
I've changed the image to another more concentrated , and added the data for this graph
screenshot of the issue I should say that in the screen shot there is one point but there are a lot more around it, they should have option for a screenshot gif :)
the data:
"{"tags":["Series1","Series2"],"data":[[1483436500000,34.219906,56.668186000000006],[1483439200000,34.047556,57.155266],[1483441900000,34.068456,57.649016],[1483444600000,34.050936,58.448235999999994],[1483447300000,34.316396,58.039416],[1483450000000,34.546116,58.428616000000005],[1483452700000,34.743466,58.722346],[1483455400000,34.850176,58.737145999999996],[1483458100000,35.050486,58.115166],[1483460800000,35.002866,57.522126],[1483463500000,34.855796,55.661925999999994],[1483466200000,34.796566,55.579976],[1483468900000,34.914366,55.925126000000006],[1483471600000,35.037526,56.223866],[1483474300000,35.008276,55.952646],[1483477000000,34.938055999999996,55.601265999999995],[1483479700000,34.946396,57.74743599999999],[1483482400000,34.860726,56.422796000000005],[1483485100000,34.749856,56.456556000000006],[1483487800000,34.734536,56.02268599999999],[1483490500000,34.710696,55.649186],[1483493200000,34.755316,55.868066],[1483495900000,34.801966,56.07148599999999],[1483498600000,35.175086,55.311626000000004],[1483501300000,34.868296,55.749516],[1483504000000,34.498436,56.425416],[1483506700000,34.526066,56.405936],[1483509400000,34.495226,56.905456],[1483512100000,34.736996,57.665266],[1483514800000,34.403805999999996,56.243786],[1483517500000,34.445266,57.025186000000005],[1483520200000,34.474966,58.428715999999994],[1483522900000,34.225066,59.531206],[1483525600000,33.961646,60.677266],[1483528300000,33.786636,61.355536],[1483531000000,33.875166,60.646305999999996],[1483533700000,33.905626,62.193096],[1483536400000,33.937476,61.098146],[1483539100000,34.293316,59.28490599999999],[1483541800000,34.530886,59.912486],[1483544500000,34.782956,59.955256000000006],[1483547200000,35.121126,61.357696000000004],[1483549900000,34.718436,61.931906],[1483552600000,35.711916,57.322496],[1483555300000,35.475236,57.541686],[1483558000000,35.481466,56.810136],[1483560700000,35.040016,56.614756],[1483563400000,35.030556,59.863856],[1483566100000,34.920466,56.529756000000006],[1483568800000,35.050486,58.436576],[1483571500000,35.050486,57.734145999999996],[1483574200000,35.156616,57.434805999999995],[1483576900000,35.154466,57.73637599999999],[1483579600000,35.101836,58.059096],[1483582300000,35.051496,57.998926],[1483585000000,34.998855999999996,58.298096],[1483587700000,34.911516,58.426916000000006],[1483590400000,35.028296,58.00146599999999],[1483593100000,34.748786,58.137996],[1483595800000,34.739406,57.887506],[1483598500000,34.808656,58.491716],[1483601200000,34.785016,57.416966],[1483603900000,34.971316,57.39732599999999],[1483608700000,null,64.130136],[1483609300000,34.633606,null],[1483611400000,null,53.998146000000006],[1483612000000,35.536296,null],[1483614100000,null,56.150756],[1483614700000,35.490406,null],[1483616800000,null,56.581025999999994],[1483617400000,35.243436,null],[1483619500000,null,57.063676],[1483620100000,35.638996,null],[1483622200000,null,57.347356000000005],[1483622800000,35.638996,null],[1483624900000,null,58.504306],[1483625500000,35.940726,null],[1483627600000,null,58.529796000000005],[1483628200000,36.022656,null],[1483630300000,null,56.503736],[1483630900000,36.081686,null],[1483633000000,null,55.968286000000006],[1483633600000,36.372056,null],[1483635700000,null,56.637946],[1483636300000,36.719646,null],[1483638400000,null,55.93278599999999],[1483639000000,36.721016,null],[1483641100000,null,54.665316000000004],[1483641700000,36.902646,null],[1483643800000,null,54.823786],[1483644400000,37.109685999999996,null],[1483646500000,null,54.314856000000006],[1483647100000,37.317226,null],[1483649200000,null,54.75750600000001],[1483649800000,37.364876,null],[1483651900000,null,54.618516],[1483652500000,36.959966,null],[1483654600000,null,54.384485999999995],[1483655200000,37.191016,null],[1483657300000,null,53.986126],[1483657900000,37.354926,null],[1483660000000,null,53.833296000000004],[1483660600000,37.128735999999996,null],[1483662700000,null,53.708625999999995],[1483663300000,37.340576,null],[1483665400000,null,53.942555999999996],[1483666000000,37.298246,null],[1483668100000,null,54.327676],[1483668700000,37.344015999999996,null],[1483670800000,null,52.919466],[1483671400000,37.384856,null],[1483673500000,null,52.566205999999994],[1483674100000,36.876546,null],[1483676200000,null,51.773675999999995],[1483676800000,36.821936,null],[1483678900000,null,51.389706000000004],[1483679500000,36.769695999999996,null],[1483681600000,null,53.077135999999996],[1483682200000,36.648186,null],[1483684300000,null,52.533496],[1483684900000,36.490846,null],[1483687000000,null,51.950295999999994],[1483687600000,36.326346,null],[1483689700000,null,53.609016],[1483690300000,36.595346,null],[1483692400000,null,52.940315999999996],[1483693000000,36.005396,null],[1483695100000,null,52.44433599999999],[1483695700000,36.063386,null],[1483697800000,null,51.514185999999995],[1483698400000,35.950686,null],[1483700500000,null,53.019206],[1483701100000,35.888916,null],[1483703200000,null,52.924876],[1483703800000,35.708086,null],[1483705900000,null,53.430285999999995],[1483706500000,35.610226,null],[1483708600000,null,54.919156],[1483709200000,35.826046,null],[1483711300000,null,56.011066],[1483711900000,35.954396,null],[1483714000000,null,60.86370599999999],[1483714600000,36.206146,null],[1483716700000,null,63.932226],[1483717300000,36.553256,null],[1483719400000,null,65.751636],[1483720000000,36.376646,null],[1483722100000,null,66.588736],[1483722700000,36.469485999999996,null],[1483724800000,null,65.012736],[1483725400000,36.719015999999996,null],[1483727500000,null,64.805766],[1483728100000,36.722796,null],[1483730200000,null,65.033006],[1483730800000,36.890826,null],[1483732900000,null,65.026316],[1483733500000,36.523786,null],[1483735600000,null,62.355006],[1483736200000,35.250296,null],[1483738300000,null,61.885886],[1483738900000,35.068205999999996,null],[1483741000000,null,62.914156000000006],[1483741600000,35.159856,null],[1483743700000,null,61.454406000000006],[1483744300000,35.295906,null],[1483746400000,null,60.997966000000005],[1483747000000,35.431956,null],[1483749100000,null,60.864366000000004],[1483749700000,35.568706,null],[1483751800000,null,60.33397599999999],[1483752400000,35.612716,null],[1483754500000,null,60.226226],[1483755100000,35.638996,null],[1483757200000,null,60.695226000000005],[1483757800000,35.638996,null],[1483759900000,null,60.044976000000005],[1483760500000,35.747096,null],[1483762600000,null,59.267495999999994],[1483763200000,35.906606,null],[1483765300000,null,60.225086000000005],[1483765900000,35.473906,null],[1483768000000,null,60.19800599999999],[1483768600000,35.141326,null],[1483770700000,null,60.319676],[1483771300000,34.927346,null],[1483773400000,null,60.239565999999996],[1483774000000,34.828386,null],[1483776100000,null,60.844066],[1483776700000,34.708716,null],[1483778800000,null,60.570926],[1483779400000,34.583616,null],[1483781500000,null,60.19209599999999],[1483782100000,34.463946,null],[1483784200000,null,61.080535999999995],[1483784800000,34.531076,null],[1483786900000,null,62.448046000000005],[1483787500000,34.557726,null],[1483789600000,null,62.603616],[1483790200000,34.583225999999996,null],[1483792300000,null,63.707105999999996],[1483792900000,34.602586,null],[1483795000000,null,63.756426000000005],[1483795600000,34.631766,null],[1483797700000,null,64.362686],[1483798300000,34.585755999999996,null],[1483800400000,null,63.391046],[1483801000000,34.893546,null],[1483803100000,null,63.281465999999995],[1483803700000,34.780836,null],[1483805800000,null,62.069226],[1483806400000,34.830476,null],[1483808500000,null,61.197186],[1483809100000,35.012096,null],[1483811200000,null,61.948235999999994],[1483811800000,35.077906,null],[1483813900000,null,62.346136],[1483814500000,35.009746,null],[1483816600000,null,60.837086],[1483817200000,35.134366,null],[1483819300000,null,62.107156],[1483819900000,35.204375999999996,null],[1483822000000,null,62.358816000000004],[1483822600000,35.244596,null],[1483824100000,35.265586,61.764275999999995]]}"
Since a lot of your values are null these will create gaps in your series. To avoid this, set connectNulls to true in your plotOptions, which will tell highchart to graph even when there is a null.
API ref on spline.connectNulls: https://api.highcharts.com/highcharts/plotOptions.spline.connectNulls
Edit:
Working example: https://jsfiddle.net/y5ygdx2a/2/
Related
Display start and end date range in timeseries LineChart using HighCharts
I have a simple line chart where I am trying to display time series data which have start and end. Like this
{"beginTimeSeconds": 1626145840, "endTimeSeconds": 1626232240, "totalTimeInSeconds": 0, "uri": "/logout"}
However, as per HighChart config timeseries only accept one timestamp like this.
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: 'Test',
data: [
[1167609600000, 0.7537], // Only one timestamp
[1167696040000, 0.7537] // Only one timestamp
]
}]
});
Is there any way to pass range so that tooltip shows Start date - end date followed by value.
So by default in Highcharts, your point contains 4 main attributes which you can specify. Its x and y value, its name, and color. API reference: https://api.highcharts.com/highcharts/series.line.data
If you'd like your point to have some more attributes you can add them and e.g use one of them in the tooltip. Something like that: https://jsfiddle.net/BlackLabel/k49z8mv0/
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return 'Point value is: ' + this.y + '<br/>The total time in Second
equals: ' + this.point.totalTimeInSeconds + '<br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.point.beginTimeSeconds) + ' -
' + Highcharts.dateFormat('%Y-%m-%d', this.point.endTimeSeconds);
}
},
series: [{
type: 'line',
name: 'Test',
data: [{
x: 1167609600000,
y: 0.7537,
beginTimeSeconds: 1626145840,
endTimeSeconds: 1626232240,
totalTimeInSeconds: 0
},
{
x: 1167696040000,
y: 0.7537,
beginTimeSeconds: 1626145840,
endTimeSeconds: 1626232240,
totalTimeInSeconds: 1
}
]
}]
});
If that doesn't answer your question please precise what the issue is.
Highcharts histogram drilldown: set options for drilldown + first and last column cut-off
I have a game with 3 difficulties and I show their averages in a first graph. Now I want to use drilldown to show a spread of the scores for each difficulty in a histogram. I managed to get this working but I have two problems. First of all I use update to change the setting for the drilldown graphs, but then these settings also change for the first graph and thus I was wondering what the better way would be to do this.
My other problem is that in my histogram the first and last column are cut in half and only half is shown, but I cant seem to find a way to solve this. I tried min- and maxPadding but this did not work.
chart of the tree difficulties
Histogram of one difficulty
https://jsfiddle.net/vlovlo/sng4jwv8/36/
Here is my code
Highcharts.chart('skippedPatients', {
chart: {
events: {
drilldown: function (e) {
this.update({
title: {text: "Skipped patient: " + e.point.name},
xAxis:{
title:{text: "Nr of skipped patients"},
tickmarkPlacement: 'on',
},
yAxis:{title:{text: "Nr of players"}},
plotOptions:{series:{pointPlacement: 'on'}},
});
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Histogram: Easy': {
name: 'Easy',
type: 'histogram',
baseSeries: 'avgSkippedEasy'
},
'Easy': {
id: 'avgSkippedEasy',
visible: false,
type: 'column',
data: skippedPatientsList
}
},
series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Skipped patients'
},
xAxis: {
type: 'category',
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Averages per difficulty',
colorByPoint: true,
type: 'column',
data: [{
name: 'Easy',
y: 5,
drilldown: true
}, {
name: 'Moderate',
y: 2,
drilldown: true
}, {
name: 'Hard',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
You should define your initial options as a variable and attach them again in the drillup callback due to you did a chart update with changed the initial options. Demo: https://jsfiddle.net/BlackLabel/5d1atnh7/
Issue with tooltip on Highcharts with multiple series added dynamically
Hello I am currently facing a problem with the tooltip on my chart which adds data dynamically through the use of Series.SetData() function of highcharts.
The issue however is not related to the data which is added I think but with the tooltip everytime I mouse over a point in the graph.
To better understand I will post two screenshots with the issue:
Whenever I mouse over a certain point in the graph the tooltip keeps changing and the values presented are the ones posted in the screenshots. If I drag the mouse away the tooltip that remains on the screen is the second one and I am no longer able to see the Y1 value.
I probably have some bad chart configuration so here is the code of my graph:
$(function () {
// Create the chart for node 1
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
events: {
load: requestDataNode1
},
},
credits: {
enabled: false
},
title: {
text: 'Live Data'
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
yAxis: {
labels: {
formatter: function () {
//return (this.value > 0 ? ' + ' : '') + this.value + '%';
return this.value;
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend:{ enabled: true},
plotOptions: {
series: {
showInNavigator: true
},
spline: {
turboThreshold: 0,
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2,
split: false
},
navigator: {
series: {
data: []
}
},
});
});
I do not know why this happens , at first I thought it could be related with not having a value for a series for a specific date but then I checked my series as you can see in the screenshots and there is indeed a value for both series.
I thank in advance for your help.
I somehow resolved this issue by adding the shared property in the tooltip property and setting to false, however now I only receive a single value. Is it possible to keep seeing all values?
Single-category column chart in Highcharts 3.0 beta
I am using a single xAxis category and 4 discrete data series (each one containing a single data item). Unfortunately, when I try to construct a simple ColumnChart using Highcharts 3.0 beta, the chart is never displayed:
chartB = new Highcharts.Chart({
chart: {
renderTo: 'containerB',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan' //Just one category
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9] //One data point for each series element.
}, {
name: 'New York',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [42.4]
}]
});
Please see http://jsfiddle.net/7CJhf/5/.
A workaround is to append an empty category ('') and a zero value to each series item, but this moves the column set to the left. Is there any proper workaround to create a column chart with Highcharts 3.0 beta, using single data points?
I've encountered this issue before issue 1535 with a stacked column of length 1. This is fixed in the lastest master branch highchart.src.js and highcharts-more.src.js. Try updating the script-references to the raw github references here, and it should work ok.
Highcharts Bar Extend past MaxValue
I want to make a simple bar chart in Highcharts. However, I would like the max value to be less than the actual maximum value in the series, and provide a visual clue that that is happening. If you referenced the highcharts demo: http://www.highcharts.com/demo/bar-basic I want the scale to end at 4,000, even though the longest bar extends to 4054. That part is easy, by just setting the Max. But, I want some visual indicator to let the user know that the bar extends beyond the max. This is for cases where the highest value in the series is so high, it makes it hard to see the other values in the graph relative to each other. We essentially don't need to be concerned by the outlier, but need to know it lies outside the axis. Thinking it through, I can set the ticks to be less than the max value, and end on tickInterval false. Is there another option?
Well but where this information should be displayed?
I've prepared simple example which marked this information in tooltip and in report div below chart.
http://jsfiddle.net/sbochan/8sKcs/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:4000,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
if(this.y > (this.series.chart.yAxis[0].max))
return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
else
return this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
},function(chart){
var max = chart.yAxis[0].max,
content = '<h2>Points</h2><br/>';
$.each(chart.series,function(i,serie){
$.each(serie.data,function(j,data){
if(data.y > max)
content += 'Point: '+data.y+' is bigger than max: '+max;
});
});
$('#report').html(content);
});
});
});
EDIT:
You can add also
data.graphic.attr({
fill:'yellow'
});
To change color of bar.