I am having trouble getting HighCharts to render in an Android Webview. This is on Android 4.0+
Below is my html code
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>How to create active charts using Highcharts | Script Tutorials</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="chart_1" class="chart"></div>
<script type='text/javascript'>
$(document).ready(function() {
// First chart initialization
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'area',
height: 350,
},
title: {
text: 'Tools developers plans to use to make html5 games (in %)'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Interviewed'
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
});</script>
</body>
</html>
The I read the html file from the asset directory convert it into a string using a bufferedreader and then load it into the webview using
webview.loaddata(customHtml, "text/html", "UTF-8");
Did you enable Javascript in your webview? If not, just add this line in your onCreate method:
webview.getSettings().setJavaScriptEnabled(true);
where "webview" is:
WebView webview = (WebView)findViewById(R.id.my_webview);
I had the same problem when i was working with highcharts and android webview...
WebView webview;
webview = (WebView) findViewById(R.id.webview);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
webview.clearCache(true);
settings.setDomStorageEnabled(true);
webview.setWebViewClient(new WebViewClient());
webview.loadUrl("your_website.com");
I used this code for the native app and it works very well...
Related
I'm using leafletjs in an Android Application to render local polygons (without CRS Information) in geojson format, without maptiles. Unfortunately, zooming and other touch movement are very laggy. My geojson file contains 3000 polygons. Is there any solution to this problem, the only thing I can find is a solution for markers.
This is how it looks:
Here is my code:
In onCreate:
public void loadMap(){
scanFiles();
checkStoragePermissions();
webview = (WebView) findViewById(R.id.myWebView);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// chromium, enable hardware acceleration
webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
// older android version, disable hardware acceleration
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
WebSettings webSettings =
webview.getSettings();
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setJavaScriptEnabled(true);
webview.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
webview.setWebChromeClient(
new WebChromeClient());
File leafletMap = new File(Environment.getExternalStorageDirectory(), "/LeafletMap/Map.html");
webview.loadUrl("file:///" + leafletMap.getAbsolutePath());
}
And my HTML-File:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="file:///android_asset/leaflet/leaflet.css">
<script type="text/javascript" src="file:///android_asset/leaflet/leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid', {
crs: L.CRS.Simple
});
//Add local
var layer;
const xhr = new XMLHttpRequest();
xhr.open('GET', 'file:///android_asset/poly.json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function () {
if (xhr.status !== 200) return
var blahlayer = L.geoJSON(xhr.response).getBounds();
mymap.fitBounds(blahlayer);
L.geoJSON(xhr.response).addTo(mymap);
};
xhr.send();
</script>
</body>
</html>
I have a Json URL am gettings from Wordpress, I want to display the text file using a Webview and format it, but I want to removed the HTMl tags also which display along with the text also.
This is the Json link.
WebView newsfeed = (WebView) findViewById(R.id.webView1);
try{
newsfeed.loadDataWithBaseURL("javascript:(function() { " +"url" +"})()", null, null, null, null);
}catch (Exception e){
e.printStackTrace();
}
So, as per your requirement, your "content" will be obtained using:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "http://www.cepfonline.org/features/dyk/?json=1",
type: "GET",
dataType: "jsonp",
success: function (result) {
// alert("success");
var obj = $.parseJSON(JSON.stringify(result));
alert(obj.posts[0].content);
},
error: function () {
alert('Failed');
}
});
});
</script>
</head>
<body>
</body>
</html>
Above code will give you the data of "contents" key:
<p><span style=\"line-height: 1.5em;\">Did you know that our satellite TV Station, LoveWorld plus, can be viewed in over 50 countries of the world?</span></p>\n<p>Did you know that our ministry flagship programs are currently aired in over 180 Television stations worldwide?</p>\n<p>Did you know that through our LoveWorld Radio Ministry, our flagship programs air in over 200 countries across the world?</p>\n<div>Did you know that in the year 2013 alone, the Healing School hosted over 500 Ministers from 42 countries around the world through the Ministers’ visitation programme?</div>\n
Now, using XML parser, you can get the core string data without html tags.
You can also do this, to strip the html tags. Check this out.
Final answer:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "http://www.cepfonline.org/features/dyk/?json=1",
type: "GET",
dataType: "jsonp",
success: function (result) {
var obj = $.parseJSON(JSON.stringify(result));
var originalData = obj.posts[0].content;
var strippedData = originalData.replace(/(<([^>]+)>)/ig,"");
alert(strippedData);
},
error: function () {
alert('Failed');
}
});
});
</script>
</head>
<body>
</body>
</html>
Just I'm trying to have a min example of Google maps working on Cordova Android.
The code works fine on localhost with Chrome and Firefox, but i can't get it work on the device.
Example code:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type='text/javascript'>
window.addEventListener('deviceready',function(){
var latitud = xx.xxxxxxx;
var longitud = x.xxxxxxxxxxxxxxxx;
success(latitud,longitud);
},true);
function success(latitud,longitud) {
var coords = new google.maps.LatLng(latitud, longitud);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("prova_maps"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
</script>
</head>
<body>
<h1>Google Maps</h1>
<div id='prova_maps' style='height:250px;width:250px;'></div>
</body>
</html>
I have the following error at console that is directly relaunched with that problem, but can't find a solution for that:
https://imageshack.com/i/f3myppp
I have the access tags added in config.xml.
And even try to add
And in index.html
<script type="text/javascript" src="../platform/js/libs/cordova.js"></script>
Try to add this link in the script...tag
google.maps.event.addDomListener(window, 'load', initialize);
I use jquery mobile and html5 to develop my mobile application.
I have problem when I have go to other page with Google map and my position.
Directly when go to this page is everything OK (by firefox or my Android application).
When I go to my webpage by link like " from another page nothing happen. I see only white page.
I will be really grateful for help or sugestion.
Android webView:
webView = (WebView) rootView.findViewById(R.id.webView1);
// Brower niceties -- pinch / zoom, follow links in place
webView.getSettings().setGeolocationEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
// HTML5 API flags
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setDatabaseEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.setWebViewClient(new WebViewClient(){
});
webView.setWebChromeClient(new WebChromeClient(){
public void onGeolocationPermissionsShowPrompt(String origin,
GeolocationPermissions.Callback callback) {
// Always grant permission since the app itself requires location
// permission and the user has therefore already granted it
callback.invoke(origin, true, false);
}
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// When user clicks a hyperlink, load in the existing WebView
view.loadUrl(url);
return true;
}
});
webView.loadUrl(mainUrl);
Html code (map.html):
!DOCTYPE html>
<html>
<head>
<title>mCB - Map</title>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
body,html {height:100%}
#map {width:100%;height:100%;}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
var map;
var marker;
function initGeolocation() {
if (navigator && navigator.geolocation) {
var watchId = navigator.geolocation.watchPosition(successCallback,
errorCallback,
{enableHighAccuracy:true,timeout:Infinity,maximumAge:0});
} else {
console.log('Geolocation is not supported');
}
}
function errorCallback() {}
function successCallback(position) {
var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if(map == undefined) {
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
addMarker(map, myLatlng, "My Position");
}
else
marker.setPosition(myLatlng);
}
function addMarker(map, myLatlng, title ){
var markerOptn = {
position: myLatlng,
map : map,
title : title,
}
marker = new google.maps.Marker(markerOptn);
}
</script>
</head>
<body onload="javascript:initGeolocation()">
<div id="map">
</div>
</body>
</html>
I am using google charts on android. I am able to get desired output on desktop based web browsers but when i execute the same using android webview doesnt show anythying .
Here is my code for html and for android webview, am I missing anything?
WebView webview = (WebView) this.findViewById(R.id.webView1);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webview.requestFocusFromTouch();
webview.setWebViewClient(new WebViewClient());
webview.setWebChromeClient(new WebChromeClient());
// Load the URL
webview.loadUrl("file:///android_asset/www/rG.html");
?///////////////////////////////////////////////////////////////////
for html
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You should load the css & javascript from local. i.e. "<html><head><link type=\"text/css\" rel=\"stylesheet\" href=\"file:///android_asset/styles.css\"><script type=\"text/javascript\" src=\"file:///android_asset/script.js\"></script></head><body>";