Seems to work! Thanks for your help. However are you aware of any API
changes today? It was working perfectly and then suddenly stopped for no
reason with the error: You called the draw() method with the wrong type of
data rather than a DataTable or DataView
On Wednesday, October 29, 2014 5:54:42 PM UTC-6, Andrew Gallant wrote:
>
> You may see a difference if any events overlap in time within the same
> row, so I would do a secondary sort on start time just to be safe.
>
> On Wednesday, October 29, 2014 7:20:33 PM UTC-4, Nick Pepperling wrote:
>>
>> Hmmm, let me confirm. As of now I am sorting my data by start time. If
>> I sort by row label (I.e define each record of type A, then define each
>> record of type B, ........) the rows will stay fixed in the same order, but
>> the events in the timeline will remain unaltered?
>>
>> On Tuesday, October 28, 2014 6:46:14 PM UTC-6, Andrew Gallant wrote:
>>>
>>> As I recall, the bars are placed in the order of the rows in the
>>> DataTable, so if you sort your data by row label, the Timeline rows should
>>> always be in the same order.
>>>
>>> On Tuesday, October 28, 2014 2:30:23 PM UTC-4, Nick Pepperling wrote:
>>>>
>>>> Do you know if there is any way to "freeze" the position of the rows?
>>>> As it is now, say for example we have a 4 row chart with each row labeled
>>>> A in [0][0], B in [0][1], C in [0][2], and D in [0][3]. When you you
>>>> alter
>>>> the filter, the value of the labels in column 0 will change based on which
>>>> event is occuring in the timeline. I.e. if there is an event occuring in
>>>> row B but not in row A at some point, B will appear in [0][0] and A will
>>>> appear in [0][1] (effectively swapping places along with all records in
>>>> that row). This can lead to misleading information in certain cases. Is
>>>> there any way to lock the position of the rows?
>>>>
>>>> On Sunday, October 6, 2013 6:33:26 AM UTC-6, asgallant wrote:
>>>>>
>>>>> Set the "filterColumnIndex" option to 1:
>>>>>
>>>>> var control = new google.visualization.ControlWrapper({
>>>>> 'controlType': 'ChartRangeFilter',
>>>>> 'containerId': 'control',
>>>>> 'options': {
>>>>> // Filter by the start date
>>>>> 'filterColumnIndex': 1,
>>>>> 'ui': {
>>>>> 'chartType': 'LineChart',
>>>>> 'chartOptions': {
>>>>> 'chartArea': {'width': '90%'},
>>>>> 'hAxis': {'baselineColor': 'none'}
>>>>> },
>>>>>
>>>>> 'chartView': {
>>>>> 'columns': [0, 3]
>>>>> },
>>>>> // 1 day in milliseconds = 24 * 60 * 60 * 1000 =
>>>>> 86,400,000
>>>>> 'minRangeSize': 86400000
>>>>> }
>>>>> },
>>>>> // Initial range: 2012-02-09 to 2012-03-20.
>>>>> 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new
>>>>> Date(2012, 2, 20)}}
>>>>> });
>>>>>
>>>>> On Saturday, October 5, 2013 10:44:34 AM UTC-4, Newto apis wrote:
>>>>>>
>>>>>> I am not sure how to add the filter on the startDate row. Do I have
>>>>>> to add it in ChartWrapper. I have added the "filterColumnIndex" in
>>>>>> ControlWrapper. Here is the code I changed in ControlWrapper:
>>>>>>
>>>>>> var control = new google.visualization.ControlWrapper({
>>>>>> 'controlType': 'ChartRangeFilter',
>>>>>> 'containerId': 'control',
>>>>>> 'options': {
>>>>>> // Filter by the date axis.
>>>>>> 'filterColumnIndex': 0,
>>>>>> 'ui': {
>>>>>> 'chartType': 'LineChart',
>>>>>> 'chartOptions': {
>>>>>> 'chartArea': {'width': '90%'},
>>>>>> 'hAxis': {'baselineColor': 'none'}
>>>>>> },
>>>>>>
>>>>>> 'chartView': {
>>>>>> 'columns': [0, 3]
>>>>>> },
>>>>>> // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
>>>>>> 'minRangeSize': 86400000
>>>>>> }
>>>>>> },
>>>>>> // Initial range: 2012-02-09 to 2012-03-20.
>>>>>> 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new
>>>>>> Date(2012, 2, 20)}}
>>>>>> });
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Friday, October 4, 2013 9:09:40 PM UTC-7, asgallant wrote:
>>>>>>>
>>>>>>> You can use the ChartRangeFilter with a Timeline chart...sort of.
>>>>>>> The filter can only act on one column of data, so you must choose to
>>>>>>> filter
>>>>>>> either the start dates or end dates, and then set the
>>>>>>> "filterColumnIndex"
>>>>>>> property of the ControlWrapper to the appropriate column index (1 for
>>>>>>> start
>>>>>>> date, 2 for end date).
>>>>>>>
>>>>>>> On Friday, October 4, 2013 6:28:52 PM UTC-4, Newto apis wrote:
>>>>>>>>
>>>>>>>> I have been trying to use the chartRangeFilter for the new
>>>>>>>>
>>>>>>>> google.visualization.Timeline but was not successful. Here is the code
>>>>>>>> I have written, could you please let me know if this is possible. If
>>>>>>>> possible also please let me know what am i doing wrong here.
>>>>>>>>
>>>>>>>> <html>
>>>>>>>> <head>
>>>>>>>> <script type="text/javascript"
>>>>>>>> src="https://www.google.com/jsapi";></script>
>>>>>>>> <script type="text/javascript">
>>>>>>>> google.load('visualization', '1.1', {packages: ['controls']});
>>>>>>>> google.setOnLoadCallback(drawVisualization);
>>>>>>>> function drawVisualization() {
>>>>>>>> var dashboard = new google.visualization.Dashboard(
>>>>>>>> document.getElementById('dashboard'));
>>>>>>>>
>>>>>>>> var control = new google.visualization.ControlWrapper({
>>>>>>>> 'controlType': 'ChartRangeFilter',
>>>>>>>> 'containerId': 'control',
>>>>>>>> 'options': {
>>>>>>>> // Filter by the date axis.
>>>>>>>> 'filterColumnIndex': 0,
>>>>>>>> 'ui': {
>>>>>>>> 'chartType': 'LineChart',
>>>>>>>> 'chartOptions': {
>>>>>>>> 'chartArea': {'width': '90%'},
>>>>>>>> 'hAxis': {'baselineColor': 'none'}
>>>>>>>> },
>>>>>>>> // Display a single series that shows the closing value of
>>>>>>>> the stock.
>>>>>>>> // Thus, this view has two columns: the date (axis) and the
>>>>>>>> stock value (line series).
>>>>>>>> 'chartView': {
>>>>>>>> 'columns': [0, 3]
>>>>>>>> },
>>>>>>>> // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
>>>>>>>> 'minRangeSize': 86400000
>>>>>>>> }
>>>>>>>> },
>>>>>>>> // Initial range: 2012-02-09 to 2012-03-20.
>>>>>>>> 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new
>>>>>>>> Date(2012, 2, 20)}}
>>>>>>>> });
>>>>>>>>
>>>>>>>> var chart = new google.visualization.ChartWrapper({
>>>>>>>> 'chartType': 'Timeline',
>>>>>>>> 'containerId': 'chart',
>>>>>>>> 'options': {
>>>>>>>> 'width': 900,
>>>>>>>> 'height': 500,
>>>>>>>> }
>>>>>>>> });
>>>>>>>>
>>>>>>>> var data = new google.visualization.DataTable();
>>>>>>>> data.addColumn({ type: 'String', id: 'TestAction' });
>>>>>>>>
>>>>>>>> data.addColumn({ type: 'date', id: 'Start' });
>>>>>>>> data.addColumn({ type: 'date', id: 'End' });
>>>>>>>> data.addRows([
>>>>>>>> [ 'MO Call', new Date(2013,10,2,12,0,0,0), new
>>>>>>>> Date(2013,10,2,12,0,10,0)],
>>>>>>>> [ 'MO Call', new Date(2013,10,2,12,0,25,0), new
>>>>>>>> Date(2013,10,2,12,1,0,0)],
>>>>>>>> [ 'MO Call', new Date(2013,10,2,12,1,20,0), new
>>>>>>>> Date(2013,10,2,12,1,40,0)],
>>>>>>>> [ 'Browser', new Date(2013,10,2,12,0,10,0), new
>>>>>>>> Date(2013,10,2,12,0,30,0)],
>>>>>>>> [ 'Browser', new Date(2013,10,2,12,0,45,0), new
>>>>>>>> Date(2013,10,2,12,1,0,0)],
>>>>>>>> [ 'Browser', new Date(2013,10,2,12,1,20,0), new
>>>>>>>> Date(2013,10,2,12,1,40,0)],
>>>>>>>> [ 'Browser', new Date(2013,10,2,12,2,10,0), new
>>>>>>>> Date(2013,10,2,12,2,25,0)],
>>>>>>>> [ 'WIFI', new Date(2013,10,2,12,0,10,0), new
>>>>>>>> Date(2013,10,2,12,0,30,0)],
>>>>>>>> [ 'WIFI', new Date(2013,10,2,12,0,45,0), new
>>>>>>>> Date(2013,10,2,12,1,0,0)],
>>>>>>>> [ 'WIFI', new Date(2013,10,2,12,1,20,0), new
>>>>>>>> Date(2013,10,2,12,1,40,0)]]);
>>>>>>>>
>>>>>>>> dashboard.bind(control, chart);
>>>>>>>> dashboard.draw(data);
>>>>>>>> }
>>>>>>>> </script>
>>>>>>>> </head>
>>>>>>>>
>>>>>>>> <body style="font-family: Arial;border: 0 none;">
>>>>>>>> <div id="dashboard">
>>>>>>>> <div id="chart"></div>
>>>>>>>> <div id="control"></div>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> </div>
>>>>>>>> </body>
>>>>>>>> </html>
>>>>>>>>
>>>>>>>>
--
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.
