I want to know how to determine which rangeSelector button is selected in highstock.
my rangeSelector buttons:
buttons: [{
type: 'month',
count: 1,
text: '1 MONTH',
}, {
type: 'month',
count: 3,
text: '3 MONTH'
}, {
type: 'month',
count: 6,
text: '6 MONTH'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1 YEAR'
}, {
type: 'all',
text: 'ALL'
}],
for example I click on my first rangeSelector that is 1 MONTH. I want to know if this button is selected or not.
Is there any event?
Thanks
You can catch setExtremes() (http://api.highcharts.com/highstock#xAxis.events.setExtremes), and then in event obejct you have access to event.rangeSelectorButton object with count, text and type property.
xAxis: {
events: {
setExtremes: function(e) {
console.log(this);
if(typeof(e.rangeSelectorButton)!== 'undefined')
{
alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
}
}
}
},
http://jsfiddle.net/E6GHC/1/
You can get the a lot of information about the selected button directly from the rangeSelector.
For example:
var chart = $('#container').highcharts();
var selected = chart.rangeSelector.selected; // Index of selected button
var text = chart.rangeSelector.buttonOptions[selected].text; // Text of selected button
var type = chart.rangeSelector.buttonOptions[selected].type; // Type of selected button
And some other random information in buttonOptions and buttons under rangeSelector, using the selected index.
See this JSFiddle demonstration to see it in action.
Related
I am using highcharts (StockChart) to draw a timeline of events (X axis therefore represents a datetime) and my JS knowledge is extremely basic. Each event (represented as a bar/column) has some data attached which I show in a tooltip. My timeline has multiple types of event (= series) and it can happen that there is 2 or more events of different types that happen at the exact same time. So in other words, 2 points in the plot series share the same X axis value.
My issue is that in these cases I end up with a timeline that has 2 columns but only 1 tooltip containing a merge of the 2 piece of data.
Here is how it looks like right now:
hover any column
1.7xxxx represents the first column value
3.xxx represents the second column value
To be noted as well: the "snap" point is roughly in the middle of the 2 columns (the slim white vertical bar) instead of on the column itself, which is a bit weird on a UX standpoint.
What I want is to have them split so that each column has its own tooltip floating over the column like a regular scenario.
What I want it to look like (rough sketch):
hover left column
hover right column
Here is how I handle the chart:
return function (yaxisTitle, targetId, dataHighStock) {
// Line timeline chart
// create the chart
var config = {
chart: {
renderTo: targetId,
height: 269,
type: 'column'
},
plotOptions: {
column: {
cursor: 'pointer',
pointRange: 1,
pointPlacement: "on",
pointWidth: 10
}
},
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
millisecond: '%Y-%m-%d',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
offset: 30,
min: 0,
title: {
text: yaxisTitle
},
labels: {
enabled: true
}
},
rangeSelector: {
inputDateFormat: '%Y-%m-%d',
inputBoxStyle: {
left: '270px',
width: '250px'
},
selected: 5
},
tooltip: {
formatter: function () {
var s = '';
var examDate = new Date(this.x);
var month = examDate.getMonth() + 1;
var day = examDate.getDate();
s = examDate.getFullYear() + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day) + "<br />";
$.each(this.points, function (i, point) {
s += point.y+"<br>";
});
return s;
},
snap: 1
},
legend: {
y: 20,
x: 80,
enabled: true,
align: 'left',
layout: 'horizontal',
verticalAlign: 'top',
shadow: true
},
series: dataHighStock
};
//add series to navigator
new Highcharts.StockChart(config, function (loadedChart) {
for (var i = 0; i < dataHighStock.length; i++) {
loadedChart.addSeries($.extend({}, dataHighStock[i],
{
enableMouseTracking: false,
type: "spline",
xAxis: loadedChart.xAxis.length - 1,
yAxis: loadedChart.yAxis.length - 1,
color: loadedChart.options.colors[i],
showInLegend: false
}));
}
});
};
"dataHighStock" is just a regular json I pass, which looks something like this:
[ { type: "column", name: "Event Type 1", color: "#08A5E1", data: [ { x: 1431430804000, y: 1.7153846153846155, name: '1' }] }, { type: "column", name: "Event Type 2", color: "#772971", data: [ { x: 1431430804000, y: 3.63636, name: '14915'}] }, ]
I could make the tooltip "kinda" work (= 1 tooltip per column) when I changed the Highcharts creation to be done through Highcharts.chart(...) instead of Highcharts.StockChart(...) and removing the for loop in the navigator + removing the specific data displayed in the tooltip formatter ($.each(this.points, ......){...}). The downside to that is that I lose all the features of a StockChart (time range, navigator, etc.), obviously, but also the tooltip content.
Here is a jfiddle link that reproduces all this: https://jsfiddle.net/eq3mz7y1/20/
Changing the tooltip.split into false is a solution for your issue. Notice that this solution requires some changes in your formatter callback output because the this.points array doesn't exist anymore.
Demo: https://jsfiddle.net/BlackLabel/01sqhdyv/
API: https://api.highcharts.com/highcharts/tooltip.split
In Highcharts.js is it possible to disable/enable a given category by clicking on it? In the same way as you can disable/enable a given series in a legend by clicking on it.
If not, what is the next best alternative?
Disabling a category by clicking on it is not supported in Highcharts by default. To acheieve the wanted result you need to add custom code. For example, in render event you can add click event to xAxis labels and update the chart with new categories and data:
var H = Highcharts,
categories = ['one', 'two', 'three'],
data = [1, 2, 3];
chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this;
H.objectEach(chart.xAxis[0].ticks, function(tick) {
if (tick.label) {
H.addEvent(tick.label.element, 'click', function() {
data.splice(tick.pos, 1);
categories.splice(tick.pos, 1);
chart.update({
series: [{
data: data
}],
xAxis: {
categories: categories
}
});
});
}
});
}
}
},
series: [{
type: 'column',
data: data
}],
xAxis: {
categories: categories
}
});
Live demo: http://jsfiddle.net/BlackLabel/8wfx5yve/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
I am having an issue with Highcharts highstock column chart. With xaxis min=0, max=5 [page size] which has 20 categories.
After the initial load when you scroll the xaxis to the end and then click on modify data. On this action I will invoke an api and update the series data. 'The chart displays as No data to display' even if there is one category. I wanted to reset scroll to initial position, which I cannot do for categories. You will need to move scroll manually
Also Since there is only one category and I do not want other categories to display as numbers.
https://jsfiddle.net/shashi3337/zcf8kvgx/7/
I am updating the chart to modify xaxis min and max to set max as 0 [ 1 category] to remove numbers.
https://jsfiddle.net/shashi3337/zcf8kvgx/5/.
Now when you click on Add data which adds back the data. I am resetting min=0 and max=5. Now
I just see only 1 category per page scroll.
Expected Behavior
I expect the scroll bar to be automatically scrolled back after I click modify data button and when I click on add data button I expect to see 6 categories per page scroll on xaxis.
function test(n) {
var data = [];
for (var i = 0; i < n; i++) {
var value = Math.random() * 10;
var x = {
id: i,
name: 'test ' + i,
y: value
}
data.push(x);
}
return data;
}
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min:0,
max:5
},
scrollbar: {
enabled: true
},
series: [{
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
$(document).ready(function(){
$('#modify').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.addSeries({
name: 'new',
data: test(1)
});
}
});
$('#add').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.update({
xAxis: {
min:0,
max:5
}
});
chart.addSeries({
name: 'A',
data: test(20)
});
}
});
});
Found the answer to this.
You need to use xAxis.setExtremes() to modify extremes on the chart. At this moment, extremes set by user (e.g. by scrollbar) have the highest priority and are not cleared when you remove all series.
Example https://jsfiddle.net/BlackLabel/pp2qpxks/
chart.xAxis[0].setExtremes(0, 0);
I am using highstock charts for stock charts. In my charts i have a buttons like 1D,5D, 6M, 3YR, 10YR and YTD.
When i resize the chart (ipad portrait mode), 3yr,10yr and YTD buttons are coming out of the chart.
there is no enough room for buttons in chart.So i need to disable few buttons and show only 1D,5D and YTD buttons in chart.
on desktop mode:
On ipad portrait mode:
Can you suggest me how to do this?
Thanks in Advance.
To disable the range selector, you can use this code:
rangeSelector: {
enabled: false
}
and to modify it's buttons, you can use this code;
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
}
Maybe less number of buttons can resolve your issue.
I think you can use CSS to hide some of buttons, see: http://jsfiddle.net/wcqP9/
.highcharts-button {
display: none;
}
I am using highstock chart for displaying the stock chart.when charts gets loaded by default i am showing 6M button selected.
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1min'
}, {
type: 'day',
count: 5,
text: '10min'
}, {
type: 'month',
count: 6,
text: '6M'
},
{
type: 'year',
count: 3,
text: '3yr'
}, {
type: 'year',
count: 10,
text: '10yr'
}
],
inputEnabled: false,
selected: 2
},
The chart contains lot of data points.So when i tap to another spot on the series, the time period above loses the "boldness". Hence i no longer know what was the time period i had selected.
If the chart contains only 3 buttons then its working fine. If more buttons then the button is disable.
Can you tell me how to enable the selected button always when i tap on series of highstock chart?
Thanks in Advance.
I opened this example http://www.highcharts.com/stock/demo/basic-line/gray and click on the buttons, and bold doesn't disappear. Which version of HS do you use? Could you prepare your example as live demo?