CODEWITHSUNDEEP
javascripthtmlcssgoogle-apigoogle-visualization
Arunprasath
Arunprasath

Reputation: 561

How to set y axis format and remove y axis border line of columnchart package in google api chart?

I am using google api chart in column chart package created to chart. but in this chart cannot be remove y axis line and cannot be set y axis format.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
            width: 400, 
            height: 240, 
            legend: 'none',
            bar: { groupWidth: '50%' }

        };

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

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

Upvotes: 0

Views: 972

Answers (3)

Deepak Porwal
Deepak Porwal

Reputation: 111

    function drawVisualization() {
          // Create and populate the data table.
          var data = google.visualization.arrayToDataTable([
            ['x', 'Report'],
            ['2013-12-20 10:20:30',   1],
            ['2013-12-20 10:30:30',   2],
            ['2013-12-20 12:20:30',   4],
            ['2013-12-21 10:20:30',   5],
            ['2013-12-21 20:20:30',   2],
            ['2013-12-22 20:20:30',   2],

          ]);

          // Create and draw the visualization.
          new google.visualization.ColumnChart(document.getElementById('visualization')).
              draw(data, {
                          width: 500, height: 400,
                         vAxis: {title: "Health Chart",ticks: [{v:5, f:"Healthy"},{v:2, f:"Unhealthy"},{v:4, f:"Better"},{v:1, f:"Not Good"}]},}
                  );
        }
        google.setOnLoadCallback(drawVisualization);

  google.setOnLoadCallback(drawVisualization);

You can run this code on google code playground (ie https://code.google.com/apis/ajax/playground/#line_chart) And change vAxis according to your options.

Upvotes: 0

Arunprasath
Arunprasath

Reputation: 561

In this google api chart using columnchart package. column chart package is one of the oldest package, in this package there is no more customization. so we are not set y axis format and remove y axis border line.

google.load("visualization", "1", {packages:['columnchart']});

the newest version of google api chart package is core chart package. that is

google.load('visualization', '1', {packages:['corechart']});

suppose we are using this package. possible for y axis format and remove y axis border line.

Upvotes: 0

asgallant
asgallant

Reputation: 26330

Don't use the 'columnchart' package - it is old and deprecated. Use the newer 'corechart' package instead:

google.load('visualization', '1', {packages:['corechart']});

That enables the options you need to format your chart the way you want it. See the complete list of options here. By default, with the 'corechart' package, there will not be a line on the y-axis in your sample code. You can format the axis values using the vAxis.format option:

vAxis: {
    format: '$#,###'
}

Upvotes: 2

Related Questions