Top-X Example

An example of a Google Top-X Column Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="columnchart_material" style="width: 100%; height: 500px;"></div>

JavaScript

google.load("visualization", "1.1", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Heure', 'Données', { role: 'style' }],
        
				['Bar1', 5, '#dc3912'],
		
				['Bar2', 4, '#dc3912'],
		
				['Bar3', 2, '#dc3912'],
		
        ]);

        var options = {
          chart: {
            title: 'Nombre de bar rouge.',
            subtitle: 'Données par heure',
          }        
		};
        
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, options);
      }