CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Jacob Krieg
Jacob Krieg

Reputation: 3184

Google Chart Visualisation Bar Drawing Not Shown

I am working with Google Chart Visualisation and I'm using a Combo Chart with some data I am using. I've noticed that for certain values, the bar is not shown.

I'm using an example found at this page using JSFiddle to better explain the problem: https://developers.google.com/chart/interactive/docs/gallery/combochart

HTML code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript code:

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

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Bolivia', 'Ecuador'],
      ['2004/05',  881,      938   ],
      ['2004/06',  880,      938   ]
    ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {title: 'Month'},
      seriesType: 'bars',
      series: {1: {type: 'line'}}
    };

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

This is what the output is for this model:

enter image description here

But if I change the first row from ['2004/05', 881, 938] to ['2004/05', 880, 938 ] so that the Bolivia values are the same, 880, the output is the following:

enter image description here

and the bars are not shown anymore, because the graph begins at 880 and not 870 as in the first example.

This also reproduces for close values, e.g.

['Month', 'Bolivia', 'Ecuador'],
['2004/05',  92,      95   ],
['2004/06',  92,      95   ]

My question is: Is it possible to force the graph to always start e.g. from 870 so that the bar is always drawn?

Upvotes: 1

Views: 30

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

you can use option viewWindow on the vAxis.

viewWindow has properties for min & max. 

  viewWindow: {
    min: 870
  }

see following working snippet.. 

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

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05',  880,      938   ],
    ['2004/06',  880,      938   ]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      viewWindow: {
        min: 870
      }
    },
    height: 500,
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };

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

another option is ticks.
you can provide the value for each label to be displayed. 

  ticks: [870, 880, 890, 900, 910, 920, 930, 940]

see following working snippet... 

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

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05',  880,      938   ],
    ['2004/06',  880,      938   ]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      ticks: [870, 880, 890, 900, 910, 920, 930, 940]
    },
    height: 500,
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };

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

Upvotes: 1

Related Questions