I can't get the zoomout option enabled for my Google Visualization Geomap.. I'm trying to enable it when the user has clicked on a region.. This is my code:
google.load('visualization', '1', {packages: ['geochart']});
var width, height, selectedRegion, resolution;
window.onload = function(){
width = 556;
height = 400;
selectedRegion = 'world';
resolution = 'subcontinents';
};
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Region');
data.addColumn('number', 'Distributors');
data.addRows([
[{v:"005", f:"South America"}, 0],
[{v:"011", f:"Western Africa"}, 46],
[{v:"013", f:"Central America"}, 299],
[{v:"014", f:"Eastern Africa"}, 63.9],
[{v:"015", f:"Northern Africa"}, 255.7],
[{v:"017", f:"Middle Africa"}, 21.4],
[{v:"018", f:"Southern Africa"}, 244.5],
[{v:"029", f:"Caribbean"}, 76.5],
[{v:"030", f:"Eastern Asia"}, 5712.9],
[{v:"034", f:"Southern Asia"}, 1275.1],
[{v:"035", f:"South-Eastern Asia"}, 639.2],
[{v:"039", f:"Southern Europe"}, 777.8],
[{v:"053", f:"Australia and New Zealand"}, 272],
[{v:"054", f:"Melanesia"}, 6.3],
[{v:"057", f:"Micronesia"}, 0],
[{v:"061", f:"Polynesia"}, 0],
[{v:"143", f:"Central Asia"}, 0],
[{v:"145", f:"Western Asia"}, 0],
[{v:"150", f:"Europe"}, 0],
[{v:"151", f:"Eastern Europe"}, 0],
[{v:"154", f:"Northern Europe"}, 0],
[{v:"155", f:"Western Europe"}, 0]
]);
var options = {
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: resolution,
region: selectedRegion,
height: height,
width: width
};
var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(geochart, 'regionClick', function(e) {
var clickedRegion = e['region'];
options.region = clickedRegion;
options.resolution = "country";
options.showZoomOut = true;
geochart.draw(data, options);
});
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
Could someone please tell me what i'm doing wrong? The zoom out button is not showing up..
Related
I'm drawing a province map for Ireland and for some reason Google's doesn't recognise county Cork. Someone suggested using IE-CO. But that breaks my plans on using a CSV dataset(where I have no control over county names).
Does anyone know why it doesn't work and how can I fix that?
Here a sample of my code https://jsfiddle.net/sashareds/kLjtne42/2/
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['County', 'Case'],
['Carlow', 0],
['Cavan', 41],
['Clare', 50],
['Cork', 292], //IE-CO
['Donegal', 77],
['Dublin', 2077],
['Galway', 98],
['Kerry', 79],
['Kildare', 103],
['Kilkenny', 47],
['Laois', 16],
['Leitrim', 12],
['Limerick', 96],
['Longford', 16],
['Louth', 54],
['Mayo', 55],
['Meath', 88],
['Monaghan', 17],
['Offaly', 47],
['Roscommon', 13],
['Sligo', 26],
['Tipperary', 94],
['Waterford', 43],
['Westmeath', 86],
['Wexford', 18],
['Wicklow', 105]
]);
var options = {
region: 'IE', // Africa
resolution: 'provinces',
colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
you could use a data view with a calculated column to replace the known problem countries.
and use object notation to allow the actual country name to show thru on the tooltip.
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {v: 'IE-CO', f: country};
break;
}
return country;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1]);
see following working snippet...
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['County', 'Case'],
['Carlow', 0],
['Cavan', 41],
['Clare', 50],
['Cork', 292], //IE-CO
['Donegal', 77],
['Dublin', 2077],
['Galway', 98],
['Kerry', 79],
['Kildare', 103],
['Kilkenny', 47],
['Laois', 16],
['Leitrim', 12],
['Limerick', 96],
['Longford', 16],
['Louth', 54],
['Mayo', 55],
['Meath', 88],
['Monaghan', 17],
['Offaly', 47],
['Roscommon', 13],
['Sligo', 26],
['Tipperary', 94],
['Waterford', 43],
['Westmeath', 86],
['Wexford', 18],
['Wicklow', 105]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {v: 'IE-CO', f: country};
break;
}
return country;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1]);
var options = {
region: 'IE', // Africa
resolution: 'provinces',
colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(view, options); // <-- draw chart with data view
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 90%; height: 90%;"></div>
EDIT
when using a sheet for the data source,
the view needs to be created with the data table from the sheet.
so the view definition should be created,
after the data table is received.
see following working snippet...
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': chartSettings.mapsApyKey
});
google.charts.setOnLoadCallback(drawRegionsMap);
//querying external data from a spreadsheet.
function drawRegionsMap() {
var queryString = encodeURIComponent('Select *');
var queryData = new google.visualization.Query(chartSettings.mapDataSource + queryString);
queryData.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
//Swapping IE-CO on COrk in the dta array, I assume?
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function(dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {
v: 'IE-CO',
f: country
};
break;
}
return country;
},
label: 'Country',
type: 'string'
}, 1]);
var options = {
region: 'IE',
resolution: 'provinces',
colorAxis: {
colors: ['#f9cb9c', '#f07b50', '#ea4435']
},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('map'));
chart.draw(view, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var chartSettings = {
mapsApyKey: "AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k",
mapDataSource: "https://docs.google.com/spreadsheets/d/1YV7VSsG_nQXmL_L44cJSz4GrxOLIBNJrgd8qPXM_NQ0/gviz/tq?gid=249758876&headers=1&range=M21:N47&tq="
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Is there a library that handles drawing an HTML horizontal bar chart, but with a goal line included, so the gap between the progress and the goal can be seen? I'd call this a 'horserace bar chart', but apparently no one else does.
Something like this:
you can use the library Chart.js
Example: Here is the jquery code to draw a horizontal line.
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint+12, point.y);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, point.y);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});
I've converted a skinned.dae mesh to JSON using this loader. I'm now loading it up in a scene and - since its animations are not intended as actual animation, but ranges of motion for model posing, I am attempting to map those animations to sliders. Relevant code:
var loader = new THREE.JSONLoader();
var animation;
loader.load('phases/1/1.json', function(geometry, materials) {
var mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(mesh);
console.log(mesh.geometry);
mesh.scale.set(1, 1, 1);
materials.forEach(function(i) { i.skinning = true });
var clip = mesh.geometry.animations[0];
var clip2 = mesh.geometry.animations[1];
var clip3 = mesh.geometry.animations[2];
var clip4 = mesh.geometry.animations[3];
var clip5 = mesh.geometry.animations[4];
mixer = new THREE.AnimationMixer(mesh);
action = mixer.clipAction(clip);
action2 = mixer.clipAction(clip2);
action3 = mixer.clipAction(clip3);
action4 = mixer.clipAction(clip4);
I then initialize them:
action.play();
action.paused = true;
action2.play();
action2.paused = true;
action3.play();
action3.paused = true;
action4.play();
action4.paused = true;
And then in an IIFE create sliders and map said animations:
(function() {
var container = document.querySelector('div#sliders'),
slider = document.createElement('input'),
attrs = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
slider2 = document.createElement('input'),
attrs2 = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
slider3 = document.createElement('input'),
attrs3 = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
slider4 = document.createElement('input'),
attrs4 = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
Object.keys(attrs).forEach(function(i) { slider.setAttribute(i, attrs[i]);});
Object.keys(attrs2).forEach(function(i) { slider2.setAttribute(i, attrs2[i]) });
Object.keys(attrs3).forEach(function(i) { slider3.setAttribute(i, attrs3[i]) });
Object.keys(attrs4).forEach(function(i) { slider4.setAttribute(i, attrs4[i]) });
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
slider.addEventListener('input', function(evt) {
action.time = parseFloat(this.value * action.getClip().duration);
console.log(action.time);
});
slider2.addEventListener('input', function(evt) {
action2.time = parseFloat(this.value * action2.getClip().duration);
});
slider3.addEventListener('input', function(evt) {
action3.time = parseFloat(this.value * action3.getClip().duration);
});
slider4.addEventListener('input', function(evt) {
action4.time = parseFloat(this.value * action4.getClip().duration);
});
container.appendChild(slider);
container.appendChild(slider2);
container.appendChild(slider3);
container.appendChild(slider4);
}());
This works but gives me a surprisingly limited range of motion in each animation - which is to say the animation doesn't play out fully (i.e all keyframes), just tiny movements.
Any ideas why that might be happening? I'm at my wits end.
You can find the live code here.
Any/all help would be much appreciated - thanks!
Have you set materials after loading to morph yet?
for (var m=0; m<materials.length; m++){
var material = materials[ m ];
material.morphTargets = true;
}
I've gotten this from the json loader example in three.js website and modified it slightly.
hope this helps,
A newb
I have a google map this is my current code
<div class="cont" id="cont">
<p><script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['State', 'Province', 'G-Form Outlets'],
['ZA-GT', 'Gauteng', 10],
['ZA-WC', 'Western Cape', 5],
['ZA-EC', 'Eastern Cape', 2],
['ZA-NL', 'KwaZulu-Natal', 1],
['ZA-FS', 'Free State', 1],
['ZA-LP', 'Limpopo', 0],
['ZA-NW', 'North-West', 0],
['ZA-MP', 'Mpumalanga', 0],
['ZA-NC', 'Northern Cape', 0],
]);
var view = new google.visualization.DataView(data);
view.setColumns([1, 2]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
var options = {};
options['region'] = 'ZA';
options['resolution'] = 'provinces';
options['width'] = 500;
options['height'] = 500;
options['colors'] = ['#cccccc', '#C01E24'];
options['legend'] = 'none';
google.visualization.events.addListener(geochart, 'select', function() {
var selectionIdx = geochart.getSelection()[0].row;
var stateName = data.getValue(selectionIdx, 0);
var value = data.getValue(selectionIdx, 2);
if (value >= '1') {
window.open('http://e-track.co.za');}
});
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization"></div>
</p>
</div>
It is working great the problem is I am trying to place it in a DIV Tag but it keeps throwing it over to the left of the page where i want to place it in the middle of the box basically
<head>
<style type="text/css">
div
{
margin: 0 auto;
}
</style>
</head>
Add <Head> part in your code... Thatsall
In the given example given below
http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Example
When i put my mouse the region in tooltip both population and area are displayed
Is there any way possible to display only any one of these variable(either population or area)
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows([
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
Try this NOT TESTED
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Population');
data.addRows([
['Rome', 2761477],
['Milan', 1324110],
['Naples', 959574],
['Turin', 907563],
['Palermo', 655875],
['Genoa', 607906],
['Bologna', 380181],
['Florence', 371282]
]);
var data1 = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Area');
data.addRows([
['Rome', 1285.31],
['Milan', 181.76],
['Naples', 117.27],
['Turin', 130.17],
['Palermo', 158.9],
['Genoa', 243.60],
['Bologna', 140.7],
['Florence', 102.41]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
if(condition1){
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
} else{
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
};
Have a look at my answer to another similar question here. It's a matter of applying a pattern formatter and then creating a separate view for the data.