1 2 Previous Next 15 Replies Latest reply on Oct 5, 2016 8:16 AM by markpelleymounter

    Webviewer - Google Graphs - blank result

    pvhaute

      Hi,

      i try to show (google) graphs using webviewer, but the result remains blank.

      i copy/paste the htnl code from the GoogleDev pages directly into the webviewer-object (Webviewer Setup - Specify (webaddress)),

      exchange the " by \" ,

      put all the text between ",

      and add a prefix "data:text/html,"

       

      looks like the below:

       

      Upon 'exit layout' i see briefly (below the object) that FM tries to load something (text goes away too quickly) but then decides not to show anything.

      Can somebody tell me what i'm doing wrong?

      Many thanks in advance,

      Piet

       

        • 1. Re: Webviewer - Google Graphs - blank result
          Johan Hedman

          Incorporating Google Charts into a FileMaker Solution | FileMaker Videos - YouTube

           

          There might so that Google API have changed the class for Gauge. Check it up and see that it works in a regular HTML-page

          • 2. Re: Webviewer - Google Graphs - blank result
            pvhaute

            Thanks Johan,

            Unfortunately the class for Gauge is still correct, and the chart does show correctly when using a regular html-page (on the same (Windows) machine).

            (i also checked the youtube-link that you sent me)

            Any further suggestion?

            Many thanks for your efforts!

            • 3. Re: Webviewer - Google Graphs - blank result
              Johan Hedman

              What is your standard web browser? I know I have read about it here at the community that people that does not have up to date web browsers or browsers (not Internet Explorer/Edge or Safari) might run into problems showing things in the web viewer

              • 4. Re: Webviewer - Google Graphs - blank result
                User26869

                Hi Piet

                 

                Have you tested your code in a code editor?

                Also, I would advice setting the code of your WebViewer in a field so that you can directly copy and paste from your code editor once you got it working, without the need to escape the quotation marks.

                That way you quickly see if it's a Filemaker problem or a JavaScript/HTML one

                 

                Hope this helps

                 

                Chloe

                • 5. Re: Webviewer - Google Graphs - blank result
                  markpelleymounter

                  I don't know if this will help you, but I did have issues getting the gauge chart to work properly, then got it all working through trial and error!

                   

                  This is the working example, obviously, it is pulling figures directly from my database, but hopefully you can replicate in your system.

                   

                  "data:text/html," & "

                  <html><!DOCTYPE html>

                  <head><meta http-equiv=\"x-ua-compatible\" content=\"IE=11\">

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

                    <script type=\"text/javascript\">

                      google.charts.load('current', {'packages':['gauge']});

                      google.charts.setOnLoadCallback(drawGauge);

                      var gaugeOptions = {min: 0, max: 60, redFrom: 0, redTo: 20, yellowFrom: 20, yellowTo: 30,

                        greenFrom: 30, greenTo: 60, minorTicks: 10};

                      var gauge;

                   

                      function drawGauge() {

                        gaugeData = new google.visualization.DataTable();

                        gaugeData.addColumn('number', 'Margin%');

                             gaugeData.addRows(2);

                        gaugeData.setCell(0, 0, " & Round((browsers byrep::ProfitMarginMonth)*100;1) &

                   

                  " ) ;

                      

                        gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));

                        gauge.draw(gaugeData, gaugeOptions);

                      }

                   

                      function changeTemp(dir) {

                        gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);

                        gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);

                        gauge.draw(gaugeData, gaugeOptions);

                      }

                    </script>

                  </head>

                  <body>

                    <div id=\"gauge_div\" style=\"width:280px; height:280px;\"></div>

                   

                  </body>

                  </html>"

                  2 of 2 people found this helpful
                  • 6. Re: Webviewer - Google Graphs - blank result
                    pvhaute

                    Hi Johan,

                    i'm using Firefox 45.4.0

                    • 7. Re: Webviewer - Google Graphs - blank result
                      Johan Hedman

                      FileMaker do not support Firefox as standard web browser. That might be your problem

                      1 of 2 people found this helpful
                      • 8. Re: Webviewer - Google Graphs - blank result
                        pvhaute

                        Thank you Mark ...

                        this works!!

                         

                        now isn't that strange

                         

                        i seem to remember having seen your code on the google-chart-dev pages as well, but in a section that was for more advanced users

                         

                        i unfortunately don't know much about HTML ... does anybody see where the difference is between the original version and this (more 'complicated'?!) version?  (i want to be able to replicate this for other chart-types)

                         

                        many thanks for all your help here,

                        Piet

                        • 9. Re: Webviewer - Google Graphs - blank result
                          Mike Duncan

                          The difference is that you need the doctype definition in Windows. IE engine is more picky about this. It should come at the top of the document, not after the opening <html> tag. Like:

                           

                          <!DOCTYPE html>

                          <html>

                          ...

                          2 of 2 people found this helpful
                          • 10. Re: Webviewer - Google Graphs - blank result
                            BeatriceBeaubien

                            Hi pvhaute,

                             

                            As a side issue, the browser you generally use is not associated with the webviewer. The FileMaker Webviewer uses the computer's webkit.

                             

                            Please see the short message thread. The need to articulate this comes up pretty frequently.

                            https://community.filemaker.com/thread/72211

                             

                            Best wishes,

                             

                            Beatrice

                            • 11. Re: Webviewer - Google Graphs - blank result
                              user19752

                              <meta> is the key, web viewer runs as IE9 emulation on default installation of FM.

                              1 of 1 people found this helpful
                              • 12. Re: Webviewer - Google Graphs - blank result
                                pvhaute

                                Hi,

                                Copying and modifying Mark's example code for the Gauge-chart did the trick.  i replicated it multiple times.

                                 

                                You will not believe it, but now i have an issue with a simple ComboChart (bar+line) ...

                                same story: webviewer loads something, but then returns a blank viewer ... pasting the below html in a code editor however shows the graph correctly (webbrowser: Firefox 45.4.0).

                                 

                                Can again somebody help me out?

                                 

                                "data:text/html," & "

                                <!DOCTYPE html><html>

                                <head><meta http-equiv=\"x-ua-compatible\" content=\"IE=11\">

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

                                  <script type=\"text/javascript\">

                                 

                                    google.charts.load('current', {'packages':['corechart']});

                                    google.charts.setOnLoadCallback(drawChart);

                                 

                                function drawChart() {

                                   var data = google.visualization.arrayToDataTable([

                                      ['Quarter', 'Won', 'Commit', 'Upside', 'Target'],

                                      ['FY17Q1',  0.9,      0.39, 0.1,1],

                                      ['FY17Q2',  1,      0.4,0,1],

                                      ['FY17Q3',  1.17,      0.44,0.2,1],

                                      ['FY17Q4',  1.25,       0.48,0.05,1]

                                      ]);

                                 

                                   var options = {

                                      title: 'Pipeline spread (m$)',

                                      seriesType: 'bars',

                                      isStacked:true,     

                                      series: {3: {type: 'line'}}

                                   }; 

                                 

                                   var chart = new google.visualization.ComboChart(document.getElementById('combo_div'));

                                   chart.draw(data, options);

                                }

                                  </script>

                                </head>

                                <body>

                                  <div id=\"combo_div\" style=\"width:240px; height:140px;\"></div>

                                </body>

                                </html>"

                                • 13. Re: Webviewer - Google Graphs - blank result
                                  markpelleymounter

                                  Something strange is happening with your pc.

                                   

                                  It works perfectly on mine (I have enlarged the body width and height), but even before doing that it drew perfectly.

                                   

                                  Capture.JPG

                                  • 14. Re: Webviewer - Google Graphs - blank result
                                    pvhaute

                                    Thank you Mark,

                                    it still doesn't work on my PC (Win - and i tried with both Firefox and IE).

                                     

                                    Do you happen to have another example of a google-combo-chart of which you can post the code here?

                                     

                                    Many thanks in advance,

                                    piet

                                    1 2 Previous Next