Getting Error while loading data using angularjs and google charts - angularjs

Question

I am getting "All series on a given axis must be of the same data type" when loading the data.Please find the fiddle code in the below link
https://jsfiddle.net/smsh/9y5hrvne/
var app = angular.module('app', []);
app.directive('chart', function() {
return {
restrict: 'EA',
replace: true,
scope: {
data: '=data'
},
// template: '<div class="chart"></div>',
link: function(scope, element, attrs) {
var chart = new google.visualization.LineChart(element[0]);
var options = {
hAxis: {
gridlines: {
color: 'transparent'
},
format :"MMM dd",
textStyle:{
color: '#FFF',
fontName: 'Verdana',
fontSize: 11
},
showTextEvery:2
},
vAxis: {
gridlines:{
count:4,
color: '#FFF'
},
baselineColor:"#FFF",
format: '#\'%\'',
textStyle:{
color: '#FFF',
fontName: 'Verdana',
fontSize: 11
},
},
pointSize: 6,
pointShape: { type: 'circle' },
lineWidth:2,
legend: {
position: 'none'
},
backgroundColor: '#000000',
tooltip: {
textStyle: {
fontName: 'Calibri',
fontSize: 12
}
}
};
scope.$watch('data', function(v) {
var data = google.visualization.arrayToDataTable(v);
chart.draw(data, options);
});
}
};
});
app.controller('ChartController', function($scope) {
$scope.scoreHistory = [];
$scope.loadDataFromServer = function() {
var x = [
['interval', 'count','color']
];
var scoreHistory = [
{
intervalStart:new Date(2013, 5,1),
count:33,
color:'#ED1C24'
},
{
intervalStart:new Date(2013, 5,7),
count:50,
color: '#FFC90E'
},
{
intervalStart:new Date(2013, 5,8),
count:22,
color: '#ED1C24'
},
{
intervalStart:new Date(2013, 5,9),
count:45,
color: '#FFC90E'
},
{
intervalStart:new Date(2013, 5,13),
count:83,
color: '#ED1C24'
},
{
intervalStart:new Date(2013, 5,18),
count:80,
color: '#22B14C'
},
{
intervalStart:new Date(2013, 5,23),
count:100,
color: '#22B14C'
}
];
angular.forEach(scoreHistory, function(record, key) {
x.push([
record.intervalStart,
record.count,
record.color
]);
});
$scope.scoreHistory = x;
};
});
This controller i am using for getting the data and creating a angular directive to show the google line chart data in the UI.

Answer 1

you are getting "All series on a given axis must be of the same data type" because
$scope.scoreHistory = [["interval", "count", "color"], [Sat Jun 01 2013 00:00:00 GMT+0200 (CEST), 33, "#ED1C24"], ...]
your first element of array are your series, all strings and the rest of the elements is a data to display, don't think that the structure is right here, please check this link to have a look how this should be done.

Answer 2

I got the solution by doing the below code snippets:-
var x = [
['Date', 'Percentage', {'type': 'string', 'role': 'style'}]
];
var scoreHistory = [
{
intervalStart:new Date(2013, 5,1),
count:33,
color:'#ED1C24'
},