Trippe Y axis visualization issue in Google Chart

1
votes

I am having trouble with the range of the Y axis on the third variable, I tried adding minimum, maximum, view ranges, but as it's a percentage and depending on how big the volume/price go it will get less and less visible. Any ideas or help would be greatly apprecaited. This is what the graph looks like with the below settings:

enter image description here

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

google.charts.load('current', {
                   callback: function () {
                   var data = new google.visualization.DataTable({
                                                                 cols: [
                                                                 {label: 'Time', type: 'string', format: 'decimal'},
                                                                 {label: 'Volume', type: 'number'},
                                                                 {label: '฿', type: 'number'},
                                                                 {label: 'Buy %', type: 'number'},
                                                                 ],
                                                                 rows: [
                                                                 <?php
                                                                 while($row = mysqli_fetch_assoc($result)) {
                                                                 echo "{c:[{v: '" . $row["Timestamp"] . "'}, {v:" . $row["Volume"] . "}, {v:" . $row["LastPrice"] . "}, {v:" . $row["buyers"]*100 . "}]},";
                                                                 }
                                                                 ?>
                                                                 ]
                                                                 });

                   var container = document.getElementById('chart');
                   var formatter = new google.visualization.NumberFormat({
                                                                         fractionDigits: 8
                                                                         });
                   formatter.format(data, 2);
                   var chart = new google.visualization.LineChart(container);
                   chart.draw(data, {
                              height: 525,
                              crosshair: { trigger: 'both' },
                              series: {
                              1: {
                              targetAxisIndex: 1,
                              }
                              },
                              theme: 'material',

                              vAxes: {
                              0: {
                              title: '',
                              },
                              1: {
                              title: '',
                              },
                              2: {
                              title: '',
                              minValue: 0,
                              maxValue: 100,
                              format: '#\'%\'',
                              }
                              },

                              });

                   },
                   packages: ['corechart']
                   });

</script>
1
javascriptchartsgoogle-visualization

1 Answers

1
votes

try assigning each series to its own axis... 

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