jChartfx in Android app

Sacher · March 11, 2013

Hi,

I am creating an jquerymobile based application for Android using the Phonegap tool. The whole app consists of a single webpage which is supposed to show one single jchartfx bar chart.

If I view the web page directly in a webbrowser, the chart is displayed correctly. But when I build the app in the Eclipse environment and load in an android tablet, the app opens and a blank (no chart) is seen.

Similarly, If I try to embed the container div for the chart inside another collapsible div (

), the chart is not visible even if the webpage is opened in a regular browser.

Has anybody faced these issues and found the solutions? Any input is highly appreciated.

Thanks very much

Sacher

angelr · March 14, 2013

We tried a Cordova example dispatched in
PhoneGap latest version. The Eclipse Android\cordova project comes with an html
webpage (index.html) that we edited to include JChartFX libraries and to create
a Bar Chart in code. We set a simple Bar Chart with no additional
interactivity.

The chart image rendered as expected within
the app in the AVD/emulator and also, when exported as an Android App(.apk) to
a real Android Tablet (Motorola Xoom Android 4.1.2).

Here is the html we used and the resulting chart image:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Test PhoneGap & jChartFX</title>
    </head>
    <body>
        <div class="app">
            <h1>jChartFX</h1>           
        </div>
        <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.system.js"></script>
     <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.coreVector.js"></script>
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
  <div id="ChartDiv1" style="width:700px;height:400px;display:inline-block"></div>
  <script language="javascript" type="text/javascript">
   window.onload = function () {
    onLoadDoc();
   };
    var chart1;
    function onLoadDoc() {
     chart1 = new cfx.Chart();                
     
     chart1.setGallery(cfx.Gallery.Bar);
     
     chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
     
     var chartDiv = document.getElementById('ChartDiv1');
     chart1.create(chartDiv);
    }

  </script>
 </body> 
</html>

JChartFX & PhoneGap

Sacher · March 21, 2013

Hi Angler,

Thanks for the reply. I was not able to check the site for some time. Sorry for my late response.

I shall verify the solution and get back with my findings.

Thanks again,

Sacher

Sacher · March 22, 2013

Hi Angler,

I found that this still does not work in Android 2.3; guess it is due to the issue with SVG. Thanks for your time and effort.

Regards,

Sacher

Sign In

jChartfx in Android app

Question

Sacher

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

angelr

Link to comment

Share on other sites

Sacher

Link to comment

Share on other sites

Sacher

Link to comment

Share on other sites

Join the conversation

Browse

Activity