Dual-Y Example

An example of a Google Dual-Y Line Chart.

by heennkkee

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['line', 'corechart']}]}"></script>
<div id="columnchart_material"></div>

JavaScript

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

function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
        ['Grouping', 'Software', 'Hardware', 'Services'],
        ['Costs', 50000, 80000, 20000]
    ]);

    var options = {
      focusTarget: 'category'  
    };
    
    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
    chart.draw(data1, options);
}