Issue: Blurry canvas graph in WebView
I am developing mobile applications for Android and iOS which displays user's activity graphs. To plot the graphs, I am using Canvas and JavaScript.
As the graphs are in JavaScript, I am using WebView to render the graph.
The reason why I am using WebView and JavaScript is, so that I don't have to write graph two times in iOS and in Android and I can just use the same code.
In Android, when I render this graph in my WebView, the output is very blurred and not as clear as compared to a canvas rendering in any Desktop browser. We receive the same result in iOS.
Following is the output when I use WebView with Android:
Below is my expected output:
Following is my code to display graph in Android.
main_activity.xml
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
/>
In MainActivity.java
webView =findViewById(R.id.webView);
WebSettings webSetting = webView.getSettings();
webSetting.setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
webView.setLayerType(View.LAYER_TYPE_HARDWARE,null);
}
webView.setBackgroundColor(0xFFFFFFFF);
webView.loadUrl("file:///android_asset/graph.html");
We have put graph.html file inside asset folder.
graph.html
This file is using DrawChart() method defined in graphlib.js file. This graphlib.js file has code to draw data in canvas.
<!DOCTYPE html>
<html>
<body>
<script src="./jquery-3.3.1.js"></script>
<script src="./graphlib.js"></script>
<div id="dvGraphData"></div>
<script>
var oWebViewInterface = window.nsWebViewInterface;
var result2;
oWebViewInterface.on('resultData', function (e)
DrawChart(e.Data);
});
DrawChart = function (result2) {
var Linewidth = 3;
var IsDrwaXaxis = true;
var showMinorGridLine = false;
var minorGridLineXaxis = null;
var markerSize = 6; //
var skipStep = 0;
datalength=result2.length;
if (datalength > 15) {
skipStep = (datalength / 15) >= 1 ? parseInt(datalength / 15) : 0;
IsDrwaXaxis = false;
Linewidth = 2;
markerSize = 4;
}
$("#dvGraphData").drawChart({
data: result2,
chart: {
chartType: "line",
LineProperty: [{
lineColor: "#fff",
lineThickness: Linewidth,
drawLine: true,
drawPoint: true,
pointColorField: "MarkerColorWeight",
pointSize: markerSize,
pointType: "circle",
YpropertyName: "Distance",//compare y axis data
XpropertyName: null,//compare x axis data
lineLegend: 'Distance',
showLineLegend: true
}],
showVerticalGrid: IsDrwaXaxis,
showMinorGridLine: showMinorGridLine,
minorGridLineXaxis: minorGridLineXaxis,
yIndicator: [result2[0].distanceIndicators]
},
MinRange: result2[0].DistanceStartValue,
MaxRange: result2[0].DistanceEndValue,
gap: result2[0].GapValue,
stepSkip:skipStep,
XLineValues: [{
field: "MeasurementDateString", labels: {
Color: "#fff"
}
}
],
canvasHeight: 300
});
}
</script>
<body>
graphlib.js
"use strict";
(function ($) {
//Global Variable
var markerTypes = ["circle", "square"]
var innerPaddingLeft = 30;
var innerPaddingTop = 10;
var innerPaddingRight = 10;
var innerPaddingBottom = 30;
$.fn.drawChart = function (options) {
return this.each(function () {
var graphSettings = $.extend({}, $.fn.drawChart.defaults, options);
$(this).html("");
graphSettings.currentElement = $(this);
if (graphSettings.canvasWidth == null && graphSettings.canvasWidth == undefined) {
graphSettings.canvasWidth = $(this).parent().width();
if (graphSettings.canvasWidth <= 0) {
graphSettings.canvasWidth = 274;
}
}
//if graphSettings.YLegendLabel has value the reset canvasWidth of canvas graphSettings.canvasWidth-35
if (graphSettings.YLegendLabel != null && graphSettings.YLegendLabel != undefined) {
graphSettings.canvasWidth = graphSettings.canvasWidth - 35;
}
else {
if (graphSettings.backgroundcolor != null && graphSettings.backgroundcolor != undefined) {
$(this).attr("style", "position: relative;padding-left:35px;float:left;width:100%;background-color:" + graphSettings.backgroundcolor + "");
}
}
//add canvas
addCanvas(this, graphSettings);
//Intilize graph comman property
init(this, graphSettings);
//base x and y line drawing
drawBaseAxisLines(graphSettings);
//axis label ploating
plotAxisLabels(graphSettings);
//Draw minor grid line
drawMinorGridLine(graphSettings);
//Draw grid line
drawGridLines(graphSettings);
//Add yIndicator
if (graphSettings.chart.yIndicator != undefined && graphSettings.chart.yIndicator != null) {
drawIndicators(graphSettings);
}
//********************************************************************************Code for drawing chart Start************************************************************
if (graphSettings.chart.chartType == 'line') {
drawLineChart(graphSettings);
}
else if (graphSettings.chart.chartType == 'bar') {
drawBarChart(canvas);
}
//********************************************************************************Code for drawing chart End************************************************************
//Add x legend on x axis
if (graphSettings.showXLegend == true) {
var xlegendshtml = "<div style='text-align:center;'>";
xlegendshtml += "<div style='display:inline-block;'>";
for (var i = 0; i < graphSettings.xLegends.length; i++) {
xlegendshtml += "<span style='display:block; float:left; height:12px; width:12px; position:relative; top:3px; background:" + graphSettings.xLegends[i].color + "; border:1px solid #ffffff;'></span>";
xlegendshtml += "<span style='display:block; float:left; margin-left:3px; margin-right:8px; font-size:14px; color:" + graphSettings.color + ";'>" + graphSettings.xLegends[i].legendsName + "</span>";
}
xlegendshtml += "</div>";
xlegendshtml += "</div>";
$(this).append(xlegendshtml);
}
});
}
// method implementation
}
Is anyone facing the same issue and found solution for this problem?
Thanks in advance..!!
Aanal Mehta0 Answers
Nobody has answered this question yet.
User contributions licensed under CC BY-SA 3.0