Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 3 Current »

 

This example will show you how to integrate 3rd party services, in this case Google Charts, in to your system.

The script featured here can be copied in to your system with your own field group specified in order to generate your own charts.

 

 

Integrating with 3rd party services
$.getScript("https://www.google.com/jsapi", function(){
  $.get('/api/case/' + caseid + '/data?getValues=casetable.2439', function( response ) {
    google.load('visualization', '1.1', { 'callback': '"qwe".substr(0,1)', 'packages': ['bar'] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var tableGroupName = response.data.customTables[0].name;
      var columnName1 = response.data.customTables[0].rows[0].items[0].name;
      var columnName2 = response.data.customTables[0].rows[0].items[1].name;
      var rowsCount = response.data.customTables[0].rows.length;
      var columnsCount = response.data.customTables[0].rows[0].items.length;
      var data = new google.visualization.DataTable();
      data.addColumn('string', columnName1);
      data.addColumn('number', columnName2);
      data.addRows(rowsCount);
      for (var i = 0; i < rowsCount; i++) {
        for (var j = 0; j < columnsCount; j++){
          var element = response.data.customTables[0].rows[i].items[j];
          data.setCell(i, j, element.value);
        }
      }
      var options = {
          width: $('#scriptingTarget').width(),
          height: 250,
          chart: {
          title: tableGroupName,
          subtitle: 'Example Graph',
        },
      };
      setTimeout(function(){
        $('#scriptingTarget').append('<a href="#" id="show-hide-graphic">Show / Hide graphic</a>');
        $('#scriptingTarget').append('<div id="graphic">');
        var chart = new google.charts.Bar(document.getElementById('graphic'));
        chart.draw(data, options);
      }, 200);
      $(document).on('click', '#show-hide-graphic', function(){
        $('#graphic').toggleClass('hide');
      });
    }
  });
});

 

The above script shows how to integrate Google Charts in to your system.

The first line

On the second line of code you can specify the table you wish to create a chart with by entering the ID of your custom field table.

The next section of code

The next section of code allows you to specify the dimensions of the table

The final section configures the option to toggle between showing and hiding the graphic 

Table data

 

 

Graph

 

 

 

  • No labels