Jump to content
JChartFX Community
  • 0
Sacher

jChartfx in Android app

Question

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

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0







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

Share this post


Link to post
Share on other sites
  • 0

 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

 

Share this post


Link to post
Share on other sites
  • 0

 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×