I currently have a working jira add-on that displays ticket metadata using a soy template. I am trying to incorporate an interactive d3.js chart into this but cannot find a way that works. When adding the d3 code straight into the template within script tags, i can successfully render d3 objects on the dashboard. however, i get errors when trying to access and use my soy params eg $array within my js code. I can access and display these params within the template and outwith the script tags without issue though.
this code shows a working template that displays d3 objects within js code within the template, and my ticket metadata outside of the js code.
{template .Chart}<div id = "container"><script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js'></script><div class = "svg"></div> //correctly renders metadata {foreach $issue in $issues}<H2>Hello {$issue.key}</H2> {/foreach}<script type='text/javascript'> var title = svg.append("text") .text("Chart Title") .attr("x", w/2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("fill", "#009FFC"); // more working d3 code</script></div>{/template}also for reference the template is called using this line in my dashboard-item.js file
$element.append(Dashboard.Item.Tutorial.Templates.Chart({issues: self.issues}));i have tried using |escapeJs to access the params from within the <script section but haven't been able to get this to work.
i have also tried to link to the d3 code from an external js file, but i haven't managed to get this to work either.
any help here would be massively appreciated, tia! :)