Urgent- Combo Chart Dual Y-axis issue mismatched gridlines

[Priyankahq]

Important- Hi ,I am working on google chart update task from v44 to v46. All graph in my app look fine with some small differences but there is a Combo chart having dual Y-axis looks very odd. version44 displays the linedup/matchedup gridlines for both of the Y-axis/vaxes (see screenshot old v46) but in new version it seems like the tick values are being calculated independently which makes the matched gridline split into two (see screenshot latest v46). Even the no.of ticks are different for both the axis. Not sure why it worked absolutely fine before.

I have tried almost all possible properties like gridlines: {count: } , tickamount , nothing works. The problem is that I may can fix this issue by explicity specifying the ticks values to matchup both the gridlines for one user but that model can't work for all authorities because data is diff for every authority.

[dlaliberte]

The gridlines.count option is now only used to compute approximately what the minimum spacing should be between gridlines. The number of gridlines is usually far less important than the roundness of the tick values. Note that your tick values on the right-side axis of your v44 chart are multiples of 1.25, which is fairly odd, and multiples of 150 on the left.

However, there are a couple ways you can control the number and alignment of gridlines in v46. It sounds like you have discovered the ticks option, which lets you specify exactly the tick values you want. To use this, you would first have to get the data range for each column (see datatable.getColumnRange), and then figure out your max tick value from that, say by rounding up to the nearest value of the right order of magnitude. Then divide by the number of ticks and iterate. You may get some very odd tick values that way.

Better than that would be to use the new 'interval' options. See the minimal documentation in the release notes here: https://developers.google.com/chart/interactive/docs/release_notes#current-october-1-2018 You would want to specify a few more possible interval values with this: vAxis: { gridlines: { interval: [ 1, 1.25, 1.5, 2, 2.5, 5 ] } }

[Priyankahq]

Thanks for the quick response.

I tried multiple of ways and one seems to solve the issue basically the aim was to match the gridlines . However I am not very happy with solution as it involves bit of a calculation and made me to add quite good number of lines in the code just to get the 5 no. of ticks on both the sides.

I wonder if there is any easy way to do it.

Please refer the code below

var maxValue = 0; for (i = 0; i < dt.getNumberOfRows(); i++) { var value = dt.getValue(i, 2); if (value > maxValue) { maxValue = value; } } graph.chart.setOptions(options); var pow = maxValue > 100 ? String(maxValue).length - 2 : String(maxValue).length - 1; maxValue = Math.ceil(maxValue / Math.pow(10, pow)) Math.pow(10, pow); var nTicks = 5; var ticks = []; var tickInterval = Math.ceil(maxValue / nTicks) === 0 ? 1 : Math.ceil(maxValue / nTicks); for (var j = 0; j <= nTicks; j++) { ticks.push(j tickInterval); }

      options.vAxes[0].ticks = ticks;
      options.vAxes[0].viewWindow.max = maxValue < 10 ? 10 : maxValue;

      var maxValue = 0;
      for (i = 0; i < dt.getNumberOfRows(); i++) {
          var value =  dt.getValue(i, 3 );
          if (value > maxValue) {
              maxValue = value;
          }
      }
      var nTicks = 5;
      var ticks = [];
      var tickInterval =  Math.ceil(maxValue / nTicks) === 0 ? 1 : Math.ceil(maxValue / nTicks);
      for (var j = 0; j <= nTicks; j++) {
          ticks.push(j * tickInterval);
      }

      options.vAxes[1].ticks = ticks;
      graph.chart.setOptions(options);

      graph.chart.setDataTable(view);
      graph.chart.draw();
  });

[Priyankahq]

Also as you said in very first comment "Note that your tick values on the right-side axis of your v44 chart are multiples of 1.25, which is fairly odd, and multiples of 150 on the left."

I am not sure why the values coming odd in v44 when there is nothing specified in the code to manipulate the tick intervals. see the vAxes specification below chartArea: {left: '10%', right: '8%', top: obj.top || 'auto', bottom: obj.bottom || 'auto'}, seriesType: 'bars', vAxes: { 0: { title: appbundle.get('circulation'), titleTextStyle: {italic: false, fontSize: 16}, format: 'short', textPosition: 'out', textStyle: {fontSize: 10}, minValue: 0, viewWindow: {min: 0}, minorGridlines: {count: 0} }, 1: { title: appbundle.get('turnover'), titleTextStyle: {italic: false, fontSize: 16}, format: '#,##0.0##', textPosition: 'out', minValue: 0, viewWindow: {min: 0}, minorGridlines: {count: 0} } }, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1, type: 'line'}, },

I am bit curious to know that what change in the latest version do you think that might have cause this issue.

Thanks