AnsweredAssumed Answered

Using a Text Field in the Web Viewer

Question asked by ariley on Sep 29, 2014
Latest reply on Oct 2, 2014 by beverly

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>"

 

Outcomes