Your problem is with the date strings. String-to-date conversion is
handled differently in all browsers, and is completely unreliable (in your
case, Chrome coverts correctly, while Firefox throws an "Invalid Date"
error). The best way to handle it is to parse your date strings manually
to create Date objects. I'm also inclined to say that you could experience
problems with declaring the column type as "date" and passing strings in
the wrong format. I would suggest that you either adjust the server output
to the correct format (strings should be in the format "Date(year, month,
day[, hour[, minute[, second[, millisecond]]]])", where month is
zero-indexed [January is 0 not 1]), or switch the column to "string" type
and use a DataView to convert the strings to dates. If you choose the
latter, this example shows how to do it:
http://jsfiddle.net/asgallant/8RFsB/1/
On Thursday, July 18, 2013 7:05:41 AM UTC-4, Dan Mastromonaco wrote:
>
> Here is the JSON:
>
>
> {
>>
>> "cols": [
>> {"id":"","label":"Class Date","pattern":"","type":"date"},
>> {"id":"","label":"Calories Burned","pattern":"","type":"number"},
>> {"id":"","label":"Total Energy","pattern":"","type":"number"}
>> ],
>> "rows": [
>>
>> {"c":[{"v":"2013-05-23 06:00:00","f":"May
>> 23"},{"v":636,"f":null},{"v":585,"f":null}]},
>>
>> {"c":[{"v":"2013-05-07 06:00:00","f":"May
>> 7"},{"v":523,"f":null},{"v":467,"f":null}]},
>>
>> {"c":[{"v":"2013-05-09 06:00:00","f":"May
>> 9"},{"v":583,"f":null},{"v":555,"f":null}]},
>>
>> {"c":[{"v":"2013-05-14 17:30:00","f":"May
>> 14"},{"v":663,"f":null},{"v":595,"f":null}]},
>>
>> {"c":[{"v":"2013-05-24 06:00:00","f":"May
>> 24"},{"v":614,"f":null},{"v":554,"f":null}]},
>>
>> {"c":[{"v":"2013-06-20 06:00:00","f":"Jun
>> 20"},{"v":612,"f":null},{"v":576,"f":null}]},
>>
>> {"c":[{"v":"2013-06-24 06:00:00","f":"Jun
>> 24"},{"v":546,"f":null},{"v":498,"f":null}]},
>>
>> {"c":[{"v":"2013-07-03 06:00:00","f":"Jul
>> 3"},{"v":480,"f":null},{"v":433,"f":null}]},
>>
>> {"c":[{"v":"2013-07-10 06:00:00","f":"Jul
>> 10"},{"v":468,"f":null},{"v":444,"f":null}]},
>>
>> {"c":[{"v":"2013-07-12 06:00:00","f":"Jul
>> 12"},{"v":529,"f":null},{"v":475,"f":null}]}
>>
>> ]
>>
>> }
>>
>>
>
> Thanks for your help!
>
> On Thursday, July 18, 2013 12:04:21 AM UTC-4, asgallant wrote:
>>
>> I don't see anything obviously wrong with the code. Can you post a
>> sample of the JSON returned by your AJAX call so I can test this?
>>
>> On Wednesday, July 17, 2013 10:02:51 PM UTC-4, Dan Mastromonaco wrote:
>>>
>>> Hi everyone,
>>>
>>> I've built a chart that works flawlessly in Chrome, but the range filter
>>> control doesn't work in Safari, Firefox or IE. Has anyone else had this
>>> problem?
>>>
>>> Here is the code:
>>>
>>> <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'));
>>>>
>>>>
>>>>
>>>> /** PREPARE DATA **/
>>>>
>>>> var jsonData = $.ajax({
>>>>
>>>> url: "ajax/metrics_json.php?type=calories",
>>>>
>>>> dataType:"json",
>>>>
>>>> async: false
>>>>
>>>> }).responseText;
>>>>
>>>> var data = new google.visualization.DataTable(jsonData);
>>>>
>>>> data.sort([{column: 0}]);
>>>>
>>>> for(var i=0; i<data.getNumberOfRows(); i++){
>>>>
>>>> data.setValue(i, 0, new Date(data.getValue(i, 0)));
>>>>
>>>> }
>>>>
>>>> var d = new Date();
>>>>
>>>> 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, 1, 2]
>>>>
>>>> },
>>>>
>>>> // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
>>>>
>>>> 'minRangeSize': 86400000
>>>>
>>>> }
>>>>
>>>> },
>>>>
>>>> 'state': {'range': {'start': new Date(2013,5,1), 'end': new
>>>>> Date(2013,6,15)}}
>>>>
>>>> });
>>>>
>>>> var chart = new google.visualization.ChartWrapper({
>>>>
>>>> 'chartType': 'AreaChart',
>>>>
>>>> 'containerId': 'chart',
>>>>
>>>> 'options': {
>>>>
>>>> // Use the same chart area width as the control for axis
>>>>> alignment.
>>>>
>>>> 'chartArea': {'height': '80%', 'width': '90%'},
>>>>
>>>> 'hAxis': {'slantedText': false},
>>>>
>>>> 'legend': {'position': 'top', 'alignment': 'center'}
>>>>
>>>> },
>>>>
>>>> // Convert the first column from 'date' to 'string'.
>>>>
>>>> 'view': {
>>>>
>>>> 'columns': [
>>>>
>>>> {
>>>>
>>>> 'calc': function(dataTable, rowIndex) {
>>>>
>>>> return dataTable.getFormattedValue(rowIndex, 0);
>>>>
>>>> },
>>>>
>>>> 'type': 'string'
>>>>
>>>> }, 1, 2]
>>>>
>>>> }
>>>>
>>>> });
>>>>
>>>>
>>>>
>>>> dashboard.bind(control, chart);
>>>>
>>>> dashboard.draw(data);
>>>>
>>>>
>>>>
>>>> }
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> </script>
>>>>
>>>>
--
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.
