'm a little bit lost with Google Charts's
DateRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#daterangefilter>.
Upon drawing the dashboard, I'm getting the error message "*One or more
participants failed to draw()×*". I'm not quite sure why this is happening,
but my hunch says it is due to the Date object. The jsonHRData date rows
looks like "Date {Sat Feb 15 2014 15:17:33 GMT+0100 (CET)}". Initially my
JSON returned ISO formatted dates, which I converted to the JavaScript date
format using this
approach<http://erraticdev.blogspot.be/2010/12/converting-dates-in-json-strings-using.html>.
Note that the slicer itself is drawn, but not the ColumnChart itself. Every
time I slice, the error message repeats itself.
function drawDashboard() {
var jsonHRData = $.ajax({
url: "heartrate.json",
dataType:"json",
async: false,
converters: {
"text json": function (data) {
return $.parseJSON(data, true);
}
},
success: function (data) {
console.log(data);
}
}).responseJSON;
// Create a dashboard.
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var dateRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel' : 'Date'
}});
// Create our data table out of JSON data loaded from server.
var HRdata = new google.visualization.DataTable(jsonHRData);
// Instantiate and draw our chart, passing in some options.
var heartrateChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'heartrate_container',
'options': {
'width': 400,
'height': 240,
'colors': '#f3b49f'
}});
// Establish dependencies, declaring that 'filter' drives 'heartrateChart',//
so that the column chart will only display entries that are let through// given
the chosen slider range.
dashboard.bind(dateRangeSlider, heartrateChart);
// Draw the dasbhoard
dashboard.draw(HRdata);}
My JSON looks as follows:
{"cols":[{"id":"Date","label":"Date","type":"date"},{"id":"Average
Heartrate","label":"Average
Heartrate","type":"number"}],"rows":[{"c":[{"v":"2014-02-15T14:17:33Z"},{"v":158.4}]},{"c":[{"v":"2014-02-13T18:32:33Z"},{"v":170.7}]},{"c":[{"v":"2014-02-10T18:59:20Z"},{"v":161.7}]},{"c":[{"v":"2014-02-08T14:05:21Z"},{"v":171.1}]},{"c":[{"v":"2014-02-06T18:16:06Z"},{"v":168.4}]}]}
Many thanks!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
