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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×