Old school D3 from simpler times

All examples By author By category About

genesisbertiz

Full window Github gist

3 bar chart

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <style>
    
  </style>
</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']});  
      function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Month', 'Sales', 
                { role: 'annotation'} ,'Sales Return', 
                { role: 'annotation'}, 'Actual Sales', 
                {role: 'annotation'}, {role : 'tooltip'}],
               ['07-20-18',  
                -900,'-900',      
                390, '390', 
                390, '390', 
                '07-01-2018\n\nSales: -900'],
               ['07-21-18',  
                1000,'1000',      
                400,'400', 
                390, '3390', 
                'y'],
               ['07-22-18',  
                1170,'1170',      
                440,'440', 
                390, '390', 
                ''],
               ['07-23-18',  
                1250,'1250',       
                480,'480', 
                390, '390', 
                ''],
               ['07-24-18',  
                1530,'1530',      
                540,'540', 
                390, '390', 
                '']
            ]);

var options = {
            };

// Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('barchart_material'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
    </script>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>

https://www.gstatic.com/charts/loader.js