Google chart double axis, data set format - Javascript Google Chart

Javascript examples for Google Chart:Axis

  1. HOME
  2. Javascript
  3. Google Chart
  4. Axis

Description

Google chart double axis, data set format

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from w w w  .  j  av a 2  s.com*/
      google.charts.load('current', {
        'packages': ['bar']
      });
      google.charts.setOnLoadCallback(drawStuff);
      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Slave number', 'Voltage', 'SOC'],
          ['Slave 1', 12.15, 0.40],
          ['Slave 2', 12.18, 0.50],
          ['Slave 3', 11.80, 0.60],
          ['Slave 4', 13.12, 0.70],
        ]);
        var formatter = new google.visualization.NumberFormat({
          pattern: '##0.00'
        });
        var formatter2 = new google.visualization.NumberFormat({
          pattern: '##0%'
        });
        formatter.format(data, 1);
        formatter2.format(data, 2);
        var options = {
          width: 800,
          chart: {
            title: 'Status of slaves',
            subtitle: 'Overview of the voltage and SOC of connected slaves. '
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: {
              axis: 'voltage'
            }, 
            1: {
              axis: 'soc'
            } 
          },
          axes: {
            x: {
              voltage: {
                side: 'top',
                label: 'Voltage',
                format: {
                   pattern: "##0.00"
                }
              }, // Top x-axis.
              soc: {
                label: 'SOC',
                format: {
                   pattern: "#%"
                }
              }
            }
          },
        };
        var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
        chart.draw(data, options);
      };
    }
      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
       Bottom x axis (SOC) should by in percentage 0 - 100 %.  
   </body>
</html>

Related Tutorials