Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

set x Axis range in google chart

I try to create bar chart using google chart example

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');

    data.addColumn('number', 'Slices');

    data.addRows([
      ['Mushrooms', 5],
      ['Onions', 4],
      ['Olives', 3]
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

Chart is created successfully but on X-Axis it shows value from 0 to 6. When i pass all values as 0 it shows X-Axis from -1 to +1.

Is it possible to set X-Axis to always start from 0% to 100%.

like image 843
dmay Avatar asked Jan 24 '14 19:01

dmay


People also ask

How do you set X axis values?

To change the axis type to a text or date axis, expand Axis Options, and then under Axis Type, select Text axis or Date axis. Text and data points are evenly spaced on a text axis.


1 Answers

You can force the x-axis of a BarChart to always show a certain range by setting the hAxis.viewWindow.min and hAxis.viewWindow.max options:

hAxis: {
    viewWindow: {
        min: 0,
        max: 100
    },
    ticks: [0, 25, 50, 75, 100] // display labels every 25
}
like image 103
asgallant Avatar answered Oct 14 '22 00:10

asgallant