Two lines on a line graph with non proportional values - graph

Question

I am trying to get a googlecharts line graph to show me two line graphs with a Y axis of date and an x axis of total amount of substance used. It will be a line graph comparing, for example the total amount of alcohol consumed to tobacco consumed in total per each day.
The area i'm struggling with is figuring out how to show these lines more closely in relation to each other. The amount of total alcohol consumed in a day might be something like 1000mL with a range of 900 to 1100 while tobacco might just be something like 3 with a range of 2 - 4. As you can see, on a line graph these lines will be very far away from each other, and not really showing the correlation.
What would be the best system to do this with?

Answer 1

What you want is a combo chart. I started with the example code from the Combo Chart, changed the last column, and added the second axis. The parameter you care most about is the targetAxisIndex parameter.
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6/100],
['2005/06', 135, 1120, 599, 1268, 288, 682/100],
['2006/07', 157, 1167, 587, 807, 397, 623/100],
['2007/08', 139, 1110, 615, 968, 215, 609.4/100],
['2008/09', 136, 691, 629, 1026, 366, 569.6/100]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line", "targetAxisIndex": "1"}}
});
}