Jump to content
JChartFX Community
  • 0

jChartfx in Android app


Sacher
 Share

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

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...