One or more participants failed to draw() with Dashboard ChartWrapper

[Kris Van den Bergh]

'm a little bit lost with Google Charts's 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.

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!

[Daniel LaLiberte]

Kris,

You are correct that those dates won't work.  Google Charts understands dates formatted as strings if they look like this: "Date(yyyy, MM, dd, hh, mm, ss, sss)", where MM is the month number starting with 0 (e.g. 0 is January).  I think it would be good idea if we supported more formats, as long as they are unambiguous.

Also, if you get the "One or more participants failed to draw()×" message again, you should probably look in the JavaScript console to see if there are any more errors listed, which might provide some better clues about what is going wrong.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA