5

I want to show the x-axis heading of a column chart using google charts in Android web view. I am trying to show the x-axis heading as Year in 

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]
  ]);

But it is not showing heading. Complete Code;

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

     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 = {
    animation:{
      duration: 1000,
      easing: 'linear',
      startup: true
    },
    height: 600,
    theme: 'material',
    title: 'Company Performance'
  };

       var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
  chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>
morganfree
  • 12,254
  • 1
  • 14
  • 21
Humty
  • 1,321
  • 3
  • 18
  • 35

1 Answers1

3

i think the option you're looking for is --> hAxis.title 

    hAxis: {
      title: 'Year'
    },

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

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 = {
    animation:{
      duration: 1000,
      easing: 'linear',
      startup: true
    },
    height: 600,
    hAxis: {
      title: data.getColumnLabel(0)
    },
    theme: 'material',
    title: 'Company Performance'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • Superb. But what is the reason for not showing heading defined at ` ['Year', 'Sales', 'Expenses', 'Profit'],`? – Humty Mar 11 '17 at 15:40
  • those are the headings for the columns in the data -- you can use those with --> `data.getColumnLabel(0)` -- see changed answer above... – WhiteHat Mar 11 '17 at 15:45
  • can we generate images with this rendered chart? – Ali Zaib Sep 30 '22 at 12:16
  • you can use the `getImageURI` method `chart.getImageURI()` --> [here is an example](https://stackoverflow.com/a/38464203/5090771)... – WhiteHat Sep 30 '22 at 20:59