Google Charts - Google Charts tutorial - Basic Bar Chart - chart js - google graphs - google charts examples




Overview:

A bar chart that is rendered as an image using the Google Charts API.

Example:

 Tryit<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagebarchart"]});
      google.charts.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 chart = new google.visualization.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:

Loading:

The google.charts.load package name is "imagebarchart"

  google.charts.load("current", {packages: [[]"imagebarchart"]});
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

The visualization's class name is google.visualization.ImageBarChart

var visualization = new google.visualization.ImageBarChart(container);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Coloring bars:

Let's chart the densities of four precious metals:

 basic bar chart coloring bars in google charts

Learn Googlecharts - Googlecharts tutorial - basic bar chart coloring bars in google charts - Googlecharts examples - Googlecharts programs

  • Above, all colors are the default blue. That's because they're all part of the same series; if there were a second series, that would have been colored red.
  • We can customize these colors with the style role:
 basic bar chart customizing bars in googlecharts

Learn Googlecharts - Googlecharts tutorial - basic bar chart customizing bars in googlecharts - Googlecharts examples - Googlecharts programs

There are three different ways to choose the colors, and our data table showcases them all: RGB values, English color names, and a CSS-like declaration:

var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Bar styles:

The style role lets you control several aspects of bar appearance with CSS-like declarations:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width
 bar styles in basic bar chart in google chart

Learn Googlecharts - Googlecharts tutorial - bar styles in basic bar chart in google chart - Googlecharts examples - Googlecharts programs

  • We don't recommend that you mix styles too freely inside a chart-pick a style and stick with it-but to demonstrate all the style attributes, here's a sampler:
  • The first two bars each use a specific color (the first with an English name, the second with an RGB value).
  • No opacity was chosen, so the default of 1.0 (fully opaque) is used; that's why the second bar obscures the gridline behind it. In the third bar, an opacity of 0.2 is used, revealing the gridline.
  • In the fourth bar, three style attributes are used: stroke-color and stroke-width to draw the border, and fill-color to specify the color of the rectangle inside.
  • The rightmost bar additionally uses stroke-opacity and fill-opacity to choose opacities for the border and fill:
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team


Related Searches to Google Charts - Basic Bar Chart