Combo Chart Example

An example of a Google Combo Chart.

by kunalvashist

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <div id="columnchart_values" style="height: 300px;"></div>

JavaScript

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 colors = ['#cd6155', '#5499c7'];
      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {
            groupWidth: 20
        },
        legend: { position: "none" },
        chartArea:{left:20,top:0,width:'50%'}
      };
      var container = document.getElementById("columnchart_values");
      var chart = new google.visualization.ColumnChart(container);
      
       google.visualization.events.addListener(chart, 'ready', changeBorderRadius);
    google.visualization.events.addListener(chart, 'select', changeBorderRadius);
    google.visualization.events.addListener(chart, 'onmouseover', changeBorderRadius);
    google.visualization.events.addListener(chart, 'onmouseout', changeBorderRadius);
	
  	function changeBorderRadius() {
      chartColumns = container.getElementsByTagName('rect');
      Array.prototype.forEach.call(chartColumns, function(column) {
        if ((colors.indexOf(column.getAttribute('fill')) > -1) ||
            (column.getAttribute('fill') === 'none') ||
            (column.getAttribute('stroke') === '#ffffff')) {
          column.setAttribute('rx', 10);
          column.setAttribute('ry', 20);
        }
      });
    }
    
      chart.draw(view, options);
  ...