Secondary y axis values not displayed in Google Charts - google-visualization

Question

I am trying to use secondary y axis with google charts.
I have this code:
arrdata.addRows([
[ObservationDateTime, observationValueCD4, observationValueViralLoad]
]);
}
// start of drawchart()
var options2 = {
title: 'CD4 && ViralLoad v/s DateTime',
vAxes: [{
title: 'CD4',
textStyle: {
color: 'blue'
}
}, // Axis 0
{
title: 'Viral Load',
textStyle: {
color: 'red'
}
} // Axis 1
],
hAxis: {
title: "Date"
},
series: {
0: {
type: "bars",
targetAxisIndex: 0
},
1: {
type: "line",
targetAxisIndex: 1
}
}
};
However, I am a bit confused with what is rendered:
It just renders blue straight vertical lines pointing up and no red line.Though secondary y axes in rendered.
What I expect: I expect blue bars for values on left y axis and red line for values on right y axes.

Answer 1

Without more code or sample data I can't say for sure what your issue is but your options seem to be correct for what you want.
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["ObservationDateTime", "observationValueCD4", "observationValueViralLoad"],
[new Date(2015,1,1), 9, 4],
[new Date(2015,2,1), 11, 6],
[new Date(2015,3,1), 20, 2],
[new Date(2015,4,1), 21, 3]
]);
var options2 = {
title: 'CD4 && ViralLoad v/s DateTime',
vAxes: [{
title: 'CD4',
textStyle: {
color: 'blue'
}
}, // Axis 0
{
title: 'Viral Load',
textStyle: {
color: 'red'
}
} // Axis 1
],
hAxis: {
title: "Date"
},
series: {
0: {
type: "bars",
targetAxisIndex: 0
},
1: {
type: "line",
targetAxisIndex: 1
}
}
};
var chart = new google.visualization.LineChart(document.getElementById("chart"));
chart.draw(data, options2);
}
// start of drawchart()
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>