Google combo chart issue - php

Question

I am trying to create a combo chart using google charts,
in HTML added below CDN and div
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: auto; height: 500px;"></div>
the result of
var examname = <?php echo json_encode($examnames); ?>;
var highestScore = <?php echo json_encode($heighestScores); ?>;
var userScore = <?php echo json_encode($userScores); ?>;
is
var examname = ["Test Name 1", "Full Test", "Knowledge"];
var highestScore = ["8", "11", "10"];
var userScore = ["6", "11"];
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var graphData = new google.visualization.DataTable();
graphData.addColumn('string', 'TestName');
graphData.addColumn('number', 'Height');
graphData.addColumn('number', 'YourScore');
for (var i = 0; i < examname.length; i++) {
if (userScore[i] === undefined) {
userScore[i] = 0;
}
console.log(userScore[i]);
graphData.addRow(examname[i], {
v: highestScore[i],
f: userScore[i]
});
}
//graphData = graphData.replace(/'/g, '"');
//var data = google.visualization.arrayToDataTable(graphData);
console.log(data);
var options = {
title: 'Score Dashboard',
vAxis: {
title: 'Score'
},
hAxis: {
title: 'Exam Name'
},
seriesType: 'bars',
series: {
5: {
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(graphData, options);
}
JSFIDDLE
I am getting an error:
Error: If argument is given to addRow, it must be an array, or null
even I searched in google but I didn't understand. Please could any one help me to resolve the issue.

Answer 1

Your passing (string, object). When it's expecting just (array).
Change
graphData.addRow(examname[i], {
v: highestScore[i],
f: userScore[i]
});
To
graphData.addRow([
examname[i],
Number(highestScore[i]),
Number(userScore[i])
]);
Working example: https://jsfiddle.net/g4vjvam9/
Note: If you want the last column filled, you need to add the value :/
var userScore = ["6", "11", "2"];
Also avoid strings else your need to use Number() like above.