google chart view window mode explicit

Question

I got this combo chart that doesn't wanna do what I want it to do, the scaling too 100 always, here is the code:

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

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['kleur', 'rood', 'geel', 'groen', 'blauw', 'lijn'],
        ['Rood - Geel - Groen - Blauw', 57.5, 70, 60, 50, 50],
    ]);

    var options = {
        title: 'AANGEPAST',
        width: 350,
        height: 600,
        bar: {
            groupWidth: '95%'
        },
        colors: ['red', 'yellow', 'green', 'blue', 'red'],
        bar: {
            groupWidth: '95%'
        },
        legend: {
            position: 'none'
        },
        seriesType: 'bars',
        vAxis: {
            viewWindowMode: 'explicit',
            viewWindow: {
                max: 100,
                min: 0
            }
        },
        vAxis: {
            minValue: 0
        },
        series: {
            0: {
                dataOpacity: 0.8
            },
            1: {
                dataOpacity: 0.8
            },
            2: {
                dataOpacity: 0.8
            },
            3: {
                dataOpacity: 0.8
            },
            4: {
                type: "steppedArea",
                color: '#FF0000',
                visibleInLegend: false,
                areaOpacity: 0,
            }
        },
        vAxes: [{},
            {
                ticks: [1],
                baseline: 50
            }
        ]
    };

    var chart = new google.visualization.ComboChart(document.getElementById('aangepast'));
    chart.draw(data, options);
}

This scales from 0 to 80, and I want it to scale to 100, thats why the viewWindowMode is explicit with max 100 and min 0, but thats not working, can anyone see whats wrong?

Docs at https://developers.google.com/chart/interactive/docs/gallery/combochart

WhiteHat WhiteHat · Accepted Answer · 2018-06-21T12:00:27

there are two options for vAxis

vAxis: {
  viewWindowMode: 'explicit',
  viewWindow: {
    max: 100,
    min: 0
  }
},
vAxis: {
  minValue: 0
},

the second, which doesn't have a value for max, is overriding the first

there should only be one instance of each option

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawVisualization);

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['kleur', 'rood', 'geel', 'groen', 'blauw', 'lijn'],
    ['Rood - Geel - Groen - Blauw', 57.5, 70, 60, 50, 50],
  ]);

  var options = {
    title: 'AANGEPAST',
    width: 350,
    height: 600,
    bar: {
      groupWidth: '95%'
    },
    colors: ['red', 'yellow', 'green', 'blue', 'red'],
    bar: {
      groupWidth: '95%'
    },
    legend: {
      position: 'none'
    },
    seriesType: 'bars',
    vAxis: {
      viewWindowMode: 'explicit',
      viewWindow: {
        max: 100,
        min: 0
      }
    },
    series: {
      0: {
        dataOpacity: 0.8
      },
      1: {
        dataOpacity: 0.8
      },
      2: {
        dataOpacity: 0.8
      },
      3: {
        dataOpacity: 0.8
      },
      4: {
        type: "steppedArea",
        color: '#FF0000',
        visibleInLegend: false,
        areaOpacity: 0,
      }
    },
    vAxes: [{},
      {
        ticks: [1],
        baseline: 50
      }
    ]
  };

  var chart = new google.visualization.ComboChart(document.getElementById('aangepast'));
  chart.draw(data, options);
}

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

google chart view window mode explicit

1 Answers