I'm using highstock/highcharts, and plotting a stacked (and grouped) column, based on the last 5 minutes.
I want to highlight the last minute (and have been using a plotband for that).
My problem is that the plotband will not cover the whole time range, as you can see in http://jsfiddle.net/duuuE/1/
What I want the plotband to cover is the last minute (up until the current timestamp), but using stacked/grouped columns makes it weird, because the columns are not drawn at the corresponding x-axis tick that corresponds to the timestamp.
Code is this:
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var now = new Date().getTime();
var last10min = now - (10 * 60 * 1000);
var lastMin = now - (60 * 1000);
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
minTickInterval: 60 * 1000,
tickMarkPlacement: 'on',
plotBands: [{ // highlight last minute
color: '#FCFFC5',
from: lastMin,
to: now
}],
},
plotOptions: {
series: {
pointStart: last10min,
pointInterval: 60 * 1000 // one minute
},
column: {
stacking: 'normal',
pointPlacement: 'between'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]
});
});
I think you need to remove pointPlacement from your options, see: http://jsfiddle.net/Fusher/duuuE/2/
Reported issue to bug tracker.
Possible workaround: http://jsfiddle.net/duuuE/7/
Related
Here is an example: http://jsfiddle.net/sxm38nsj/4/
When the xAxis is a string, I can get the index of click point.
But when the xAxis is datetime, how can I get the index? Or how can I trigger the point's click events?
eg:http://jsfiddle.net/sxm38nsj/5/
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
click:function(e){
var column = Math.abs(Math.round(e.xAxis[0].value));
alert('bland:',column);
this.series[0].data[column].firePointEvent('click', event);
}
}
},
xAxis: {
type: 'datetime'
},
plotOptions: {
column: {
//pointPadding: 0.2,
//borderWidth: 0
point:{
events:{
click: function(){
alert(this.x);
console.log(this);
}
}
}
}
},
series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
});
You can use built-in method series.searchPoint() to find closest point to the mouse (or rather event) position, for example: http://jsfiddle.net/sxm38nsj/6/
chart: {
type: 'column',
events: {
click: function(e) {
var chart = this;
point = chart.series[0].searchPoint(chart.pointer.normalize(e));
if (point) {
point.firePointEvent('click', event);
}
}
}
},
Another solution is to find closest point to your column value. You can search series.xData array, to get index of the closest point to the mouse event.
I has series like this
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 19552.1, 95.6, 54.4]
}]
you can see that I has small points (29.9, 71.5) in this series and other (19552.1) has larger than small point
that make I cant click in small point
how can I deal with this problem
you can see this jsfiddle to know what I mean
Or You could set a minimum length for the columns using the ´minPointLength´ option
http://api.highcharts.com/highcharts#plotOptions.column.events.click
minPointLength: 0,
jsfiddle
how about to use logarithmic yAxis
http://jsfiddle.net/xLcmojzr/2/
$(function () {
$('#container').highcharts({
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});
Is there a way to show all days at the X axis in this case? Even if i force the minTickInterval to one day highcharts dont show all days.
Fiddle example
$(function () {
$('#container').highcharts({
chart: {type: "column", inverted: true,
},
xAxis: {
type: 'datetime'
},
plotOptions: {
series: {
pointInterval: 24 * 3600 * 1000,
pointRange: 24 * 3600 * 1000
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
});
Datetime axes are based on milliseconds, so an interval of one hour is: 3600 * 1000.
The solution above does not work in charts of type: area.
So if your xAxis is in days you could use:
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000
}
What you need is tickInterval in xAxis:
xAxis: {
type: 'datetime',
tickInterval: 1
}
Updated your jsFiddle here: http://jsfiddle.net/NR8vG/1/
I'm trying to create a spider chart with a plot band that runs up against the outer edge of the circular border. Unfortunately, no matter what I try (yAxis max, yAxis maxPadding, plotBand thickness....) (tested in Firefox and Chrome), it ends up with some white space in between the yAxis max and the edge of the chart. I'm creating a bullseye pattern in my actual application, which looks fine except for the whitespace.
edit: the problem is not that I cannot fill in this whitespace (I can if I just increase the plotBand end to beyond the yAxis.max. The problem is that this area exists at all--I also want the last point to go up to the edge of the chart, so the inner plot bands are not shrunken to scale.
In this example, there's also whitespace in the middle of the circle--that's ok.
http://jsfiddle.net/XEte8/
html:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
javascript:
$(function () {
$('#container').highcharts({
chart: {
polar:true
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 0,
to: 250,
}],
max:250,
endOnTick:true,
maxPadding:0,
minPadding:0,
startOnTick:true,
tickmarkPlacement:"on"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
What you need is configure tickInterval
javascript:
$(function () {
$('#container').highcharts({
chart: {
polar:true,
marginTop: 10
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 100,
to: 250,
}],
max:250,
tickInterval: 50,
startOnTick:true,
tickmarkPlacement:"on"
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
jsfiddle: http://jsfiddle.net/Ng3s5/
If the endOnTick option is true, max will sometimes be rounded up. I updated your fiddle with endOnTick:false:
http://jsfiddle.net/XEte8/1/
In this example JFiddle Link. I want to apply a colored area for a plotted/selected date period. For example, if I select points 1 to 10, the background of these points should be highlighted.
var $report = $('#report');
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
selection: function(event) {
if (event.xAxis) {
var min = Math.ceil( event.xAxis[0].min ),
max = Math.ceil( event.xAxis[0].max ),
data = this.series[0].data,
list = [];
$('#report').empty();
for(i=min; i<max; i++)
list.push('<li>x: '+data[i].x+', y: '+data[i].y+'</li>');
$('#report').append( list.join('') );
}
return false;
}
},
zoomType: 'x'
},
xAxis: {
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
All you need to do is to add the PlotBand in your selection event.
chart.xAxis[0].removePlotBand('plot-band-1');
chart.xAxis[0].addPlotBand({
from: min,
to: max,
color: '#FCFFC5',
id: 'plot-band-1'
});
Example here. API for your reference.
Hope this helps.