Integrating with 3rd party services
$.getScript("https://www.google.com/jsapi", function(){ $.get('/api/case/' + caseid + '/data?getValues=casetable.10336', 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: 'Some info', }, }; 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'); }); } }); });