Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

For a more expansive guide on integrating Google Charts, please consult their own documentation here: https://developers.google.com/chart/interactive/docs/php_example

 

 

Code Block
languagejs
titleIntegrating with 3rd party services
linenumberstrue
//The first line sends a request to google for the script
$.getScript("https://www.google.com/jsapi", function(){
// In this line you can specify the table you want to use by entering the ID
  $.get('/api/case/' + caseid + '/data?getValues=casetable.2439', function( response ) {
// This line loads the visualization API and the Bar Chart package
    google.load('visualization', '1.1', { 'callback': '"qwe".substr(0,1)', 'packages': ['bar'] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
// This section of code specifies the columns and rows of the chart 
      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);
        }
      }
// This section allows you to set the dimensions of the chart as well as a title and subtitle
      var options = {
          width: $('#scriptingTarget').width(),
          height: 250,
          chart: {
          title: tableGroupName,
          subtitle: 'Example Graph',
        },
      };
// This code creates a "Show/Hide Graphic" option, allowing users to toggle the table.
      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

 

Image Removed

 

Graph

 

Image Removed

 

Table data

 

Image Added

 

Here is the data for the table as it is presented in the system

 

Graph

 

Image Added

 

This is the resulting graph created by integrating Google Charts with AgileCase.