CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualizationresponsive
otherworlds
otherworlds

Reputation: 35

How to scale stacked google chart for mobile?

I have a stacked chart which is responsive for most screen sizes based on the solution for responsiveness provided here: Google Charts - Responsive Issue - Dynamically Resize

The problem is that despite none of the data values being higher than 5000, when viewed on mobile the scale goes up to 10,000 and the entire chart is rendered illegible. How can i scale the chart correctly for mobile?

JSFIDDLE https://jsfiddle.net/385rzhsg

chart rendered in portrait mode on mobile

HTML

    <div id="chart"><div id="soc_chart"></div></div>

CSS

#chart {
  border: 1px solid #AAA;
  min-height: 1000px;
}

JAVASCRIPT

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

function drawStacked() {
      var data = google.visualization.arrayToDataTable([
        ['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
        ['SNAPDRAGON 870', 914, 3161],
        ['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
        ['SNAPDRAGON 845', 504, 2028],
        ['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
        ['MEDIATEK G95', 501, 1599],
        ['UNISOC TIGER T618', 392, 1441],
        ['UNISOC TIGER T310', 360, 708],
        ['MEDIATEK MT8176', 314, 644],
        ['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
        ['ROCKCHIP RK3399', 269, 615],
        ['BROADCOM BCM2711', 234, 672],
        ['ROCKCHIP RK3326', 86, 272],
        ['MEDIATEK MT6580A', 69, 227],
        ['ROCKCHIP RK3288', 10, 20]
]);


      var options = {
        chartArea: {'width': 'auto', 'height': '90%'},
        legend: 
            {'position':'top', 
            textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}},
        height: 1000,
        isStacked: true,
        hAxis: 
            {title: 'GEEKBENCH 5 SCORE', 
            textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false}, 
            titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}}, 
        series: {
            0:{color:'#F75200'},
            1:{color:'#940000'}},
        vAxis: 
            {title: 'SOC NAME', 
            textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
            titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}}
       };

    var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        window.addEventListener('resize', drawStacked, false);
}

Upvotes: 2

Views: 446

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

for starters, let's take a look at the options for the chart.

var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));

the convertOptions method is used to convert options for classic charts to material charts.
but the chart being drawn is a classic chart, so there is no need to use convertOptions.

classic chart: google.visualization.BarChart
material chart: google.charts.Bar

try removing the method...

var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, options);

also, the 'bar' package is for loading material charts,
so it isn't needed either.

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

change to...

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

if after these changes, the axis continues to extend beyond the max value,
you can manually set the axis range.

we can find the max value of the row stacks, then round up to the nearest 1000.

  var maxStack = null;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
    maxStack = maxStack || rowStack;
    maxStack = Math.max(maxStack, rowStack);
  }
  var maxRound = Math.ceil(maxStack / 1000) * 1000;

then use that value to set the max value of the axis.

    hAxis: {
      title: 'GEEKBENCH 5 SCORE',
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
      titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
      viewWindow: {
        min: 0,
        max: maxRound  // set max value of axis
      }

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
    ['SNAPDRAGON 870', 914, 3161],
    ['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
    ['SNAPDRAGON 845', 504, 2028],
    ['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
    ['MEDIATEK G95', 501, 1599],
    ['UNISOC TIGER T618', 392, 1441],
    ['UNISOC TIGER T310', 360, 708],
    ['MEDIATEK MT8176', 314, 644],
    ['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
    ['ROCKCHIP RK3399', 269, 615],
    ['BROADCOM BCM2711', 234, 672],
    ['ROCKCHIP RK3326', 86, 272],
    ['MEDIATEK MT6580A', 69, 227],
    ['ROCKCHIP RK3288', 10, 20]
  ]);
  
  var maxStack = null;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
    maxStack = maxStack || rowStack;
    maxStack = Math.max(maxStack, rowStack);
  }
  var maxRound = Math.ceil(maxStack / 1000) * 1000;

  var options = {
    chartArea: {'width': 'auto', 'height': '90%'},
    legend: {
      position: 'top',
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}
    },
    height: 1000,
    isStacked: true,
    hAxis: {
      title: 'GEEKBENCH 5 SCORE',
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
      titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
      viewWindow: {
        min: 0,
        max: maxRound
      }
    },
    series: {
      0:{color:'#F75200'},
      1:{color:'#940000'}
    },
    vAxis: {
      title: 'SOC NAME',
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
      titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="soc_chart"></div>

Upvotes: 2

Related Questions