I need to make one label responsible for multiple series data.
As shown in this fiddle http://jsfiddle.net/HHqGN/ , I have two series:
test(bid) and test(ask) and two labels responsible for each of them.
What I need is one label named test instead of these two to toggle both serie 1 and serie 2 at the same time
Sample code from fiddle:
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled : false
},
legend : {
enabled : true
},
series : [{
name : 'test(bid)',
data : [[1152057600000,57.00]
}, {
name : 'test(ask)',
data : [[1152057600000,58.00]
}]
});
});
You can disable displaying second serie in legend, by showInLegend parameter and then use legendItemClick to show/hide both series
http://jsfiddle.net/HHqGN/1/
legendItemClick:function(){
$.each(this.chart.series,function(i,serie){
if(serie.visible)
serie.hide();
else
serie.show();
});
return false;
}
In case anyone is looking for linked series have a look at the linkedTo parameter of a series. As per definition:
linkedTo: StringSince 3.0
The id of another series to link to. Additionally, the value can be
":previous" to link to the previous series. When two series are
linked, only the first one appears in the legend. Toggling the
visibility of this also toggles the linked series.
Source: http://api.highcharts.com/highcharts
Related
I want to be able to click a button and toggle y-Axis plotOptions from series rendering by absolute value to compare by percent change.
I have played with jsfiddle here https://jsfiddle.net/pn5md4rz/1/
What I have noticed is that if I enable plotOptions in the options it will render always by change of value or percent change, but if I remove it (commented) it will always render by value. I want a way to switch between both modes of y-axis through button toggle.
You need to add click event callback function to the button and update the chart in that function with variable compare and showInNavigator values.
document.getElementById('toggle-button').addEventListener('click', function() {
compare = compare ? false : 'value';
chart.update({
plotOptions: {
series: {
compare: compare
}
},
series: [{}, {
showInNavigator: !!compare
}]
});
});
Live demo: https://jsfiddle.net/BlackLabel/bz3are69/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
I built a line chart with more than 50 series: fiddle
Now I want to highlight one series by button click (opacity: 1). When I highlight another series, the first one should get its original opacity of 0.1 again.
With only two series I can achieve this by doing this:
$('#func1').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 0.1});
chart.series[4].update({opacity: 1});
});
$('#func2').click(function () {
var chart = $('#Weltweit').highcharts();
chart.series[3].update({opacity: 1});
chart.series[4].update({opacity: 0.1});
});
But I cannot do this with 50 series because it takes too long to calculate. Is there a way to cancel the previous update before doing a new one?
Use the update method with redraw parameter set to false and redraw chart after loop:
chart.series.forEach(function(s) {
s.update({
...
}, false);
});
chart.redraw();
Live demo: http://jsfiddle.net/BlackLabel/3a9bfjgd/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
You can read here, similar with your problem: https://api.highcharts.com/highcharts/series.line.point.events.select
I am working on a project utilizing highcharts and highstocks. I ran into 2 problems that I like to ask for your help on.
How do I code a highchart with a multiple series with each series getting its data source from a distinct Ajax call? The example on the Highcharts website only shows either a single Ajax source or a multiple series chart with pre-populated dummy data.
I am trying to separate the draw of highchart from the ajax call function, since the embedded callback method used to draw the chart can get a little hard to read. But when I factored out the highcharts drawing code from the call back section, the highchart display no longer works, ie the highcharts call does not return anything. For example:
this work:
$.getJSON(myUrl, function(data){
$('#ajax-panel').highcharts('chart', {
rangeSelector : {
selected : 1
},
title : {
text : 'analysis chart'
},
series : [
{
name : 'dataseries',
data : data,
id : 'dataseries',
tooltip: {
valueDecimals: 2
}
}
]
});
this does not work, although syntax wise I don't see anything wrong.
$.getJSON(myUrl, function(data){
drawChart(data);
});
function drawChart(data){
$('#ajax-panel').highcharts('chart', {
rangeSelector : {
selected : 1
},
title : {
text : 'analysis chart'
},
series : [
{
name : 'dataseries',
data : data,
id : 'dataseries',
tooltip: {
valueDecimals: 2
}
}
]
});
};
Thanks!
1) You need to get all series and push into one array, then in highcharts refer to it. What is important, chart should be initialised in the callback of last ajax.
When / then() jquery functions should be also helpful.
2) Syntax seems to be correct, please check your console (click F12 / developer tools) and observe if you get any errors.
I have a boxplot with a scatter plot of the raw values drawn on top of it. I'd like to change the boxplot tooltip (when you mouse over) to display the total number of points in the scatter series.
tooltip: {
useHTML: true,
headFormat: '{point.key}',
pointFormat: 'Median: {point.median}'
}
point and series are for the boxplot, is there a way to reference another series like series[1] and how would you get the total. Or can I reference an array with the total values.
Similar to How to edit the tooltip text in a highcharts boxplot
this.series contains a reference to the chart object, which in turn has a reference to the chart.series array.
tooltip: {
formatter: function() {
var arrayOfSeries = this.series.chart.series;
console.log(arrayOfSeries); // doing something with all the series!
}
},
Fiddle here.
According to formatter, you can reference to the series object via this.series. So for the total number of points in the series, you can try
tooltip: {
formatter: function() {
return this.series.data.length;
}
},
It seems shared tooltip doesn't work on scatter, https://github.com/highslide-software/highcharts.com/issues/1431. So I don't know how to reference another series. Otherwise you can use this.points[i].series.
I have three highcharts containers on the same page and want to create a function which is available to all charts, so I have defined the function in setOptions. The function is working well but I don't know which graph has triggered the event.
How do I know which chart triggered the event?
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
select: function () {
alert($(this).attr('id')); // I need this to be the chart id
}
}
},
Two ways:
use this.series.chart.options.chart.renderTo to get string you have passed when creating chart
use this.series.chart.renderTo.id to get ID's string, (will be the same as above).
You can use this.series.chart to get the chart object that was clicked. I'm not sure how you're assigning an "ID" to your chart, but presumably having a handle to the chart itself will be sufficient.