Old school D3 from simpler times

All examples By author By category About

genesisbertiz

Full window Github gist

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">
  function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Sales","Sales Return", { role: "style" } ],
        ["07-20-18", -8.94, 20,""],
        ["07-21-18", 1.49, 30, ""],
        ["07-22-18", -19.30, 40, ""],
        ["07-23-18", 41.45, 50, ""]
      ]);

var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

var options = {
        title: "Sales Top List",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
</body>

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