Problem with embedding Google Charts with a Scriptrunner Custom Field

[flaimo]

I have created a custom field that outputs a google chart based on some data from the issue. This works so far, but there is a side effect, that I cannot browse issues anymore, as soon as an issue is selected that contains the chart. The UI looks deactivated (see screenshot).

I guess it has something to do with the javascript from google, but I don't know how to solve this. Any ideas?

Code:

import com.atlassian.jira.component.ComponentAccessor
import com.atlassian.jira.issue.search.SearchProvider
import com.atlassian.jira.jql.parser.JqlQueryParser
import com.atlassian.jira.web.bean.PagerFilter

def jqlQueryParser = ComponentAccessor.getComponent(JqlQueryParser)
def searchProvider = ComponentAccessor.getComponent(SearchProvider)
def issueManager = ComponentAccessor.getIssueManager()
def user = ComponentAccessor.getJiraAuthenticationContext().getLoggedInUser()

def counterToDo = 0
def counterInProgress = 0
def counterDone = 0
def currenIssueStatusCategoryName = ''
def returnstring = ''

/*
Stories directly under the initiative
*/
def queryString = "issueFunction in linkedIssuesOf('issue = " + issue.getKey() + "', 'derives') AND issuetype != Epic"
def query = jqlQueryParser.parseQuery(queryString)
def results = searchProvider.search(query, user, PagerFilter.getUnlimitedFilter())

results.getIssues().each {documentIssue ->
 currenIssueStatusCategoryName = documentIssue.getStatus().getStatusCategory().getName()
 if (currenIssueStatusCategoryName == "New") {
 counterToDo += 1
 } else if (currenIssueStatusCategoryName == "In Progress") {
 counterInProgress += 1
 } else if (currenIssueStatusCategoryName == "Complete") {
 counterDone += 1
 } // end if
} // end each

/*
Stories in epics
*/
queryString = "issueFunction in linkedIssuesOf('issue = " + issue.getKey() + "', 'derives') AND issuetype = Epic"
query = jqlQueryParser.parseQuery(queryString)
results = searchProvider.search(query, user, PagerFilter.getUnlimitedFilter())
def epicString = ''

if (results.total > 0) {
 results.getIssues().each {documentIssue ->
 epicString += documentIssue.getKey() + ','
 } // end each

 queryString = "issueFunction in issuesInEpics ('issuekey IN (" + epicString.substring(0, epicString.length() - 1) + ")')"
 query = jqlQueryParser.parseQuery(queryString)
 results = searchProvider.search(query, user, PagerFilter.getUnlimitedFilter())

 results.getIssues().each {documentIssue ->
 currenIssueStatusCategoryName = documentIssue.getStatus().getStatusCategory().getName()
 if (currenIssueStatusCategoryName == "New") {
 counterToDo += 1
 } else if (currenIssueStatusCategoryName == "In Progress") {
 counterInProgress += 1
 } else if (currenIssueStatusCategoryName == "Complete") {
 counterDone += 1
 } // end if
 } // end each
} // end if

if (counterToDo > 0 || counterInProgress > 0 || counterDone > 0) {
 returnstring = """<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script><div id='chart_div'></div>

 <script type='text/javascript'>
 google.charts.load('current', {packages: ['corechart', 'bar']});
 google.charts.setOnLoadCallback(drawBasic);

 function drawBasic() {

 var data = google.visualization.arrayToDataTable([
 ['Status Category', 'ToDo', { role: 'annotation' }, { role: 'style' }, 'In Progress', { role: 'annotation' }, { role: 'style' }, 'Done', { role: 'annotation' }, { role: 'style' }],
 ['Issues', ${Integer.toString(counterToDo)}, ${Integer.toString(counterToDo)}, '#396886', ${Integer.toString(counterInProgress)}, ${Integer.toString(counterInProgress)}, '#ffd144',${Integer.toString(counterDone)}, ${Integer.toString(counterDone)}, '#008e27']
 ]);

 var options = {
 width: '99%',
 height: 20,
 chartArea: {'width': '100%', 'height': '100%'},
 legend: { position: 'none' },
 bar: { groupWidth: '100%' },
 isStacked: 'relative',
 hAxis: { textPosition: 'none', direction: -1,format: 'percent' },
 vAxis: { textPosition: 'none' },
 annotations: {
 textStyle: {
 fontSize: 12,
 color: '#fff',
 opacity: 0.5
 }
 },
 backgroundColor: {
 fill: 'transparent'
 }
 };

 var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
 var c_div = document.getElementById('chart_div');


 chart.draw(data, options);
 } 


 </script>
 """
 return returnstring.replaceAll(/ /, '');
} // end if

[flaimo]

[Kamran Ansari]

@flaimo 

Hello,

Were you able to get past this issue? I'm running into it and was wondering how you fixed it.

Many thanks,

Kamran