Integrating HTML/Javascript on mobileApp

Integrating HTML/Javascript on mobileApp

  

Hello,

I'm building a mobile app and try to integrate the following Javascript/HTML (google old chart API) into the App , so i can present Graphs that arnt available in Outsystems.

https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#radar-chart 

As i'm new will appreciate your guidance.

1. Had tried to use the HTML elements as well the javascript widget with no success 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>
Solution

First of all, all chart types are available, via the AdvancedFormat JSON. So if it's really just a different chart type that is available in Highcharts, but not standard in Mobile, there's no need to go the route of custom JavaScript.

However, if the Google Charts API has stuff you want to use that aren't in Highcharts, you can just add the JavaScript by including it as a script ("Required Scripts" property of a Screen, which selects from the Scripts you add (bottom item in the Interface tab tree)), or by using the JavaScript Statement:

which allows you to pass parameters. EDIT: one of the parameters can be the Id of the Container you put the chart in (pass it as ContainerName.Id, where ContainerName is the Name of the Container).

Solution