Can I use ChartRangeFilter for Timeline charts
5,149 views
Skip to first unread message
Newto apis
Oct 4, 2013, 6:28:52 PM10/4/13
to google-visua...@googlegroups.com
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>
asgallant
Oct 5, 2013, 12:09:40 AM10/5/13
to google-visua...@googlegroups.com
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).
Newto apis
Oct 5, 2013, 10:31:17 AM10/5/13
to google-visua...@googlegroups.com
Thank you. I am pretty new to google Visualization. Could you please let me know how can I do that. I really appreciate your help. I have been trying to achieve this for quite some time now.
Thank you!
Thank you!
Newto apis
Oct 5, 2013, 10:44:34 AM10/5/13
to google-visua...@googlegroups.com
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:
asgallant
Oct 6, 2013, 8:33:26 AM10/6/13
to google-visua...@googlegroups.com
Set the "filterColumnIndex" option to 1:
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the start date
'filterColumnIndex': 1,
'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)}}
});
'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)}}
});
Message has been deleted
Newto apis
Oct 17, 2013, 5:38:27 PM10/17/13
to google-visua...@googlegroups.com
I have implemented the timeline filter but the ChartRange filter chart doesn't display anything on the UI.
http://jsfiddle.net/nH2XL/
It works as expected but with no data on the control user wouldn't know the exact range he is looking at. I am doing the cart on both Date columns. Is it a bug or am I doing something wrong?
http://jsfiddle.net/nH2XL/
It works as expected but with no data on the control user wouldn't know the exact range he is looking at. I am doing the cart on both Date columns. Is it a bug or am I doing something wrong?
asgallant
Oct 17, 2013, 6:14:13 PM10/17/13
to google-visua...@googlegroups.com
The "date" type axes for charts do not handle small time increments well, so you have to specify the hAxis.ticks option in order to get the axis values to show up:
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
// Filter by the date axis.
filterColumnIndex: 1,
ui: {
chartType: 'LineChart',
chartOptions: {
width: 985,
height: 70,
hAxis: {
format: 'hh:mm:ss',
ticks: [
new Date(2013, 10, 2, 12, 0),
new Date(2013, 10, 2, 12, 10),
new Date(2013, 10, 2, 12, 20),
new Date(2013, 10, 2, 12, 30),
new Date(2013, 10, 2, 12, 40),
new Date(2013, 10, 2, 12, 50),
new Date(2013, 10, 2, 13, 0),
new Date(2013, 10, 2, 13, 10)
]
}
},
chartView: {
columns: [1, {
type: 'number',
calc: function () {return 0;}
}]
}
}
}
});
Nam M
Nov 22, 2013, 5:47:00 PM11/22/13
to google-visua...@googlegroups.com
This, plus change 'String' to 'string' and it works for me. Let us know if that works, OP.
Nick Pepperling
Oct 28, 2014, 2:30:23 PM10/28/14
to google-visua...@googlegroups.com
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?
Andrew Gallant
Oct 28, 2014, 8:46:14 PM10/28/14
to google-visua...@googlegroups.com
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.
Nick Pepperling
Oct 29, 2014, 7:20:33 PM10/29/14
to google-visua...@googlegroups.com
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?
Andrew Gallant
Oct 29, 2014, 7:54:42 PM10/29/14
to google-visua...@googlegroups.com
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.
Nick Pepperling
Oct 30, 2014, 1:39:26 PM10/30/14
to google-visua...@googlegroups.com
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
Daniel LaLiberte
Oct 30, 2014, 1:44:04 PM10/30/14
to google-visua...@googlegroups.com
Hi Mael and Nick,
We rolled out a new v40 yesterday, but the rollout itself failed to complete, so we are rolling it back. There is very likely an inconsistency in the state of the deployed code during this transition, which we would of course like to avoid, but we can't fix that with the current way the code is rolled out and how it is loaded. This should clear up just be reloading the page, or possibly by clearing your cache if you want a faster update.
--
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/d/optout.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages