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.
Related
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've an hybrid app for android, i'm using cordova and onsen + angular js.
This is my index.html file:
<html lang="en" ng-app="AppModel">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>AppModel</title>
<!-- <link rel="stylesheet" href="css/plugins.css"/> -->
<link rel="stylesheet/less" href="css/plugins.less"/>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet/less" href="css/app.less"/>
<link rel="stylesheet/less" href="css/base-layout.less"/>
<script src="css/less.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="js/lodash_3.2.0.min.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="js/angular-google-maps_2.0.12.min.js"></script>
<script src="lib/onsen/js/angular/angular-touch.js"></script>
<script src="lib/onsen/js/onsenui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/appStart.js"></script>
<script src="js/data/data.js"></script>
<script src="js/angularApp/controllers.js"></script>
<script src="js/angularApp/directives.js"></script>
<script src="js/angularApp/filters.js"></script>
</head>
<body >
<ons-sliding-menu
menu-page="modules/core/menu.html" main-page="modules/account_profile/login.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50">
</ons-sliding-menu>
</body>
</html>
This is the appStart.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
exitFunction : function(){
if (navigator.notification.confirm("Vuoi chiudere l'app?",
function(index) {
if (index == 1) { // OK button
navigator.app.exitApp(); // Close the app
}
},
"AppModel",
["Ok","Annulla"]
));
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
ons.setDefaultDeviceBackButtonListener(function() {
if (navigator.notification.confirm("Vuoi chiudere l'app?",
function(index) {
if (index == 1) { // OK button
navigator.app.exitApp(); // Close the app
}
},
"AppModel",
["Ok","Annulla"]
));
});
/*
// Open any external link with InAppBrowser Plugin
$(document).on('click', 'a[href^=http], a[href^=https]', function(e){
e.preventDefault();
var $this = $(this);
var target = $this.data('inAppBrowser') || '_blank';
window.open($this.attr('href'), target);
});
*/
$(document).on('click', 'a', function(e){
e.preventDefault();
var $this = $(this);
//var target = $this.data('inAppBrowser') || '_blank';
window.open($this.attr('href'), "_system");
});
},
// Update DOM on a Received Event
receivedEvent: function(id) {
//var parentElement = document.getElementById(id);
//var listeningElement = parentElement.querySelector('.listening');
//var receivedElement = parentElement.querySelector('.received');
//listeningElement.setAttribute('style', 'display:none;');
//receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
(function() {
var app = angular.module('AppModel', ['onsen', 'angular-carousel', 'uiGmapgoogle-maps'])
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|mailto|tel|geo):/);
}
]);
document.addEventListener('deviceready', function() {
angular.bootstrap(document, ['AppModel']);
}, false);
})
And data.js, controller.js, filter.js, directive.js are all like this:
var app = angular.module('AppModel'); //this is the first line in each file
app.factory('MenuData', function(){ [...]
But when i launch the app in google chrome, the console says:
Uncaught Error: [$injector:nomod] Module 'AppModel' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.10/$injector/nomod?p0=AppModel
This message appears for the files data.js, controller.js, filter.js, directives.js due to the first line of each file.
I don't know what to do. Can someone help me?
Doesn't look like you're executing the line where the app module is created.
You must run the line
angular.module('appName', [dependencies]);
before you created your controllers and services, like the error message says.
Are you calling the anonymous function that creates the module? Just add an empty parenthesis and it should run:
(function() {
var app = angular.module(...
})();
As the error message says, you must specify the dependencies as the second argument. If none is needed, then pass an empty array.
change
var app = angular.module('AppModel'); //this is the first line in each file
to
var app = angular.module('AppModel', []); //this is the first line in each file
and run it again.
Additional information: https://docs.angularjs.org/api/ng/function/angular.module
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 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.
When I remove a marker using marker.setMap(null), it remains visible until I zoom out at which point Google Maps removes it.
The marker is not visible after being removed on the same HTML page with Chrome on Windows.
It appears that the map is not being refreshed properly after the markers are removed.
Code with the issue (marker should disappear after 5s):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQ7L1PL7pQzSuDfv9kTL_qE4Cp0wy8Oo8&sensor=true">
</script>
<script type="text/javascript">
var theMap = null;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(37.7749295, -122.4194155),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
theMap = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
navigator.geolocation.getCurrentPosition(
function (position) {
// successfully load position
var lat = position.coords.latitude;
var long = position.coords.longitude;
theMap.setCenter(new google.maps.LatLng(lat, long), 21);
},
function (fail) {
console.error("Failed to load GPS coordinates");
}
);
var marker;
function addMarker(itemid, lat, lon) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: theMap
});
}
addMarker('pokemon', 37.42841, -122.16960);
setTimeout(function() {marker.setMap(null);}, 5000);
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width:100%; height:100%; top:0px; z-index: 10"/>
</body>
</html>
I think, it's the same issue like here: Google Maps API v3 in PhoneGap: markers not drawing properly after move
Try to set the optimized: false property to the marker:
new google.maps.Marker({
map: map,
optimized: false,
clickable: true
});
this should fix it!