Google Charts - Column Chart Example

NO GOOD - Google Chart API creates a Canvas

by Kamal Kumawat

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

function drawChart() {
        var data = google.visualization.arrayToDataTable(
            [
                [ 'Date','MB_Xmt' ],
                [ "10/2/2019 3:00:00 PM", 1200 ],
                ]);
			 var data1 = google.visualization.arrayToDataTable(
            [
                [ 'Date','tEST' ],
                [ "10/2/2019 3:00:00 PM", 100 ],
                ]);
				var data2 = google.visualization.arrayToDataTable(
            [
                [ 'Date','MB' ],
                [ "10/2/2019 3:00:00 PM", 540],
                ]);
				var joinTable = google.visualization.data.join(data, data1, 'full', [[0, 0]], [1], [1]);
    		var joinTable2 = google.visualization.data.join(joinTable, data2 , 'full', [[0, 0]], [1, 2], [1]);
        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
        };

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

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);