Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Max and min values on Google Charts

Tags:

How can I set a max and a min value on a Google Chart?

I've tried this without success:

vAxis: {
    viewWindowMode:'explicit',
        viewWindow: {
            max:3000,
            min:500
        }
    }

This is all the code I'm using:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          vAxis: {
            viewWindowMode:'explicit',
            viewWindow: {
              max:3000,
              min:500
            }
        },
          bars: 'vertical' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, options);
      }
</script>

(example from https://developers.google.com/chart/interactive/docs/gallery/barchart)

Thks in advance.

like image 689
random425 Avatar asked Feb 27 '15 00:02

random425


People also ask

How do you show a value in a Google pie chart?

How to display both Percentage and Values in Google Pie Chart ? You can't display both on the slice labels, but if you set the pieSliceText option to 'label' and the legend. position option to 'labeled' , you will see the value on the slice and the percent on the legend label.

Which is better chart JS or Google charts?

Google Charts is an interactive web service that creates graphical charts from user-supplied information. Chart. js is an open-source JavaScript library that allows you to draw different types of charts by using the HTML5 canvas element.


1 Answers

With the release of Material Charts, Google is modifying how the options are specified. The structure for these options is not yet finalized, so Google provides a converter function for the classic options structure into the new one, and it is recommended that you use it instead of using options that may change in the future.

So you could fix your problem in one of two ways:

  1. You could use the conversion function, as Google recommends (you can see this method demonstrated in this jsfiddle or Google's official documentation (note the note right at the bottom of the linked heading))

      google.load("visualization", "1.0", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          vAxis: {
            viewWindowMode:'explicit',
            viewWindow: {
              max:3000,
              min:500
            }
        },
          bars: 'vertical', // Required for Material Bar Charts.
            width: 800,
            height: 600
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
          

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
    
          <div id="barchart_material"></div>
      
    
  1. You could continue using options that may change in the future. If you do not care about your charts breaking, the option you are looking for is axes.y.all.range.{min,max}. You can see that option in action in this jsfiddle.

google.load("visualization", "1.0", {
    packages: ["bar"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        },
        axes: {
            y: {
                all: {
                    range: {
                        max: 3000,
                        min: 500
                    }
                }
            }
        },
        bars: 'vertical', // Required for Material Bar Charts.
        width: 800,
        height: 600
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));


    chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="barchart_material"></div>

Source: I work on Google Charts.

like image 163
Sergey G Avatar answered Sep 16 '22 16:09

Sergey G