Setting vAxis to same scale on multiple charts on the same page

51 views Asked by At

I have an html documents that displays three line charts queried from the same Fusion Table. The first chart is the number of births/year, the other two display marriages and deaths per year.

I would like set the vAxis so all three charts have the same scale of 0-35,000. I have tried multiple solutions I've found online including setting the viewWindowMode min/max values and vAxis:ticks. Everytime I try to set one of these the chart fails to display.

This is what I currently have working, but the max vAxis value it displays is 8K, and I need it to be 35K to match the chart with highest value.

  google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);

  function drawChart() {

    var query = "SELECT 'Year', 'Death' FROM 1_ZsP2sm6HteqyygtifQ0cIRKn00cA1GDeRu4KMEr WHERE 'Year_n' >= 1829 AND 'Year_n' <= 2012 ORDER BY 'Year'" ;

    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query(
        'https://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
      var chart = new google.charts.Line(
          document.getElementById('linechart_death'));

      chart.draw(response.getDataTable(), {
    chart: {title:'Records Per Year'},
    legend: {position:'none'},

    lineWidth: 100,
    colors: '#87BA41',
      });
    });
  }

  google.setOnLoadCallback(drawChart);

1

There are 1 answers

0
WhiteHat On

there are several config options that are not supported by Material charts,
see issues #: 2143.

this includes...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
{hAxis,vAxis,hAxes.*,vAxes.*}.maxValue
{hAxis,vAxis,hAxes.*,vAxes.*}.viewWindowMode

in order to use these options, need to use a Classic chart...


Material = google.charts.Line from packages: ['line']

Classic = google.visualization.LineChart from packages: ['corechart']


There is an option to make Classic charts look similar to Material...

theme: 'material'