CODEWITHSUNDEEP
google-visualization
Robert Britt
Robert Britt

Reputation: 13

Google Charts vAxis Title not showing

I'm trying to use Google Charts and seem to be running into issues with titles not displaying. Im using a Column Chart and the vAxis title is not displaying. I also started to make a Material Line Chart and I'm running into the same issue.

Here's the Material Line Chart code:

<html>
<head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','line']});  
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Cycle ID');
   data.addColumn('number', '5A Continuous');
   data.addColumn('number', '10A Continuous');
   data.addColumn('number', '20A Continuous');
   data.addColumn('number', '10A Pulse');
   data.addColumn('number', '20A Pulse');
   data.addRows([
                    ['1',       2548,   2319,   828,    2348,   2192],
                    ['2',       2537,   2306,   829,    2362,   2187],
                    ['3',       2533,   2301,   833,    2347,   2170],
                    ['4',       2530,   2300,   833,    2343,   2156],
                    ['5',       2526,   2297,   837,    2339,   2147],
                    ['6',       2519,   2294,   839,    2340,   2142],
                    ['7',       2510,   2287,   838,    2356,   2146],
                    ['8',       2506,   2276,   839,    2359,   2139],
                    ['9',       2504,   2275,   840,    2346,   2127],
                    ['10',      2500,   2274,   838,    2336,   2119],
        ]);
    var formatter = new google.visualization.NumberFormat({
            pattern: '####'
        });
        formatter.format(data, 1);
        formatter.format(data, 2);
        formatter.format(data, 3);
        formatter.format(data, 4);
        formatter.format(data, 5);

   // Set chart options
   var options = {
      chart: {
         title: 'LG HG2 Battery Performance Over Cycles',
      },   
      hAxis: {
         title: 'Cycle ID',         
      },
      vAxis: {
         title: 'Milliamp Hours',        
      }, 
      'width':550,
      'height':400,
      lineWidth: 20,
   };

   // Instantiate and draw the chart.
   var chart = new google.charts.Line(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Here's the Column Chart Code:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // create and populate data table,

      function drawChart() {

        // Create the data table.
        var data = google.visualization.arrayToDataTable([
         ['Test', 'Average mAh', { role: 'style' }],
         ['Manufacturer Specification', 3000, '#804000' ],
         ['10A Continuous', 2249.970, '#804000' ],
         ['20A Continuous', 678.349, '#804000'],
         ['10A Pulsed', 2327.558, '#804000'],
         ['20A Pulsed', 2080.586, '#804000'],         
         ]);

      var formatter = new google.visualization.NumberFormat({
            pattern: '####'
        });
        formatter.format(data, 1);

        // Set chart options
        var options = {'title':'Tested Average mAh Ratings - LG HG2',
                       'width':800,
                       'height':600,
                       legend: {position: 'none'},
                       bar: {groupWidth: '90%'},
                       vAxis: { gridlines: { count: 8 }, minValue: 500}
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Any help is greatly appreciated!

Upvotes: 1

Views: 4725

Answers (2)

GrahamA
GrahamA

Reputation: 69

I'm creating a chart in Google Script and couldn't set the vAxis title either, and similarly couldn't modify some other attributes. I found success by modifying vAxes[0] instead.

chart.setOption('vAxes', {0: {title: 'title Text'} } )

or if you're using an options variable:

vAxes: { 0: { title: 'Milliamp Hours' } }

Hope this helps anyone with the same issue.

Upvotes: 1

Kevin Schellenberg
Kevin Schellenberg

Reputation: 845

Material charts are in beta and you must use a converter function on your options to ensure they work properly. Here is an example:

chart.draw(data,  google.charts.Line.convertOptions(options));

For your column chart, you must explicitly set the vaxis.title option like so:

vAxis: { title: 'Average mAh', gridlines: { count: 8 }, minValue: 500}

Upvotes: 4

Related Questions