Dual-Y Example

An example of a Google Dual-Y Line Chart.

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width:500px; height:400px;"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
	var data = google.visualization.arrayToDataTable([ 
		['Day', 'Process',{type: 'string', role: 'tooltip', 'p': {'html': true}}],
		[new Date(2017,2,10), 8.18,'<div style="padding:10px;"><p>Process Completed at 8:18 AM</p></div>'],
		[new Date(2017,2,09), 10.12,'<div style="padding:10px;"><p>Process Completed at 10:12 AM</p></div>'],
		[new Date(2017,2,08), 8.15,'<div style="padding:10px;"><p>Process Completed at 8:15 AM</p></div>'],
		[new Date(2017,2,07), 9.36,'<div style="padding:10px;"><p>Process Completed at 9:36</p></div>']
	]); 
		
	var options = { 
		title: 'Process Completion Trend - Last 4 Days', 
		curveType: 'function', 
		legend: { position: 'bottom' }, 
		animation:{ duration: 1000, easing: 'out', startup: true },
		tooltip: {isHtml: true}, 
		hAxis: {format:'E, d-MMM'}, 
		vAxis: {
			title: 'Time of day (GMT)',
			viewWindowMode:'maximized',
            //ticks is used to show custom text instead of actual integrar value
            //for example int value of 8 will be show as 8:00 AM
			ticks: [{v: 8, f: '8:00 AM'}, {v: 9, f: '9:00 AM'}, {v: 10, f: '10:00 AM'}, {v: 11, f: '11:00 AM'}]
		} 
	}; 
		
	var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
	chart.draw(data, options); 
}