> For the complete documentation index, see [llms.txt](https://docs.agilecase.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.agilecase.com/developer-documentation/case-scripting/on-load-scripts/integrating-with-3rd-party-services.md).

# Integrating with 3rd party services

This example shows how to integrate 3rd party services, in this case Google Charts, into your system.

The script featured here can be copied into 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>

```javascript
//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 into your system.

## Table Data

<figure><img src="/files/x6h4o3rsOvbFB2j0kqtY" alt=""><figcaption></figcaption></figure>

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

## Graph

<figure><img src="/files/K20tFuvMukL7tgPF01nP" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.agilecase.com/developer-documentation/case-scripting/on-load-scripts/integrating-with-3rd-party-services.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.