How to have a common Y-axis for a Multi Series Graph

[Snigdhak]

Hi ,
I had been working for a while to create a common y-axis for a multi series graph. This helps when we have a multiseries graph to compare both the data sets.

I was trying to atleast have a common range for both the Y-axes but couldn't accomplish it .All I could do was to hardcode the min and max values.Is there any way in which I can determine the min and max values of both the data sets and have a common scale .
Any help would be appreciated.

Thanks,
Snigdha

[yalnifj]

You can put multiple series on the same Y-axis by specifying the same y-axis index number in the series object. Borrowing from one of the demo examples:

Code: Select all

series: [{
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
         yAxis: 1
      }, {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
         yAxis: 1
      }, {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         yAxis: 2
      }, {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         yAxis: 2
      }]

This would put 'Tokyo' and 'New York' on the same axis and 'Berlin' and 'London' on a different axis. The Y-Axis will automatically adjust to the min/max values of the data sets assigned to it.

--John

[Snigdhak]

Hi John , Thanks for the reply . Your solution doesn't hide the extra Y-axis . T can still see 3 Y-axes.I have two series and I want only one Y-axis to be visible.

[hfrntt]

Could you provide an example of your chart?

[Snigdhak]

I figured out a way , only problem is that there is no line for the y-axis , scale is good though. Following is my code , It is a little different from the example because here the data is taken from a single csv file.

Code: Select all

$(function CreateChart() {
			var seriesOptions = [],
				//yAxisOptions = [],
				seriesCounter = 0,
				names= ['SBA','SPX','GOOG'],
                                file = 'SBA',
                                
				colors = Highcharts.getOptions().colors;
			
				
			
			$.each(names, function(i, name) {
				
				$.get(file + '.csv', function(csv, state, xhr) {
			// inconsistency
					if (typeof csv != 'string') {
						csv = xhr.responseText;
					} 
				
					// parse the CSV data
					var data = [], header, comment = /^#/, x;
                                        
					
					$.each(csv.split('\n'), function(i, line){
					    if (!comment.test(line)) {
					        if (!header) {
					            header = line;
					        }
					        else {
					            var point = line.split(','), date = point[0].split('/');
					            
					            x = Date.UTC(date[2], date[0] - 1, date[1]);
					            
				if (point.length > 1 && seriesCounter== 0 )  {
                                                                                 //use point[2], the note value
					            	   data.push([x, parseFloat(point[1])
									]);
                                                                            }                                                               
                                                                 else if (point.length > 1 && seriesCounter == 1) {
									// use point[3], the underlying value
					            	   data.push([x, parseFloat(point[2])
									]);
                                                                            }
                                                                 else if (point.length > 1 && seriesCounter == 2) {
									// use point[3], the underlying value
					            	   data.push([x, parseFloat(point[3])
									]);
				           }

				              }
					   }
					});
					
					seriesOptions[i] = {
						name: name,
						data: data
                                            	
					};
                                        
					// As we're loading the  data asynchronously, we don't know what order it will arrive. So
					// we keep a counter and create the chart when all the data is loaded. 
					seriesCounter++;
					
					if (seriesCounter == names.length) {
						DrawChart();
					}
				});
			});
			// create the chart when all data is loaded
			function DrawChart() {
						
				chart = new Highcharts.StockChart({
				    chart: {
				        renderTo: 'container',
				        alignTicks: false,
                                        spacingBottom : 0,
                                        spacingRight : 0
				    },
				    
				    rangeSelector: {
				        selected: 1
				    },
				    
				    title: {
				        text: null
                                    },

                                    legend: {
                                    enabled: true,
                                    align: 'center',
                                    floating: false,
                                    layout: 'horizontal',
                                    shadow: false,
                                    verticalAlign: 'top'

                                    },

		                    xAxis: {
				        type: 'datetime',
				        maxZoom: 14 * 24 * 3600000, // fourteen days
				        title: {
				            text: 'Time Period'
				        }
				    },
				     
				     yAxis: {
				        title: {
				            text: '% Change'
				           
				        }
				    },

			  series: seriesOptions
                               });
			            }
		                   });
		

[torstein.honsi]

Based on this demo, can you explain what your are missing? http://jsfiddle.net/highcharts/7Rqg6/

[Snigdhak]

Hey , I'm somehow unable to figure out the difference , but it works for me when I don't use YaxisOptions and instead specify the Y axis properties directly in the Chart Options. I only give the text to be displayed or just other stuff the way I do it for a single Y axis and it works.

[Snigdhak]

http://jsfiddle.net/25tL6/2/

This might help you. Try to zoom the data to 1 month and 3 months.This has a problem with data zoomed in more than 3 months which I posted under a separate thread..

[hfrntt]

I suppose that you want your chart line, however you have some NaN values in your data, and I suppose that this is the reason of your problems.

[Snigdhak]

Thanks , I wonder how I missed that.

[cgb92]

Hi, I can see it working properly, but if you use min/max properties, the graph looks quite strange.

Example:
https://jsfiddle.net/cgb92/0se16yjo/4/

Does anybody knows why this is happening?

[pawelys]

I already answered here: viewtopic.php?f=9&t=31525