CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationdata-visualization
Cris
Cris

Reputation: 2021

Google Visualization API double Y axis - not being able to adjust targetAxisIndex

I am creating a multiple line chart with Google Chart API where I want to use 2 Y axis such as -> enter image description here, but with one axis set to max 24000 for my 6 countries, and the second set to 90000 for the 'Total World' column.

The problem is that my set of options never returns the 'Total World' in the second y axis and the other 6 countries in the first y axis, no matter how I arrange the option 'targetAxisIndex':

var tot = 95000;
var min = 0, var max = 24000;
.... 

 var options = {
            title: 'Top Consuming Nations - Thousand barrels daily',

            hAxis: {title: 'Year'},
            width: 1050, height : 400,

            vAxes: [
              {title: 'Top Countries', titleTextStyle: {color: '#FF0000'},  maxValue: max},  // Left axis maxValue: 60000
              {title: 'Total World', titleTextStyle: {color: '#FF0000'},  maxValue: tot}  // Right 
            ],
            series:[
              {targetAxisIndex:1},
              {targetAxisIndex:0}
            ],
            legend: { position: 'top', alignment: 'start' }
          };

here is the complete code: http://plnkr.co/edit/u5xXExdkTTYU8fHxWzHB?p=preview

Upvotes: 1

Views: 136

Answers (1)

Cris
Cris

Reputation: 2021

I found the answer on Google Groups:

Hi Chris,

The series option is supposed to be a mapping of series index to series options. When you specify it as an array, you're basically doing that assignment implicitly. So in your example, series 0 will go on axis 1, and series 1 will go on axis. All other series will go to the default axis (0). Your issue could be fixed pretty easily, by simply reorganizing your series such that the total is the first. Alternatively, you could explicitly specify that series 6 (your total series, 'country6') should go on axis 1. The default is for things to go on axis 0, so you don't need to explicitly specify that. Here's an updated version of your plunkr with the second version of the solution (since that was easier for me to do): http://plnkr.co/edit/GhsNcBCtDW0i4OTu0VJR?p=preview

var options = {
            title: 'Top Consuming Nations - Thousand barrels daily',

            hAxis: {title: 'Year'},
            width: 1050, height : 400,

            vAxes: [
              {title: 'Top Countries', titleTextStyle: {color: '#FF0000'},  maxValue: max},  // Left axis maxValue: 60000
              {title: 'Total World', titleTextStyle: {color: '#FF0000'},  maxValue: tot}  // Right 
            ],
            series:{
              6: {targetAxisIndex: 1}
            },
            legend: { position: 'top', alignment: 'start' }
          };

          var chart = new google.visualization.LineChart(document.getElementById(chartDiv));

          chart.draw(data, options);

Upvotes: 1

Related Questions