An Example of a Google Bar Chart

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
 <div id="line-chart-marker"></div>

JavaScript

google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time');
      data.addColumn('number', 'Temp');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn({type:'string', role:'annotation'});
      data.addRows([
        [[4, 56, 00], 0, '0', 'rain'],    [[5, 56, 00], 10, '10', 'drizzle'],   [[6, 56, 00], 23, '23', 'cats'],  [[7, 56, 00], 17, '17', 'partly cloudy'],   [[8, 56, 00], 18, '18', 'sunny'],  [[9, 56, 00], 9, '9', 'sunny'],  [[10, 56, 00], 11, '9', 'sunny'], ]);


      var options = {
        hAxis: {
          gridlines:{ color:'transparent' }, 
        },
        vAxis: {
          gridlines:{ color:'transparent' },
          textPosition: 'none' 
        },
        legend: 'none',
        colors: ['black'],
        curveType: 'function',
        series: {
            0: { lineWidth: 5 },
          },
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker'));
      chart.draw(data, options);
    }