Google charts Bar Chart creation - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Bar Chart

Description

Google charts Bar Chart creation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      google.charts.setOnLoadCallback(drawChartTwo);
      function drawChart() {/*  w w  w.  ja  v a  2s.c  o  m*/
        var data = google.visualization.arrayToDataTable([
          ['Date', 'val1', 'val2' , 'val3', 'val4'],
          [ '09',  12, 5, 9, 2],
          [ '10',  32, 19, 16, 9],
          [ '11',  2, 7, 5, 12],
          [ '12',  23, 11, 9, 18],
          [ '13',  5, 7, 4, 12],
          [ '14',  21, 16, 12, 43],
          [ '15',  2, 1, 2, 3],
          [ '16',  9, 12, 18, 32],
        ]);
        var options = {
          height: 400,
          title: 'Viste journali?re',
          intervals: { 'style':'area' },
          hAxis: {title: 'Jour',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      function drawChartTwo() {
        var data = google.visualization.arrayToDataTable([
          ['Titre', 'Comment', 'like', 'no'],
          [ 'text1',  7, 10, 3],
          [ 'text2',  2, 4, 5],
          [ 'text3',  4, 3, 2],
        ]);
        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    
      </script> 
      <div class="row"> 
         <div class="col-md-12" style="padding-left:3px; padding-right:3px"> 
            <div id="chart_div" style="width: 100%; height: 420px;"></div> 
         </div> 
      </div> 
      <div class="row"> 
         <div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px"> 
            <div id="barchart_material" style="width: 900px; height: 500px;"></div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials