8 Replies Latest reply on Aug 11, 2016 6:59 AM by sarahw19098693

    Can chart.js be used in a PhoneGap Build app?

    sarahw19098693

      I am (trying to) use chart.js to display data within a PhoneGap Build app. When testing the app on my laptop browser, the chart displays happily in Chrome. When packaging the app and downloading the apk, the chart no longer shows. The canvas is clear there, but no chart is loaded. Is there something I may have over looked? I can get Google Charts to work, but these are uglier and don't quite work in the way I need. Would much prefer to get chart.js working!

       

      Any advice would be welcome, thanks.

       

      Code snipped from the js below.

       

      var ctx = document.getElementById("myChart");

        var myChart = new Chart(ctx, {

            type: 'line',

            data: {

                labels: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],

                datasets: [{

                    data: [12, 19, 3, 5, 2, 3,3],

                    label:"Presses in the last week",

                    backgroundColor: "rgba(175,192,192,0.4)",

                    borderColor: "rgba(75,192,192,1)",

                    borderWidth: 1,

                    fill:false,

                    lineTension:0

                }]

            },

            options: {

                scales: {

                    yAxes: [{

                        ticks: {

                            beginAtZero:true

                        }

                    }]

                },

                legend: {

                    display: false,

                }

            }

        });

        • 1. Re: Can chart.js be used in a PhoneGap Build app?
          VectorP Level 4

          How do you load chart.js? If from an external server, you may have a whitelisting issue.

          Also, it might be possible that your CSP is blocking inline javascript.

           

          See the docs for the whitelist plugin from npm here cordova-plugin-whitelist

          • 2. Re: Can chart.js be used in a PhoneGap Build app?
            sarahw19098693 Level 1

            Thanks for the reply.

             

            The js is in the js directory, so run internally. I therefore don't think it's a whitelisting issue.

             

            I'm not sure what CSP is, can you elaborate? The rest of the js in that file is running fine (and an alert at the start of the graph drawing function does fire, so the thing is definitely being called).

            • 3. Re: Can chart.js be used in a PhoneGap Build app?
              VectorP Level 4

              CSP is explained in the whitelist docs I mentioned. But if your alert shows, CSP errors are not likely.

              So, you mentioned an alert at the beginning of 'the graph drawing function', but you posted none. What exactly is the statement that fails, and do you happen to receive a javascript error message while debugging?

              Also, in which of your test devices (what OS/version) does it fail, and in which does it succeed?

              • 4. Re: Can chart.js be used in a PhoneGap Build app?
                sarahw19098693 Level 1

                The full function that is being called is posted below. The alert "making chart" displays. There are no error alerts.

                 

                The chart successfully shows in my Chrome browser when opening the project on my laptop (not, this is with no simulations of phone OSs, just plain Chrome).

                 

                Using that same code when building my app, the graph then no longer shows on either iPhone (iOS 9.3.3) or Android phone (4.0.4).

                 

                Thanks for the advice.

                 

                function makeWeekChart(){

                  alert("making chart");

                  var ctx = document.getElementById("myChart");

                  var myChart = new Chart(ctx, {

                      type: 'line',

                      data: {

                          labels: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],

                          datasets: [{

                              data: [12, 19, 3, 5, 2, 3,3],

                              label:"Presses in the last week",

                              backgroundColor: "rgba(175,192,192,0.4)",

                              borderColor: "rgba(75,192,192,1)",

                              borderWidth: 1,

                              fill:false,

                              lineTension:0

                          }]

                      },

                      options: {

                          scales: {

                              yAxes: [{

                                  ticks: {

                                      beginAtZero:true

                                  }

                              }]

                          },

                          legend: {

                              display: false,

                          }

                      }

                  });

                }

                • 5. Re: Can chart.js be used in a PhoneGap Build app?
                  VectorP Level 4

                  This all looks correct.

                   

                  There are several issues that pop up when googling for chart.js display problems, but they all seem to be a bit older and they appear to be related to mobile webview components. It might be possible that those webview components don't support something which is required for chart.js

                   

                  I only have two suggestions:

                  1. make sure you have the latest chart.js version (2.2.1. of 11 days ago)

                  2. consider using the Crosswalk webview plugin for Android.

                  • 6. Re: Can chart.js be used in a PhoneGap Build app?
                    sarahw19098693 Level 1

                    Cheers for your help with this. I'll mess around a bit more before moving on to another option.

                    • 7. Re: Can chart.js be used in a PhoneGap Build app?
                      kerrishotts Adobe Community Professional

                      It might help to see your index.html file where you're including "chart.js".

                      • 8. Re: Can chart.js be used in a PhoneGap Build app?
                        sarahw19098693 Level 1

                        I'm including it in the <head> with the other js libraries I'm using (or testing).

                         

                        Might its position in the index.html cause it to run fine on my machine, but fail in PhoneGap?

                         

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

                            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

                            <script type="text/javascript" charset="utf-8"></script>

                            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

                            <script src="js/Chart.js"></script>

                            <script src="js/chartist.js"></script>