Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Friday, February 23, 2018

Everything about google column chart

column chart is a graphical representation of data. Where column chart displays data as vertical bars. Here we are showing a simple example of column chart with the help of Google API.

The below column chart represents the company performance in the last five years. Representing years on the x-axis and performance count on the y-axis.

Here is the sample 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':['bar']});
      google.charts.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],
          ['2018', 1000, 500, 300]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Add these lines to your options variable

1. For 3D model pie chart.
is3D: true,

2. Adding background to pie chart
backgroundColor: 'skyblue',

3. Change title text color and size
titleTextStyle: { color: 'red', fontSize:16},

4. Change colors of column bars
colors: ['#e0440e', '#e6693e', '#ec8f6e'],

5. Change bar width
bar: {groupWidth: '50%'},

Result

6 comments:

  1. Thank you so much for providing such a useful content. Digital Signature Certificate

    ReplyDelete
  2. Digital signatures have really improved the security level .To make the documents secure digital signature and encryption is the best way. And temperament is really not easy. Digital Signature Certificate

    ReplyDelete
  3. Thanks very nice share this concept is a good way to enhance the knowledge. Apply Class 3 Digital Signature Certificate

    ReplyDelete
  4. Sharing this sort of educational posts.Thank you very much. Class 2 Digital Signature Certificate

    ReplyDelete
  5. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW