how to fix `visualization.ComboChart` when using string,timeofday,number together on google chart? - charts

Question

I'm trying to create a ComboChart including three columns types string, timeofday, number but I Facing an error "All series on a given axis must be of the same data type" even the column types is there, how to fix that ?
please check the link: https://jsfiddle.net/minamagdy666/2jfn1uec/3/
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
['eee',[8, 30, 45], 5],
['eee',[9, 0, 0], 10],
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
series: {0:{type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Answer 1

first, need to define the seriesType for the chart.
'line', 'area', 'bars', 'candlesticks', or 'steppedArea'
seriesType: 'bars'
next, if each series is not the same type,
(in this case one is number, the other timeofday)
then each series must be on its own y-axis...
1: {targetAxisIndex: 1}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
['eee',[8, 30, 45], 5],
['eee',[9, 0, 0], 10],
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
seriesType: 'bars',
series: {
0:{
type: 'line'
},
1: {
targetAxisIndex: 1
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>