I am using Titanium SDK. and I want to add line graph facility in my app.
my app is both device compatible (android and iphone). for line chart i am using google graph api. (https://developers.google.com/chart/interactive/docs/gallery/linechart). but is working with only iphone not with android.
with iphone working very good.
but, not working with android.
error message is : [Result of expression 'c[0]'[null] is not an object. ]
how i remove this issues
I am using this code.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addRows([
['April',1000, 'A'],
['May', 1170, 'B'],
['June', 660, 'C'],
['July', 1030, 'c']
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Please help me, thanks in advance
This code is working for my side.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 400, annotationColumns:[{column:2, size:15, type:'flag', priority:'high'},], title: ''
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Thanks to all.
Related
I'm rather new to this and currently working on my first app (for a school project). I followed this https://www.w3.org/TR/geolocation-API/ tutorial. When I open the project in the browser (on a pc) it gives the coordinates but once installed (though phonegap) on my phone nothing seems to happen. Also the implementation with google maps does not seem to work (also not on the pc). Can any of you help me or redirect me to easy to follow guids?
These are the sources I looked at as well:
https://demos.jquerymobile.com/1.4.5/map-geolocation/
https://www.w3.org/TR/geolocation-API/
https://forum.jquery.com/topic/jquery-mobile-activating-geolocation-on-mobile-devices
https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api
https://cordova.apache.org/docs/en/3.0.0/cordova/geolocation/geolocation.getCurrentPosition.html
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}
</script>
<html>
<head>
...
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
<script>
</head>
<body>
...
...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=******(Your API Key)">
</script>
</body>
<html>
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
I am creating a phonegap app. In my app I will have a not draggable Google Maps.
In the browser, mousemove event fire continuously while I move the mouse around over the map.
I expected the same behavior in my mobile phone, but the mousemove only fire once.
This is my main.js file
var app = new function () {
return {
initialize: function () {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(23.5403, -74.5463),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(map, 'mousemove', function (event) {
console.log('move');
});
google.maps.event.addDomListener(map, 'mousedown', function (event) {
console.log('down', event);
});
google.maps.event.addDomListener(map, 'mouseup', function (event) {
console.log('up', event);
});
}
}
};
google.maps.event.addDomListener(window, 'load', app.initialize);
This is my index.html file
<html>
<head>
<style>
#map-canvas {
width: 100%;
height: 400px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Could anyone take a look and help my get all the mousemove events? I tried touchmove but I could not make it work with Google Maps.
I manage to fire the event constantly adding the code
function move(event) {
console.log('touchmove', event);
event.preventDefault();
}
document.getElementById('map-canvas').addEventListener('touchmove', move, false);
I am developing an android application (build with Phonegap) that requires to display the current location of a user and to load KMZ file (with poly lines) on Google Map (use of google map api).
My application loads the map on a specific zoom level (11) and map is centered based on user's current location (reduce data consumption). I noticed that for android OS 4.2.2 the map is not loaded at all, message displayed " access denied to your current position".
On the other hand map is loaded correctly for android OS 4.1.2, 4.3, 4.4 (not get any message).
Is this a security issue/bug for android 4.2.2?
Or it is a bug related to the Phonegap I use to build the APK?
How can I resolve this issue? Is there any configuration I need to do in the mobile?
Thanks
It works fine on Android 4.2.2 or any other supported version. There might be a mistake in your code settings.
I just re-confirmed by creating a sample App.
Steps:
(1) Include Google API Key and Maps jS link in the html header section
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_VALUE_&sensor=true"></script>
<title>Hello World</title>
</head>
<body>
<b>Road View</b>
<div id="map-canvas" style="width: 100%; height: 200px"></div>
<b>Street View</b>
<div id="pano" style="width: 100%; height: 200px;"></div>
<b>Live Traffic Update View</b>
<div id="traffic" style="width: 100%; height: 200px;"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
(2) In the index.js file declare following function to render maps
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
app.renderMap();
},
receivedEvent: function(id) {
},
renderMap: function() {
// --- Road View
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway, zoom: 11
};
var map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions);
// ---- Street View
var panoramaOptions = {
position: fenway,
pov: { heading: 34, pitch: 10 }
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
// ---- Live Traffic View
var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('traffic'), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
};
app.initialize();
(3) Add permission in the AndroidManifest.xml file.
(4) Set your project API level to your desired version, for instance 4.2.2
(5) Run App on device and it should show three different types of Map Views ( Road, Street and Live Traffic)
This is the JS file code I use to load KML files on map, get current position, display marker:
'use strict';
angular.module('ehunter.controllers', []).
controller('RegionListCtrl', ['$scope', '$http', '$window',
function($scope, $http, $window) {
$http.get('regions.json').success(function(data) {
$scope.regions = data;
});
$scope.openBrowser = function(url){
$window.open(url, "_blank", "location=yes");
}
}])
.controller('RegionViewCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.region = angular.fromJson($routeParams.r);
var map;
var src = "MY_SERVER"+ $scope.region.File;
initialize();
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
}
getLocation();
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function displayPosition(position) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
marker.setVisible(true);
marker.setMap(map);
map.setCenter(marker.position);
});
}}
}])
i am creating a pie chart for android devices using some additional plugin in Titanium Studio so, this is my app.js
var earn=[' ',' '];
var textfield1 = Ti.UI.createTextField({
value:earn[0],
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield1);
var textfield2 = Ti.UI.createTextField({
value:earn[1],
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield2);
var webview = Titanium.UI.createWebView({
url: 'chart.htm'
});
win.add(webview);
and this is my chart.htm
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>
<script type="text/javascript">
var p = new pie();
p.add("Jan",100);
p.add("Feb",200);
p.render("pieCanvas", "Pie Graph")
</script>
If i were to use array "earn[0]" for my "Jan" how do i call the array from the app.js file? When i change value "100" to "earn[0]", the pie chart will not show. Help?
Try this:
App.js
var earn = [100, 200];
var textfield1 = Ti.UI.createTextField({
value: earn[0],
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield1);
var textfield2 = Ti.UI.createTextField({
value: earn[1],
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
win.add(textfield2);
var webview = Titanium.UI.createWebView({
url: 'chart.htm'
});
win.add(webview);
webView.addEventListener('load', function (e) {
webview.evalJS('createPie(earn);');
});
Chart.htm
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>
<script type="text/javascript">
function createPie(arr) {
var p = new pie();
p.add("Jan", arr[0]);
p.add("Feb", arr[1]);
p.render("pieCanvas", "Pie Graph");
}
</script>
Checkout this link for more help : http://developer.appcelerator.com/question/73121/passing-variable-from-titanium-js-class-to-html-script-
Your earn array will not dynamically update when you change the textfields, if that is what you are asking. You have to listen for when the texfields fire change events, capture that event, and get the new values, now you can update the pie chart.
To make it so that up update the graph whenever someone changes the value in the texfields you need to do this:
/* app.js */
var textfield1 = Ti.UI.createTextField({
value:' ',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
/* This is the important part */
textfield1.addEventListener('change', function(e) {
var earn = [textfield1.value, textfield2.value];
webview.evalJS('createPie(' + JSON.stringify(earn) +');');
});
var textfield2 = Ti.UI.createTextField({
value:' ',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
});
/* This is the important part */
textfield2.addEventListener('change', function(e) {
var earn = [textfield1.value, textfield2.value];
// DO this
webview.evalJS('createPie(' + JSON.stringify(earn) +');');
});
var webview = Titanium.UI.createWebView({
url: 'chart.htm'
});
// Add views
win.add(textfield1);
win.add(textfield2);
win.add(webview);
And in your HTML (I've taken from Mohit's well crafted HTML):
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>
<div id="pieCanvas" style="overflow: auto; position:relative;height:350px;width:380px;"></div>
<script type="text/javascript">
function createPie(arr) {
var earn = eval(arr); // convert from JSON string to JS, alternatively use JSON.parse
var p = new pie();
p.add("Jan", earn[0]);
p.add("Feb", earn[1]);
p.render("pieCanvas", "Pie Graph");
}
</script>
Now you have the bones, you may have to mess with the createPie() function, check out the link Mohit sent, this is written out in detail there.
I am Designing a mobile app on phonegap. In this I am trying to get curent location of user. But I am not getting the map on Andriod Emulator.
I used this code :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Map</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{alert("error"),"enableHighAccuracy":true,"timeout":3000});
}
//GEOLOCATION
var onSuccess = function(position) {
alert("Latitude: " + position.coords.latitude + "\n" +
"Longitude:" + position.coords.longitude + "\n");
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert("code: " + error.code + "\n" +
"message: " + error.message + "\n");
}
</script>
</head>
<body onload="onLoad()">
<div>map</div>
<div id="map_canvas" style="width:100px; height: 100px;" ></div>
</body>
</html>
I don't know where I am gng wrong.Can any one please help me on this?
Check this code... change cordova-1.8.1.js into ur cordova2.0.js... remaining source is refer thro online. If its not works. then there problem in ur phonegap configuration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset ="utf-8" src="cordova-1.8.1.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>