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.
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>
Here's what my chart displays:
Here's my Position tables:
My position table
cant really seem to figure out whats the problem.
-Ive got a button and a dropdown, when an item is selected from the dropdown and button is selected an orgchart must be displayed. The chart displays but the problems are:
-orgchart splitting into three charts
-And it keeps showing some Id's
-here's my code:
google.load("visualization", "1", { packages: ["orgchart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$("#btnGetOrganogram").on('click', function (e) {
debugger
$ddlDepOrgano = $('[id$="ddlDepOrgano"]').val();
if ($ddlDepOrgano != "") {
var jsonData = $.ajax({
type: "POST",
url: '/services/eleaveService.asmx/GetChartData',
data: "{'depid':'" + $ddlDepOrgano + "'}",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: OnSuccess_getOrgData,
error: OnErrorCall_getOrgData
});
function OnSuccess_getOrgData(repo) {
var data = new google.visualization.DataTable(jsonData);
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
var response = repo.d;
for (var i = 0; i < response.length; i++) {
var row = new Array();
var Pos_Name = response[i].Pos_Name;
var Pos_Level = response[i].Pos_Level;
var Emp_Name = response[i].Emp_Name;
var Pos_ID = response[i].Pos_ID;
var Emp_ID = response[i].Emp_ID;
data.addRows([[{
v: Emp_ID,
f: Pos_Name
}, Pos_Level, Emp_Name]]);
}
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data,{ allowHtml: true });
}
function OnErrorCall_getOrgData() {
console.log("something went wrong ");
}
} else {
bootbox.alert("Invalid Department Name please try again.");
}
e.preventDefault();
});
}
according to the data format, Column 1 should be the ID of the manager, which is used to build the tree...
Column 1 - [optional] The ID of the parent node. This should be the unformatted value from column 0 of another row. Leave unspecified for a root node.
looking at the data table image posted, this should be in column --> Mngr_ID
as such, recommend the following changes when loading the data...
for (var i = 0; i < response.length; i++) {
var row = new Array();
var Pos_Name = response[i].Pos_Name;
var Emp_Name = response[i].Emp_Name;
var Emp_ID = response[i].Emp_ID;
var Mngr_ID = response[i].Mngr_ID;
data.addRow([
{
v: Emp_ID,
f: Pos_Name
},
Mngr_ID,
Emp_Name
]);
}
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 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..
I have a stage with a layer inside it and a group inside the layer.
If my object (var complexText = new Kinetic.Text()) has name: 'name1' and id: 'id5',
is it possible to change the fill and text with setFill() and setText() only by using the id?
My code is not working:
var stage = new Kinetic.Stage({ ... });
var layer = new Kinetic.Layer();
var group1 = new Kinetic.Group({ draggable: false });
layer.add(group1);
stage.add(layer);
var menuTab = new Kinetic.Rect({... , id: 'id1', name: 'name1'});
var complexText = new Kinetic.Text({... , id: 'id5', name: 'name1'});
group1.add(menuTab);
group1.add(complexText);
menuTab.on('click', function() {
var textChange = stage.get('#id5'); // didn't work
// and .... var textChange = layer.get('#id5');
// and .... var textChange = group1.get('#id5'); //didn't work
textChange.setFill('#BB9999');
textChange.setText('f3');
alert( textChange.getText() );
//this.setText('3');
layer.draw();
});
You have to use
var textChange = stage.get('#id5')[0];
// or .... var textChange = layer.get('#id5')[0];
// or .... var textChange = group1.get('#id5')[0];
textChange.setFill('#BB9999');
textChange.setText('f3');