13 Replies Latest reply on Oct 2, 2014 5:24 AM by beverly

    Using a Text Field in the Web Viewer

    ariley

      I have no problem using code from Google Charts with dummy data and the chart works.

       

      I replace the dummy data part with a global variable and the data loads in the chart properly.

       

      I am trying to use a field in the table the chart is laying on. That cripples the whole thing and nothing loads.

       

      Then even if I put my global variable back nothing loads, until I copy and paste the working code in again and change it to a variable.

       

      This is mind boggling. I even wrapped the field  in GetAsCSS(). The field is on the layout and shows the data (set from a script).

       

      Interestingly the variable works like a charm.

       

      Also GetAsCSS (CHARTING::Result_Case_Type) gives me the HTML formatted version of the field in DataViewer.

       

      This is the code:

       

       

      "data:text/html," & "

       

       

      <html>

        <head>

          <!--Load the AJAX API-->

          <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>

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

       

       

            // Load the Visualization API and the piechart package.

            google.load('visualization', '1.0', {'packages':['corechart']});

       

       

            // Set a callback to run when the Google Visualization API is loaded.

            google.setOnLoadCallback(drawChart);

       

       

            // Callback that creates and populates a data table,

            // instantiates the pie chart, passes in the data and

            // draws it.

            function drawChart() {

       

       

              // Create the data table

              var data = new google.visualization.DataTable();

              data.addColumn('string', 'Months');

              //data.addColumn('number', 'Total');

              data.addColumn('number', 'General Liability');

              data.addColumn('number', 'Auto');

              data.addColumn('number', 'Workers Compensation');

              data.addColumn('number', 'Other');"

      & ¶ &

      GetAsCSS (CHARTING::Result_Case_Type)

      & ¶ &

       

       

      "// Set chart view

              var view = new google.visualization.DataView(data);

              view.setColumns([0, 1,

                             { calc: \"stringify\",

                               sourceColumn: 1,

                               type: \"string\",

                               role: \"annotation\" },

                             2]);

          

              // Set chart options

              var options = {'title':'Cases by Month and Type',

              bar: {groupWidth: \"85%\"},

              //isStacked: true,

      hAxis:{ slantedText:true, slantedTextAngle:45 },

                             'width':840,

                             'height':480};

       

       

       

       

              // Instantiate and draw our chart, passing in some options.

              var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

              chart.draw(data, options);

            }

          </script>

        </head>

       

       

        <body>

          <!--Div that will hold the pie chart-->

          <div id=\"chart_div\"></div>

        </body>

      </html>"

       

        • 1. Re: Using a Text Field in the Web Viewer
          Mike Duncan

          Many times I will use the data viewer to get the output of the calculation, copy it to a text file on the desktop and load it in a web browser to use it's web tools to troubleshoot. Even inspecting the output in a text editor can allow you to see where it might be failing. For example, are there any line breaks in the output of your field that might cause the javascript to stop processing?

          • 2. Re: Using a Text Field in the Web Viewer
            ariley

            Well, the original text had FileMaker line breaks on the variable. Looks fine, works fine.

             

            I dump the same thing into a field, no go.

             

            I check the data viewer (that's where I start nornally) and without the GetAsCSS it looks just like the variable. With the GetAsCSS it gets
            for line break.

             

            Best regards,

            Agnes Riley

            www.zerobluetech.com

            877 917-9079

             

            Sent from my iPhone

            • 3. Re: Using a Text Field in the Web Viewer
              erolst

              Not sure this has anything to do with your issue, but why are you mixing double and single quotes?

              Agnes Riley wrote:

              This is the code:

              "data:text/html," & "

              […]

              var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

              […]

                  <div id=\"chart_div\"></div>

               

              I think you could consistently use single quotes throughout the HTML and JS code – which is also easier to write.

              1 of 1 people found this helpful
              • 4. Re: Using a Text Field in the Web Viewer
                ariley

                No problem. I can do that. But does that solve my problem with te field vs. the variable?

                 

                Best regards,

                Agnes Riley

                www.zerobluetech.com

                877 917-9079

                 

                Sent from my iPhone

                • 5. Re: Using a Text Field in the Web Viewer
                  steve_ssh

                  Hi Agnes,

                   

                  I am fairly certain that you do not want to wrap the field in the GetAsCss function.

                   

                  What you have above looks right to me (but without the GetAsCss).

                   

                  My guess is that the field has got wrong data in it - either the data is missing due to a context error, or some small detail in the data.

                   

                  Mike's suggestion of doing a comparison in the data viewer seems like the fastest way to find the source of the problem, i.e. see exactly what is being sent to the webviewer under the two different scenarios: source via the calc with the field verus with the var.   I expect there will be some difference you'll see, albeit possibly small.

                   

                  HTH &amp; good luck/best,

                   

                  -steve

                  • 6. Re: Using a Text Field in the Web Viewer
                    ariley

                    Thank you. They look identical. But I'll compare them with a software when I get home.

                     

                    I used the variable to set the field.

                     

                    Best regards,

                    Agnes Riley

                    www.zerobluetech.com

                    877 917-9079

                     

                    Sent from my iPhone

                    • 7. Re: Using a Text Field in the Web Viewer
                      ariley

                      Single quote didn't make a difference.

                       

                      So here is a screenshot from the two text sources, left from the variable, right from the field: http://cloud.zerobluetech.com/image/1r3n141h063V

                      • 8. Re: Using a Text Field in the Web Viewer
                        beverly

                        FYI: single quotes are just for CONVENIENCE when typing HTML. No need to use the escape-double-quote ( \” ) when needing a quote inside a quoted text if you use single quotes. HTML doesn’t care whether you use double or single quote (or even none sometimes!) around element attributes. It should not have made any difference. Just as no-returns-or-indents-needed in HTML between tags/elements:

                         

                        ...

                        is exactly the same to browsers as:




                        MY Title

                         

                        There are likely other issues with your text, but I can’t determine what.

                         

                        I tend to like to put HTML inside fields ( push to variables ) and then use the parts in the web viewer:

                         

                             “data:text/html,” & $start_code & $mydata & $endcode

                         

                        That way I can type double quotes in the fields, test in data viewer, test in browser, etc.

                         

                        Beverly

                        • 9. Re: Using a Text Field in the Web Viewer
                          Datagrace

                          Agi, I'm confused by the screenshot. The second-to-bottom rows are not the same. The left side has the number 84 after 'August' and the right side has 85. This obviously shouldn't be a factor in your problem, but if these are supposed to be the same data living in different places, I wonder how they parted ways. Or am I misunderstanding thier source?

                           

                          As a side note, I don't think mixing single and double quotes will cause problems, so long as you don't close an individual brace differently than how you opened it.

                           

                          Otherwise, I'm also stumped.

                          • 10. Re: Using a Text Field in the Web Viewer
                            ariley

                            Maybe I generated one a tad later and the data changed in the meantime. As you said that can't be the problem.

                             

                            So Bev, you are using variables in your example. As I said Onhave no problem with using variables. The problem is when I want to store the data from the variable in a text field and show the field in the webviewer. And the reason is because I'm sending the HTML chart as a snapshot link.

                             

                            For now I just set the global variable when I open the DB from the field. So that solves the problem but it's not elegant.

                             

                            Best regards,

                            Agnes Riley

                            www.zerobluetech.com

                            877 917-9079

                             

                            Sent from my iPhone

                            • 11. Re: Using a Text Field in the Web Viewer
                              user19752

                              The rest is that your layout source is not CHARTING table, check 'Show records from:' property in 'Layout Setup' dialogue.

                              • 12. Re: Using a Text Field in the Web Viewer
                                Mike Duncan

                                I suspect it is a context issue, but you don't necessarilly need to change the context of the layout, just make the data accessible from that context.

                                 

                                If you go to your web viewer's calc, copy everything in there, then go to your data viewer and create a custom variable and paste everything in there, see the html that generated as a result. It is usually easier to copy everything in the result and paste it into a text editor or an IDE like netbeans or eclipse that will immediately show you if there are obvious errors in html or javascript.

                                • 13. Re: Using a Text Field in the Web Viewer
                                  beverly

                                  yes, Agnes, I put it in a field first, so you could call the field directly.

                                   

                                  you can even concatenate the result to get the full “html”.

                                   

                                  The field usage allows for using double-quotes in HTML attributes without the need for escaping or using single quotes. This is handy where I need to use the same “text/html” in more than just this manner. I can edit in my favorite HTML editor (BBEdit) and paste into the field.

                                   

                                  The separation of the ‘bits’ allows for field content to appear in the final concatenation. The method of using placeholder and substituting in FMP is also effective, so that you aren’t separating your HTML. Use the comment ‘<!—- value goes here —>’ in the HTML editor and then let FMP substitute it with your field contents as needed for Web Viewer.

                                   

                                  Beverly

                                   

                                  p.s. I wish I could figure out how to integrate FMP and BBEdit without copy/paste, but since I use BBE for calcs and all sorts of things for FMP, I’m good with it as/is! I bet there are AS ways, but I don’t have the time to work them out.