fabianjackal
Posts: 5
Joined: Tue May 25, 2010 8:34 pm

Show one serie at a time

I have a problem, not how to set it to display a series at once and when one is selected automatically disable the other and that when you start the animation only shows the first set, plus I'd like to change the icons of the series that are shown to sides only. Thank you.

Attachment image.
Attachments
Graphic sequence to be followed.
Graphic sequence to be followed.
charts_series.gif (25.43 KiB) Viewed 5887 times
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Show one serie at a time

1) To hide other series when one is shown:
a) Set up an event listener for series.event.show (http://highcharts.com/ref/#plotOptions-series-events => show)
b) In this event listener, loop over chart.series and call series.hide() on the others.

2) To make the chart display only one series initially, set visible:false on the others.

3) To change the icons, see http://highcharts.com/ref/#plotOptions-series-marker.
Torstein Hønsi
CTO, Founder
Highsoft
fabianjackal
Posts: 5
Joined: Tue May 25, 2010 8:34 pm

Re: Show one serie at a time

Could you give me an example of that function of the event listener and the loop?

Code: Select all

<script type="text/javascript">
		var chart;
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'line',
					margin: [50, 150, 60, 80]
				},
				title: {
					text: 'Porcentajes inflaci├│n Colombia',
					style: {
						margin: '10px 100px 0 0', // center it
						color: '#FF9900'
					}
				},
				subtitle: {
					text: 'Fuente: XXX',
					style: {
						margin: '0 100px 0 0' // center it
					}
				},
				xAxis: {
					categories: ['2000', '2001', '2002', '2003', '2004', 
						'2005', '2006', '2007', '2008', '2009', '2010'],
					title: {
						text: 'A├▒os'
					}
				},
				yAxis: {
					title: {
						text: 'Porcentaje'
					},
					plotLines: [{
						value: 0,
						width: 0,
						color: '#808080'
					}]
				},
				tooltip: {
					formatter: function() {
			                return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y +'%';
					}
				},
				plotOptions: {
      				line: {
						lineWidth: 1,
					marker: {
						symbol: 'auto',
         			dataLabels: {
            		enabled: true
						}
					}
     			 }
				},
				series: [{
					name: 'Bogotá',
					data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13]
				}, {
					name: 'Sector',
					data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6],
					visible: false,
				}, {
					name: 'Barrio',
					data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9],
					visible: false
				}, {
					name: 'Inflaci├│n',
					data: [-1, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6],
					visible: false
				}]
				
			});
	
		});
		</script>
fabianjackal
Posts: 5
Joined: Tue May 25, 2010 8:34 pm

Re: Show one serie at a time

I try to do what he says and does not work, please help ....

http://jsfiddle.net/tK38J/4/
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Show one serie at a time

I've deleted your other post and PM with the same question.

I set up a working example for you at http://jsfiddle.net/tK38J/8/.
Torstein Hønsi
CTO, Founder
Highsoft
fabianjackal
Posts: 5
Joined: Tue May 25, 2010 8:34 pm

Re: Show one serie at a time

Thank you very much, excellent, I never would have done so. 8)
moe
Posts: 9
Joined: Thu May 27, 2010 12:29 am

Re: Show one serie at a time

That was a great example, thanks.

I had a similar use case, just that each series is tied to its own Y-axis. (i.e the y-axis units/scale/data is different for each series).
So the Y-axis needs to change depending on the selected series.

I was unable to find a 'hide' option for the y-axis.
Am I missing someway to achieve this functionality?
User avatar
not
Posts: 342
Joined: Mon Jun 07, 2010 2:01 pm

Re: Show one serie at a time

@moe, try combining xAxis.setCategories() and series.event.show mentioned before.
Just set a custom set of categories for each series.
Maciej Piecha,
ex Highcharts Support Team
Farnazslt
Posts: 2
Joined: Tue Sep 21, 2021 6:11 am

Re: Show one serie at a time

While trying to switch between two series of data after selecting the second chart the first one disappears totally. This is besides the fact that I've been using the penultimate solution given in this forum. Bellow is the code have been written for my highchart:
Highcharts.stockChart('container', {
loading: {
labelStyle: {
color: 'white'
},
style: {
backgroundColor: 'gray'
}
},
menuItemDefinitions: {
// Custom definition
enabled: false
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
itemMarginTop: 10,
itemMarginBottom: 5
},
exporting: {
buttons: {
contextButton: {
menuItems: [{
text:"چاپ نمودار",
onclick: function () {
this.print();
}
}, {
separator: true
}, {
text: "دانلود تصویر (PNG)",
onclick: function () {
this.exportChart();
}
},
{
text: "دانلود تصویر (JPEG)",
onclick: function () {
this.exportChart({type: 'image/jpeg'});
}
},
{
text: "دانلود به صورت (PDF)",
onclick: function () {
this.exportChart({type: 'application/pdf'});
}
},{
text: "دانلود تصویر (SVG)",
onclick: function () {
this.exportChart({type: 'image/svg+xml'});
}
}
]
//menuItems: ["چاپ نمودار", "separator", "downloadPNG", "downloadPDF"]
}
}
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: 'یک ماه'
}, {
type: 'month',
count: 3,
text: 'سه ماه'
}, {
type: 'month',
count: 8,
text: 'شش ماه'
}, {
type: 'month',
count: 9,
text: 'نه ماه'
}, {
type: 'all',
text: 'از ابتدا تاکنون'
}],
//inputEnabled: false, // it supports only days
inputBoxWidth: 80,
inputBoxBorderColor: 'gray',
enabled: true,
allButtonsEnabled: true,
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: '%d/%m/%Y',

selected: 3,// all
labelStyle: {
display: 'none'
},
buttonTheme: {
width: 60
},
},
/*chart: {
events: {
load: function () {
var chart = this.chart,
series1 = chart.series[0];
series2 = chart.series[1];
series1.show();
series2.hide();
}

}
},*/
plotOptions: {
series: {
animation: {
duration: 2000
},
//dataSorting: {
// enabled: true,
// sortKey: 'custom.rank'
//},
keys: ['x', 'custom.value', 'y'], // 4th data position as custom property
fillColor: {
linearGradient: [0, 0, 0, 700],
stops: [
[0, Highcharts.getOptions().colors[7]],
[1, Highcharts.color(Highcharts.getOptions().colors[7]).setOpacity(0).get('rgba')]
]
},
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series;
if (otherSeries != this && otherSeries.visible) {
otherSeries.hide();
}
}
}
}

},

},
xAxis: {
type: 'datetime',
startOfWeek: false,
labels: {
rotation: -45,
format: '{value:%Y/%m/%d}',
},
xDateFormat: '%Y/%m/%d',

},
yAxis: {
tickAmount: 8
},
tooltip: {
split: false,
shared: true,
xDateFormat: '%Y/%m/%d',
crosshairs: true,
enabled:true,
headerFormat: '{point.key}<hr>',
pointFormat: '<table><tr><td style="color: #6fa287">تعداد واحد : </td>' +
'<td style="text-align: right"><b>{point.y}</b></td></tr>'+
'<tr><td style="color: #6fa287"> میزان دارایی : </td>' +
'<td style="text-align: right";bo><b>{point.options.custom.value}</b></td></tr>',
footerFormat: '</table>',
useHTML: true,
shadow: false,
borderWidth: 0.1,


},

series : [{
//for drawing units
data:res_both,
color: '#6fa287',

},
{
data:res_both2,
visible: false
}]
});
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Show one serie at a time

Hello Farnazslt,

Welcome to our forum and thanks for contacting us with your question!

I've tried to reproduce your issue but the code that your shared is missing data. Please provide me with simplified working code supplied with missing data, prefereably in a form of a live demo. You can start here: https://jsfiddle.net/BlackLabel/4h05ug87/

Best regards!
Mateusz Bernacik
Highcharts Developer
Farnazslt
Posts: 2
Joined: Tue Sep 21, 2021 6:11 am

Re: Show one serie at a time

Hello everyone,
mateusz.b thanks a million for your response to my question and also I radically appreciate helping me with the appropriate way of sharing my examples. After dealing with the function a lot, I found the problem source. The complication was related to while loop which the conditional added to the chart in subtracting should not have been added inside the parentheses.

Warm wishes,
Farnaz
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Show one serie at a time

Hi Farnazslt,

Glad to hear you have figured it out. In case of any questions feel free to contact us again!

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”