I have created a Google Geochart widget some time ago with an older Google JS library version. Nowadays Google advised to upgrade to update to the loader api instead of the jsapi. No matter how I load the libraries, for me the visualization library doesn't load properly, hence I get an undefined when trying to instantiate a GeoChart object. Did anybody else encounter this issue as well?
(The JS code is in the form of Dojo widget functions)
update : function(obj, callback){
this._contextObj = obj;
this._resetSubscriptions();
if (this.apiAccessKey && this.apiAccessKey !== "") {
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': this.apiAccessKey
});
google.charts.setOnLoadCallback(this.drawChart(callback));
} else {
var message = " Google Geochart needs an active API key to work!";
console.error(this._logNode + message);
alert(message);
}
},
drawChart : function (callback) {
// Run this as soon as google charts is loaded.
// Create map and its container.
if (!this.geoMap) {
this.geoMap = new google.visualization.GeoChart(this.geoMapContainer);
}
if (this._contextObj){
this._getObjects(this._contextObj.getGuid,callback);
} else {
this._getObjects(null,callback);
}
this._executeCallback(callback);
},
setOnLoadCallback expects a reference to a function --> this.drawChart
not the result of a function --> this.drawChart(callback)
try as follows...
google.charts.setOnLoadCallback(function () {
this.drawChart(callback);
});
Related
I want to insert trajectories (feature collection of linestrings) in my OSM using Leaflet extracted by a Java application. Starting the server, I want to compute those trajectories and transmit them to my OSM. For using geo positions I am working with the GeoJson library from filosganga: https://github.com/filosganga/geogson
Currently, I need a hint how to do that as my following approach leads to an 404 error message saying:
http://localhost:8080/function (data) { linestrings = L.geoJSON([ data ], { style : function(feature) { //console.log(feature); return feature.properties && feature.properties.style; } }); linestrings.addTo(map); }
My html file looks like the following:
var linestrings;
function reqListener(){
// var url="/test";
$.getJSON(function(data) {
linestrings = L.geoJSON([ data ], {
style : function(feature) {
//console.log(feature);
return feature.properties && feature.properties.style;
}
});
linestrings.addTo(map);
});
}
reqListener();
My Java based server application is the following:
public void TestClass(){
get("/test", (request, responce) -> {return Trajectories.writeTestClass(request, responce);});
}
It already worked for applications where an OSM based event (mouse click or change of boundary) triggered the extraction and further transmission of geo data to OSM. But this time the Java application should trigger the transmission of those trajectories to OSM.
Any help or hint would be wonderful. Thanks
I am trying to abstract some of my JavaScript code by adding functions as objects of properties. The ultimate goal is a dynamic way to render data using Google charts. Below is my charts object which right now works when I call it on the page. This is assuming a separate config and util object which have some other methods:
app.charts = {
init: function(){
// Load the Visualization API and the piechart package, wait until loaded
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(this.createChart);
},
createChart: function(){
// draw charts to their id
chartData = app.utils.getAjax(s.urls.dashUrl, function(data){
// Convert to a table
var jsonDataTable = new google.visualization.DataTable(data);
// Select html element and draw the chart
var chartJson = new google.visualization.BarChart(document.getElementById('json'));
chartJson.draw(jsonDataTable);
this.dataTable();
});
},
dataTable: function(){
console.log("whatever");
}
};
What i would like to do is abstract the var chartJson = new google.visualization.BarChart(document.getElementById('json')); line so that I can give an option and switch to different charts instead of hard coding every chart I want (and thus make it so I can let the user choose chart type.
Whenever I try and write another method, I get a google.visualization is undefined error. I don't see why though because I don't call anything until after the google load callback in init.
To start simple I tried to take have the dataTable: function return a new new google.visualization.DataTable(data); and I received ReferenceError: dataTable is not defined.
I am not sure what is going on that these values can't be found or used, any help appreciated.
I've just just writing some code thinking you meant one thing but I'm not sure it is now reading follow up comments... I'm posting it anyway just FYI:
app.charts = {
init: function(){
// Load the Visualization API and the piechart package, wait until loaded
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(this.createChart);
},
createChart: function(){
// draw charts to their id
chartData = app.utils.getAjax(s.urls.dashUrl, function(data){
// Convert to a table
var jsonDataTable = new google.visualization.DataTable(data);
// Select html element and draw the chart
var input = document.getElementById('user-input').value;
this.chartType(input);
this.dataTable();
});
},
dataTable: function(){
console.log("whatever");
},
chartType: function(input){
switch(input)
{
case 'whatever':
var chartJson = new google.visualization.BarChart(document.getElementById('json'));
chartJson.draw(jsonDataTable);
break;
case 'whatever2':
// etc
break;
}
}
};
HTML
<select id="user-input">
<option value="whatever">whataver</option>
<option value="whatever2">whataver2</option>
</select>
I'm making an ASP.net app to show some features on Google Earth.
After reading "Google's Developer Guide" now i'm using this javascript code:
<script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=MyAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1", {"other_params": "sensor=true_or_false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
}
function generator() {
// Create the placemark.
var placemark = ge.createPlacemark('');
placemark.setName("placemark");
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude(12.345);
point.setLongitude(54.321);
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
alert('OK!');
}
google.setOnLoadCallback(init);
</script>
Then have a code like this in c# to run javascript:
b.ID = "btnSomeButton";
b.Text = "Click to generate PlaceMark!";
b.Attributes.Add("onclick", "return generator();");
My page displays the Google Earth but when I click on the button it doesn't create place mark.Where I am wrong?
I dont know what mistake in your program. It may be created successfully. I think you are searching somewhere. After placemark creation try to change your camera view. Try this code after placemark creation:
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.setLatitude(12.345);
lookAt.setLongitude(54.321);
lookAt.setAltitude(1000);
ge.getView().setAbstractView(lookAt);
It may work. I'm not sure.
I'm trying to get multiple chats on the same page, each one using a different spreadsheet url for its data source.
The code below works ok, but I really want to have multiple urls for different data ranges and show a different chart each time.
When I tried this originally, it only ever showed the last chart I tried to draw.
I’ve reworked the script (which still works) to move closer to a situation where I’ve got multiple sets of data for the multiple charts and their locations. It’s not quite there though. This was based on the following post:
How to add two Google charts on the one page?
I think I need to pass the multiple sets of data as attributes of the handleQueryResponse function but I don’t know how to do that.
I was trying to get it to work for just one set of data first, and if that works ok, add multiple sets of data into it.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
(function() { // Begin scoping function
// vars Global to my code, invisible outside the scoping function
// Set chart options
// I'll be using multiple options for different charts, options1, options2 etc.
var options1 = {'title':'Light & Temperature data - Last 24 Hours',
'width':750,
'height':400,
'curveType': 'function',
'backgroundColor':'ffe599',
"hAxes":[{"title":"Time"}],
"vAxes":[{"title":"Temp in °C -- Light Levels"}]};
//I think I will need containerID1, containerID2 etc. one for each chart
var containerID = 'chart_div1';
//same for chartType1, chartType2
var chartType = 'LINECHART';
// Load the Visualization API and the core chart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawChart() {
//I'm going to have multiple urls and each one will be the source for a seperate chart
var query1 = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0ArGuv......&transpose=0&headers=1&range=L1%3AN500&gid=1');
query1.send(handleQueryResponse);
}
// how do I get containerID1, containerID2, chartType1, ChartType2 Options1, Options2 etc. into this function?
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var containerDiv = document.getElementById(containerID);
var chart = false;
// Instantiate and draw the chart, based on some the chartType and passing in the options.
if (chartType.toUpperCase() == 'BARCHART') {
chart = new google.visualization.BarChart(containerDiv);
}
else if (chartType.toUpperCase() == 'COLUMNCHART') {
chart = new google.visualization.ColumnChart(containerDiv);
}
else if (chartType.toUpperCase() == 'PIECHART') {
chart = new google.visualization.PieChart(containerDiv);
}
else if (chartType.toUpperCase() == 'LINECHART'){
chart = new google.visualization.LineChart(containerDiv);
}
if (chart == false) {
return false;
}
chart.draw(data, options1);
}
})(); // End scoping function
</script>
<!--Divs that will hold the charts - Only chart_div1 is in effect at the moment -->
<div id="chart_div1"></div>
<div id="chart_div2"></div>
You need two response handlers and two queries if you are querying two different data sources:
function drawChart() {
var query1 = new google.visualization.Query(url1);
query1.send(handleQueryResponse1);
var query2 = new google.visualization.Query(url2);
query2.send(handleQueryResponse2);
}
I have a web page that loads a kml file for viewing using the Google Earth ge plugin. The file loads and displays fine. However, I can get the plugin to move to a lat/lon at the end of the file. The load always leaves the camera at the lat/lon that corresponds to the end point of the kml file.
Here's the code:
var ge;
google.load("earth", "1");
google.load("maps", "2");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);
var url = 'http://rallyroadie.org/wordpress/ge/vladi_finish.kml';
google.earth.fetchKml(ge, url, finished);
}
function finished(object) {
if (!object) {
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
// Set new latitude and longitude values.
lookAt.setLatitude(43.023157);
lookAt.setLongitude(131.853040);
// Update the view in Google Earth.
ge.getView().setAbstractView(lookAt);
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
You can see the page at http://rallyroadie.org/wordpress/ge/vladi.html
TIA,
Paul
Are you wanting to know how to set the initial view? If so:
You are currently setting it with this code -
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
// Set new latitude and longitude values.
lookAt.setLatitude(43.023157);
lookAt.setLongitude(131.853040);
// Update the view in Google Earth.
ge.getView().setAbstractView(lookAt);
Try playing with different Latitude and Longitude numbers and you will see the difference.
You can also use stuff like lookAt.setRange, lookAt.setTilt and lookAt.setAltitude
See this link for more details
It has nothing to do with the .kml file you loaded.