Last updated Dec 8, 2017

Adding a chart to the issue navigator

This page is part of the Gadget Developers' JavaScript Cookbook.

How do I add my chart to the issue navigator view?

Place the gadget in the 'JIRA' and 'Charts' categories, include two userprefs and change the gadget configuration field:

  1. Place the gadget in both categories: 'JIRA' and 'Charts':

    <Optional feature="gadget-directory">
        <Param name="categories">
  2. Include the following two UserPrefs:

    <UserPref name="isPopup" datatype="hidden" default_value="false"/>
    <UserPref name="projectOrFilterId" datatype="hidden" />
  3. Dynamically change the Configuration field for your gadget's Configuration form:

    config: {
        descriptor: function ()
            var gadget = this;
            var filterField ;
            if (/^jql-/.test(gadget.getPref("projectOrFilterId")) || gadget.getPref("isPopup") === "true"){
                // JQL has been passed in and we should place this in a hidden field
                filterField =
                    userpref: "projectOrFilterId",
                    type: "hidden",
                    value: gadgets.util.unescapeString(gadget.getPref("projectOrFilterId"))
            } else{
                // Lets display the filter picker
                filterField = AJS.gadget.fields.filterPicker(gadget, "projectOrFilterId");
            return  {
                action: "/rest/gadget/1.0/chart/validate",
                theme : "top-label",
                fields: [
                    { other field }

    The popup sets the 'projectOrFilterId' UserPref to the value jql-<JQL-string>. You do not want to display the filter picker.

  4. Your resource should accept the UserPref projectOrFilterId and be able to deal with values of both formats: filter-<filterId> and jql-<JQL-string>.

Refer to the PieChart Gadget for an example of this functionality.

Gadget Developers' JavaScript Cookbook

Using the Atlassian Gadgets JavaScript Framework

Rate this page: