top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

D3 Graph Not Display in Android Hybrid App

+2 votes
455 views

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();
    }
}
posted Dec 14, 2013 by anonymous

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+2 votes

its maybe SVG issue that Androiud not supported SVG
look at this

answer Dec 19, 2013 by Blu Angel
Similar Questions
0 votes

I am searching for the smallest and largest in term of size of android app ever built and launched in google play store?

+1 vote

I need that my web app talk with a dektop application.

User case: a user click a button on the page, and this button send a command to the desktop app and wait for the answer from destkop app or timeout.

I am using Rails 4 and Qt/C++, but it is not mandatory to use Qt/C++. The desktop app is used to talk with computer usb port. Anyone have any tips or help?

+1 vote

Hi all,I want to create an android app.But i wonder what is phonegap?Also, i need to know which one is best for creating app.

...