An Example of a Google Bar Chart

by martinmahieu

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

JavaScript

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCrosshairs);

function drawCrosshairs() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Colissimo sans signature');
      data.addColumn('number', 'Colissimo remis contre signature');

      data.addRows([
        [1,6.5,7.4],
[2,7.5,8],
[3,7.5,8.5],
[4,8.5,9.5],
[5,8.5,9.5],
[6,8.5,9.5],
[7,8.5,9.5],
[8,9.4,10.2],
[9,9.4,10.2],
[10,9.4,10.2],
[11,9.4,10.2],
[12,10,11],
[13,10,11],
[14,10,11],
[15,10,11],
[16,11,11.9],
[17,11,11.9],
[18,11,11.9],
[19,11,11.9],
[20,11.8,12.7],
[21,11.8,12.7],
[22,11.8,12.7],
[23,11.8,12.7],
[24,12.5,13.5],
[25,12.5,13.5],
[26,12.5,13.5],
[27,13.5,14.3],
[28,13.5,14.3],
[29,13.5,14.3],
[30,13.5,14.3],
[31,14,16],
[32,14,16],
[33,14,16],
[34,14,16],
[35,15,16],
[36,15,16],
[37,15,16],
[38,15,16],
[39,16.5,17.5],
[40,16.5,17.5],
[41,16.5,17.5],
[42,16.5,17.5],
[43,16.5,17.5],
[44,16.5,17.5],
[45,16.5,17.5],
[46,16.5,17.5],
[47,18.8,20],
[48,18.8,20],
[49,18.8,20],
[50,18.8,20],
[51,18.8,20],
[52,18.8,20],
[53,18.8,20],
[54,18.8,20],
[55,18.8,20],
[56,18.8,20],
[57,18.8,20],
[58,23,25],
[59,23,25],
[60,23,25],
[61,23,25],
[62,23,25],
[63,23,25],
[64,23,25],
[65,23,25],
[66,23,25],
[67,23,25],
[68,23,25],
[69,23,25],
[70,23,25],
[71,23,25],
[72,23,25],
[73,23,25],
[74,23,25],
[75,23,25],
[76,23,25],
[77,27,28],
[78,27,28],
[79,27,28],
[80,27,28],
[81,27,28],
[82,27,28],
[83,27,28],
[84,27,28],
[85,27,28],
[86,27,28],
[87,27,28],
[88,27,28],
[89,27,28],
[90,27,28],
[91,27,28],
[92,27,28],
[93,27,28],
[94,27,28],
[95,27,28],
[96,27,28]
      ]);

      var options = {
        hAxis: {
          title: 'Nombre de godets livrés'
        },
        vAxis: {
          title: 'Prix €'
        },
        colors: ['#2A2D69', '#7a1949'],
        crosshair: {
          color: '#000',
          trigger: 'selection'
        }
      };

      var chart = new...