I am using D3 Graphs in my Android Hybrid app. When this app runs in browser the it shows perfect result but when i am setup for android mobile and testing on Emulator then it is not showing graphe and in LogCat it shows this error but this error not arise when this app runs in chrome, firefox
file:///android_asset/www/sm_libraries/sm_custome/graphClass.js: Line 21 : ReferenceError: Can't find variable: Gauge
Following is code sample
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SHA</title>
<link rel="stylesheet" href="sm_styles/sm_jquery/jquery.mobile.css"/>
<script src="sm_libraries/sm_jquery/jquery.js"></script>
<script src="sm_libraries/sm_jquery/jquery.mobile.js"></script>
<script src="sm_libraries/sm_angular/angular.js"></script>
<script src="sm_libraries/sm_angular/jquery-mobile-angular-adapter.js"></script>
<script src="sm_libraries/sm_angular/sm_controllers/sm_report_controller.js"></script>
<link href="sm_styles/sm_custome/style.css" rel="stylesheet" type="text/css" />
<script src="includes/footer.js"></script>
</head>
<body ng-app="myApp">
<div data-role="page" id="cb_firstReport" ng-controller="reportModule">
<div data-role="header" data-position="fixed">
<a style="display:none" href="#main" data-role="button" data-iconpos="notext" data-icon="home">Home</a>
<h3>Calories Burn Report</h3>
<a data-role="button" data-rel="back" data-iconpos="notext" data-icon="back">Back</a>
</div>
<div data-role="content">
<div class="row-fluid">
<span style="float:left"><a ng-click="cb_first_Prev()" data-role="button" data-iconpos="notext" data-icon="back">Pervious</a></span>
<span style="float:right"><a ng-click="cb_first_Next()" data-role="button" data-iconpos="notext" data-icon="forward">Next</a></span>
</div>
<span class="datesetter" id="cb_first_ViewDate"></span>
<div id="firstReport" style="margin-top:20%; margin-left:40%">
<span id="cb_graphGaugeContainer"></span>
</div>
<div>
<span class="datesetter"><strong>Today, You Burn:: </strong>{{ 1425 }}<strong> Calories</strong></span>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="includes/D3Lib/d3.js"></script>
<script type="text/javascript" charset="utf-8" src="includes/D3Lib/gauge.js"></script>
<script type="text/javascript" src="sm_libraries/sm_custome/graphClass.js"></script>
</body>
</html>
The Js Class in which it shows error is
// JavaScript Document
var GraphClass =
{
gauges:[],
cal:0,
createGauge:function(name, label, min, max)
{
var config =
{
size: 120,label: label,min: undefined != min ? min : 0,max: undefined != max ? max : 100,minorTicks: 5
}
var range = config.max - config.min;
config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
config.redZones = [{ from: config.min + range*0.9, to: config.max }];
GraphClass.gauges[name] = new Gauge(name + "GaugeContainer", config); // **In this line it shows error in eclipse emulator but correct in browsers**
GraphClass.gauges[name].render();
},
createGauges:function()
{
GraphClass.createGauge("cb_graph", "Calories Burn",0,2600);
GraphClass.createGauge("cn_graph", "Calories Gain",0,localStorage.getItem("DailyRequiredCalories"));
},
updateGauges:function()
{
for (var key in GraphClass.gauges)
{
var value = GraphClass.getRandomValue(GraphClass.gauges[key]);
GraphClass.gauges[key].redraw(value);
}
},
getRandomValue:function(gauge)
{
var overflow = 0; //10;
console.log(gauge.config.min+" - "+overflow+" + ( "+gauge.config.max+" - "+gauge.config.min+" + "+overflow*2+")*"+Math.random());
//return gauge.config.min - overflow + (gauge.config.max - gauge.config.min + overflow*2) * Math.random();
return GraphClass.cal;
},
initialize:function(cal)
{
$('#cb_graphGaugeContainer').empty();
$('#cn_graphGaugeContainer').empty();
//alert(cal);
GraphClass.cal = cal;
GraphClass.createGauges();
GraphClass.updateGauges();
}
}
