I am attempting to show a line chart with a range filter in Google Charts using HTML and Javascript, but whenever I run the draw()
function, the code tells me that I used the wrong data datatype for the draw()
argument (it should be a DataTable
). However, I contruct my data using arrayToDataTable()
, which according to the Google Charts API documentation, creates a DataTable. Here is my full code:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//Chart data
google.charts.load('current',{'packages':['controls']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard(){
var dataSet = google.visualization.arrayToDataTable([
[{label:'date',type:'datetime'},{label:'Bytes from network:Bytes to network',type:'number'}],
[new Date(2016,01,23,00,00),1.0],
[new Date(2016,01,23,01,00),1.0075187969924813],
[new Date(2016,01,23,03,00),1.126865671641791],
[new Date(2016,01,24,22,00),0.987012987012987],
[new Date(2016,01,25,01,00),1.0],
[new Date(2016,01,25,02,00),0.9166666666666666],
[new Date(2016,01,25,10,00),1.0],
[new Date(2016,01,26,12,00),1.0],
[new Date(2016,01,27,17,00),0.9864864864864865],
[new Date(2016,01,28,22,00),0.03125],
[new Date(2016,02,01,22,00),0.97],
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var dateRangeFilter = new google.visualization.ControlWrapper({'controlType':'ChartRangeFilter','containerId':'filter_div','options': {'filterColumnLabel':'date'}});
var lineChart = new google.visualization.ChartWrapper({'chartType':'LineChart','containerId':'curve_chart','options':{'title': 'Total Bytes from the Source Network to Total Bytes To the Source Network per Day','curveType': 'function','legend': {'postition':'bottom'}}});
dashboard.bind(dateRangeFilter,lineChart);
dashboard.draw(dataSet);
}
</script>
</head>
<body>
<!--draw charts using corresponding div tags-->
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="curve_chart" style="width:900px;height:500px"></div>
</div>
</body>
</html>
As one can see, I create a variable called dataSet
using google.visualization.arrayToDataTable()
, which returns a DataTable
. Then, at the bottom of the drawDashboard()
method, I call dashboard.draw(dataSet)
, which throws the error
You called the draw() method with the wrong type of data rather than a DataTable or DataView
I'm not sure why it is throwing this error, since dataSet
is clearly an instance of the DataTable
class. I tried clearing my cache and cookies multiple times, but to no avail.