Double Y axis ticks for Google Charts

Question

I am trying to set ticks for a double y-axis line graph but either the graph wont load, it it loads exactly the same. Any help will be greatly appreciated

Goal is to set Price ticks: [0.002, 0.004. 0.006. 0.008], and Volume increment by lets say 1000

Also having issues with prices for instance being: 0.00242, 0.00521 all showing up as 0.1

<?php
$sql = "SELECT Timestamp, LastPrice, Volume FROM vol";
$result = $dbconnect->query($sql);
?> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>
   
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

	  
	  
           google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');
		  
		  
		  
        var data = google.visualization.arrayToDataTable([
                ['Timestamp','LastPrice','Volume'],
                <?php
                    while($row = mysqli_fetch_assoc($result)){
                        echo "[           '".$row["Timestamp"]."', ".$row["LastPrice"].", ".$row["Volume"].",    ],";
                    }
					echo $row["LastPrice"];
                ?>
        ]);

        var materialOptions = {
			
		chart: {
          
        },
        width: 600,
        height: 300,
		
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'LastPrice' },
          1: {axis: 'BaseVolume'}
        },
		
		vAxis: {1: {ticks:[0, 0.002, 0.004, 0.006]} },
		
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            LastPrice: {label: 'Price'}, 
            BaseVolume: {label: 'Volume'}
			
          }
        }
		
      };

     

      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
        button.innerText = 'Classic';
        button.onclick = drawClassicChart;
      }


      drawMaterialChart();

    }
	
</script>

Answer 1

there are several configuration options that aren't supported by Material charts, including...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks

see --> Tracking Issue for Material Chart Feature Parity

instead, recommend using a Classic chart with the following option...

theme: 'material'

---

for dual y-axis charts, use the series option to specify the target axis

  series: {
    1: {
      targetAxisIndex: 1,
    }
  },

use option vAxes, with an e, to specify ticks for each y-axis

  vAxes: {
    0: {
      ticks:[0, 1000, 2000, 3000],
      title: 'Last Price'
    },
    1: {
      ticks:[0, 0.002, 0.004, 0.006],
      title: 'Base Volume'
    }
  }

---

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      cols: [
        {label: 'x', type: 'string'},
        {label: 'y0', type: 'number'},
        {label: 'y1', type: 'number'}
      ],
      rows: [
        {c:[{v: 'row 0'}, {v: 1800}, {v: 0.00242}]},
        {c:[{v: 'row 1'}, {v: 2200}, {v: 0.00521}]},
        {c:[{v: 'row 2'}, {v: 2800}, {v: 0.00343}]},
        {c:[{v: 'row 3'}, {v: 2800}, {v: 0.00441}]},
        {c:[{v: 'row 4'}, {v: 2300}, {v: 0.00532}]}
      ]
    });

    var container = document.getElementById('chart');
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, {
      width: 600,
      height: 300,
      series: {
        1: {
          targetAxisIndex: 1,
        }
      },
      theme: 'material',
      vAxes: {
        0: {
          ticks:[0, 1000, 2000, 3000],
          title: 'Last Price'
        },
        1: {
          ticks:[0, 0.002, 0.004, 0.006],
          title: 'Base Volume'
        }
      }
    });
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>