Filters not displaying properly outside of localhost

67 views

Skip to first unread message

Mike Shaw

unread,

Feb 6, 2018, 3:28:34 PM2/6/18

to Google Visualization API

Hello,

I have several charts that work fine when running on my local machine but stop rending NumberRangerFilter and the CategoryFilter (and others). I've gone so far as to load the examples from this page: https://developers.google.com/chart/interactive/docs/gallery/controls onto my server just to test it to no avail.

Please see the pictures below. In the first picture the "Age Filter" shows correctly as a slider, but in the second picture, with the exact same code (but launched from my web server) the Age Filter shows as text. Any thoughts as to why this might occur?

Thank you!

Here's the code--as I mentioned, it just copied and pasted from the Google Charts site because I thought it might be my own code that was the issue. But it's consistent.

(IE 11)

<!DOCTYPE html>

<html>

<head>

<title>Google Developers</title>

rel="stylesheet">

href="https://google-developers.appspot.com/_static/18908e5f48/css/devsite-cyan.css">

</head>

<body class="devsite-layout-docs devsite-framebox

<p style="display: none; height: 0; width: 0">This is a snippet from developers.google.com</p>

<p style="padding-left: 1em"><strong>Donuts eaten per person</strong></p>

<tr>

<td>

</td><td>

</td>

</tr><tr>

<td>

</td><td>

</td>

</tr>

</table>

</div>

google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']});

google.charts.setOnLoadCallback(drawMainDashboard);

function drawMainDashboard() {

var dashboard = new google.visualization.Dashboard(

document.getElementById('dashboard_div'));

var slider = new google.visualization.ControlWrapper({

'controlType': 'NumberRangeFilter',

'containerId': 'slider_div',

'options': {

'filterColumnIndex': 2,

'ui': {

'labelStacking': 'vertical',

'label': 'Age Filter:'

}

});

var categoryPicker = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'categoryPicker_div',

'options': {

'filterColumnIndex': 1,

'ui': {

'labelStacking': 'vertical',

'label': 'Gender Selection:',

'allowTyping': false,

'allowMultiple': false

}

});

var pie = new google.visualization.ChartWrapper({

'chartType': 'PieChart',

'containerId': 'chart_div',

'options': {

'width': 300,

'height': 300,

'legend': 'none',

'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},

'pieSliceText': 'label'

'view': {'columns': [0, 3]}

});

var table = new google.visualization.ChartWrapper({

'chartType': 'Table',

'containerId': 'table_div',

'options': {

}

});

var data = google.visualization.arrayToDataTable([

['Name', 'Gender', 'Age', 'Donuts eaten'],

['Michael' , 'Male', 12, 5],

['Elisa', 'Female', 20, 7],

['Robert', 'Male', 7, 3],

['John', 'Male', 54, 2],

['Jessica', 'Female', 22, 6],

['Aaron', 'Male', 3, 1],

['Margareth', 'Female', 42, 8],

['Miranda', 'Female', 33, 6]

]);

dashboard.bind([slider, categoryPicker], [pie, table]);

dashboard.draw(data);

}

</script>

var dataLayer = [{"freeTrialEligibleUser": "False", "userCountry": "US", "language": {"requested": "en", "served": null}, "projectName": null, "scriptsafe": "scriptsafe", "signedIn": "False", "internalUser": "False"}];

</script>

window.onload = function() {

// Initialize the settings variables we get from the server side

devsite.settings.initSettings({'FULL_SITE_SEARCH_ENABLED': 1, 'ENABLE_BLOCKED_VIDEO_PLACEHOLDER': 0, 'VERSION_HASH': '18908e5f48', 'SITE_NAME': 'devsite', 'HISTORY_ENABLED': 1, 'ENABLE_BLOCKED_LINK_TOOLTIP': 0, 'ALLOWED_HOSTS': ['.android.com', '.anvato.com', '.apigee.com', '.appspot.com', '.dialogflow.com', '.gonglchuangl.net', '.google.cn', '.google.com', '.googleplex.com', '.nest.com', '.openthread.io', '.openweave.io', '.orbitera.com', '.tensorflow.org'], 'BLOCK_RSS_FEEDS': 0, 'SCRIPTSAFE_DOMAIN': 'google-developers.appspot.com'} || {});

// DevsiteUtilParams rely on devsite.settings.

devsite.utils.initDevsiteUtilParams('https://google-developers.appspot.com/',

devsite.settings['ALLOWED_HOSTS'].concat('youtube.com'));

devsite.permissions.init({"f62218c009ec029abef196bba5aa34cf": true, "098dafe57affddc137df300142652cfd": false, "8e03e230de0bd8a6fe173fdf172e8b3f": true, "cb025a64a50094835616312f4774a53d": true, "51470233c56fc1fde50f00b73c52b216": false, "d169d485cf24243a263783dbe42029b1": true, "039e5d84b87fd75807ffb37b7f1bbf2c": true, "752953480de00a336d911a46966cc16d": false, "700def1a83e356c06c0925afb05de4b0": false, "6749dcb526ce9bde6993550c7d928d24": true});

devsite.base.init(null, null, top, false);

devsite.analytics.InitAnalytics(true);

}

</script>

</body>

</html>

Auto Generated Inline Image 1

Auto Generated Inline Image 2

Mike Shaw

unread,

Feb 8, 2018, 5:43:02 PM2/8/18

to Google Visualization API

Fixed it. My organization's address was listed in compatibility mode. I added the following after the <head> tag and now it works.