CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
user4965201
user4965201

Reputation: 973

Google chart show dual axis represent same data

I wanted to make a google chart which shows the dual y axis , but both should represents the same bar.

See this fiddle

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Car', 'Distance travelled'],
      ["mercedes", 44],
      ["lamborgh", 31],
      ["porsche", 12],
      ["aston martin", 10]

    ]);

    var options = {
      title: 'Car distance',
      width: 500,
      legend: { position: 'none' },
      chart: { subtitle: 'money spent in distance travelled' },
      axes: {
        x: {
          0: { side: 'top', label: 'Car stats'} // Top x-axis.
        }
      },
      bar: { groupWidth: "20%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

I have shown the Cars distance traveled , thats actually in kms, now i wanted to show the cars money spent in fuel like a car traveled 1km and it spends $2 in fuel

now looking at the fiddle suppose we have mercedes car traveled 44km then it costs around $88 which should be depicted by the 2nd y-axis

How it can be done?

Upvotes: 2

Views: 1685

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

each series (y-value) in the chart represents a column in the data

"series 0" = column 1 in the data
"series 1" = column 2 in the data

then use the options to map each series to an axis... 

series: {
  0: { axis: 'distance' },
  1: { axis: 'fuel' }
},
axes: {
  y: {
    distance: {label: 'Distance'},
    fuel: {side: 'right', label: 'Fuel'}
  }
}

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages:['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Car', 'Distance travelled', 'Fuel'],
    ['mercedes', 44, 88],
    ['lamborgh', 31, 62],
    ['porsche', 12, 24],
    ['aston martin', 10, 20]
  ]);

  var options = {
    title: 'Car distance',
    height: 500,
    legend: { position: 'none' },
    chart: { subtitle: 'money spent in distance travelled' },
    bar: { groupWidth: "20%" },
    series: {
      0: { axis: 'distance' },
      1: { axis: 'fuel' }
    },
    axes: {
      x: {
        0: { side: 'top', label: 'Car stats'} // Top x-axis.
      },
      y: {
        distance: {label: 'Distance'},
        fuel: {side: 'right', label: 'Fuel'}
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

to remove the second bar but keep the axis requires a bit of manipulation

and use of options not available to material charts

see following working snippet using a core chart... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Car', 'Distance travelled'],
    ['mercedes', 44],
    ['lamborgh', 31],
    ['porsche', 12],
    ['aston martin', 10]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    label: 'Fuel',
    type: 'number',
    calc: function () {
      return null;
    }
  }]);


  var options = {
    title: 'Car distance',
    height: 500,
    legend: { position: 'none' },
    chart: { subtitle: 'money spent in distance travelled' },
    bar: { groupWidth: "20%" },

    // center bar with x-axis label
    isStacked: true,

    // material chart theme
    theme: 'material',

    // y-axis settings
    vAxes: {
      0: {
        ticks: [0, 10, 20, 30, 40, 50],
        title: 'Distance'
      },
      1: {
        ticks: [0, 20, 40, 60, 80, 100],
        title: 'Fuel'
      }
    },

    // map series
    series: {
      0: {
        targetAxisIndex: 0
      },
      1: {
        targetAxisIndex: 1
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note

material charts --> packages:['bar'] -- google.charts.Bar

core charts --> packages:['corechart'] -- google.visualization.ColumnChart

Upvotes: 1

Related Questions