Dual-Y Example

An example of a Google Dual-Y Line Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['line', 'corechart']}]}"></script>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
    <!--Divs that will hold each control and chart-->
    <div id="filter_div"></div>
    <div>
        <br>
        <br>
    </div>
    <div id="TeamName"></div>
    <div id="chart_div"></div>
    <div id="pie_div"></div>
    <div id="table_div"></div>
</div>

JavaScript

google.setOnLoadCallback(drawDashboard);
google.load('visualization', '1.0', {
    'packages': ['controls', 'corechart']
});


function drawDashboard() {

    var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
        	dataTable:data,
            'options': {
            'filterColumnLabel': 'Month'
        }
    });

    var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'TeamName',
        dataTable:data,
        options: {
            filterColumnLabel: 'Teams', // filter by Team name
            ui: {
                caption: 'Choose a Team',
                sortValues: true,
                allowNone: true,
                allowMultiple: true,
                allowTyping: true
            }

        }
    });

    var columnChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'chart_div',
        dataTable:data,
        'options': {
                'width': 600,
                'height': 400,
                'legend': 'none',
                'hAxis': {
                'title': 'Teams',
                'titleColor': '#cc0000',
                'titleFontSize': 20
            },
            'vAxis': {
                'title': 'Utilization',
                'titleColor': '#cc0000',
                'titleFontSize': 20
            }
        }
    });
	
    categoryPicker.draw();
    donutRangeSlider.draw();
    
         redrawColumnChart();
        
        google.visualization.events.addListener(donutRangeSlider, 'statechange', function () {
        	redrawColumnChart();
   		});
        google.visualization.events.addListener(categoryPicker, 'statechange', function () {
        	redrawColumnChart();
    	});
    
    function redrawColumnChart(){
       	var monthFilter = {column:2, minValue:donutRangeSlider.getState().lowValue,...