The problem stems from your ChartRangeFilter, and is ultimately 3-fold.
First, the container ID is specified incorrectly, the object key should be
"containerId", not "containerID". Second, you need to use the
"filterColumnIndex" option when using a column index, not the
"filterColumnLabel" option (which would take a column label instead).
Third, the base columns are not appropriate for a LineChart (which the
ChartRangeFilter draws internally), so you have to use the
ui.chartView.columns option to change the chart's view. Put together, they
look like this:
var rangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'Filter',
'options': {
'filterColumnIndex':2,
ui: {
chartView: {
columns: [2, {
type: 'number',
calc: function () {return 0;}
}]
}
}
}
});
I wish I could give you good hints for diagnosing this stuff, but a lot of
it just comes down to familiarity with the API. In this case, I found out
where the problem was by drawing each element one at a time until I found
something that failed. As an example, I added this after your chart
declaration:
chart.setDataTable(data); // give the chart some data to draw with
chart.draw(); // draw the chart
return; // return from the function so the rest of the code doesn't execute
The chart draw fine, so I repeated this with the ChartRangeFilter, and got
an error message that was more helpful in Chrome's developer console:
Uncaught Error: The container #null is null or not defined.
This lead me to the problem with the "containerId" parameter. I then
repeated this process fixing one item at a time until I had the complete
solution.
On Tuesday, August 19, 2014 10:26:39 AM UTC-4, MB wrote:
>
> I implemented as you suggested, but now I get aOne or more participants
> failed to draw()× error. Any idea what could be going on? (file
> attached). I can't think you enough, you've been incredibly helpful. (On a
> side note, is there any easy way for an amateur to debug this myself so I
> don't have to be reliant on you? :P)
>
>
>
> On Tuesday, August 12, 2014 6:51:55 PM UTC-4, Andrew Gallant wrote:
>>
>> You have to convert your Timeline into a ChartWrapper in order to use it
>> with a Dashboard:
>>
>> var chart = new google.visualization.ChartWrapper({
>> chartType: 'Timeline',
>> containerId: 'Chart',
>> options: {
>> // put your chart options here
>> }
>> });
>>
>> On Tuesday, August 12, 2014 5:14:58 PM UTC-4, MB wrote:
>>>
>>> I'm back with yet another question. Now that this task is complete, I'm
>>> trying to apply some advanced features like controls. My first goal is to
>>> add a filter to the bottom of the timeline where I can draw to just see the
>>> dates that I want to see. I followed the guidance on the
>>> https://developers.google.com/chart/interactive/docs/gallery/controls
>>> to build in a ChartRangeFilter div. Of course, I failed (I'm way in over my
>>> head now). However, I got an error when I tried to run the program that
>>> says "[object Object] does not fit either the Control or Visualization
>>> specification.×" Is this a result of the hackery that put the multiple
>>> data tables into one or is it something else? I've attached the program in
>>> full for reference. The range filter was added within the draw function as
>>> a variable called rangeSlider. Any ideas?
>>>
>>>
--
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/d/optout.
