How to create custom bar chart using google charts?

Question

I want to create bar chart using google charts Condition to create chart is like Bar should have fixed width and padding between the bars and it should be plot at center of grid lines.

I used google chart for this .

 google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Element", "Density", { role: "style" } ],
    ["Copper", 8.94, "#b87333"],
    ["Silver", 10.49, "silver"],
    ["Gold", 19.30, "gold"],
    ["Platinum", 21.45, "color: #e5e4e2"]
  ]);

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

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {
        groupWidth: 20
    },
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
   }
   function getValueAt(column, dataTable, row) {
    return dataTable.getFormattedValue(row, column);
  }

JsFiddle for the same

I want to create something like this.

WhiteHat WhiteHat · Accepted Answer · 2018-09-04T13:18:11

in order to get the bars between the gridlines,
will need to use a continuous data type for the x-axis,
timeofday will work, which takes an array of either 3 or 4 numbers,
representing hours, minutes, seconds, and optionally milliseconds, respectively

['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
...

set the data values at the half minute mark,
then use ticks at the full minute mark...

ticks: [
  [9, 0, 0],
  [10, 0, 0],
  ...

for padding between the bars, use a percentage...

bar: {
  groupWidth: '95%'
},

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Value'],
    [[9, 30, 0], 20],
    [[10, 30, 0], 30],
    [[11, 30, 0], 57],
    [[12, 30, 0], 70],
    [[13, 30, 0], 80],
    [[14, 30, 0], 55],
    [[15, 30, 0], 45],
    [[16, 30, 0], 20],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getFormattedValue(row, 1);
    },
    role: 'annotation',
    type: 'string'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true,
      stem: {
        color: '#cb4335',
        length: 20,
      },
    },
    bar: {
      groupWidth: '95%'
    },
    colors: ['#cb4335'],
    hAxis: {
      format: 'ha',
      gridlines: {
        color: 'transparent'
      },
      ticks: [
        [9, 0, 0],
        [10, 0, 0],
        [11, 0, 0],
        [12, 0, 0],
        [13, 0, 0],
        [14, 0, 0],
        [15, 0, 0],
        [16, 0, 0],
      ],
    },
    height: 400,
    legend: {position: 'none'},
    tooltip: {trigger: 'none'},
    vAxis: {
      textStyle: {
        color: 'transparent'
      }
    },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
  chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

EDIT

to expand the gridlines, use option hAxis.viewWindow.min & max

and chartArea.width can extend the chart to the edges of the chart container

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Value'],
    [[9, 30, 0], 20],
    [[10, 30, 0], 30],
    [[11, 30, 0], 57],
    [[12, 30, 0], 70],
    [[13, 30, 0], 80],
    [[14, 30, 0], 55],
    [[15, 30, 0], 45],
    [[16, 30, 0], 20],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getFormattedValue(row, 1);
    },
    role: 'annotation',
    type: 'string'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true,
      stem: {
        color: '#cb4335',
        length: 20,
      },
    },
    bar: {
      groupWidth: '95%'
    },
    chartArea: {
      width: '100%'
    },
    colors: ['#cb4335'],
    hAxis: {
      format: 'ha',
      gridlines: {
        color: 'transparent'
      },
      ticks: [
        [9, 0, 0],
        [10, 0, 0],
        [11, 0, 0],
        [12, 0, 0],
        [13, 0, 0],
        [14, 0, 0],
        [15, 0, 0],
        [16, 0, 0],
      ],
      viewWindow: {
        min: [6, 0, 0],
        max: [20, 0, 0]
      }
    },
    height: 400,
    legend: {position: 'none'},
    tooltip: {trigger: 'none'},
    vAxis: {
      textStyle: {
        color: 'transparent'
      }
    },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
  chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

How to create custom bar chart using google charts?

1 Answers