Jira gadget with custom graph (bar chart) (JFreeChart vs HTML5)

Hans de Groot
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 22, 2013

I'm developping a custom gadget to create my own charts. The most implemented way I found so far is:

Create new rest pluging, in this plugin you draw your graph, using JFreeChart, to a png and provide that png as a link to your gadget.

I know some jira plugins use this way to create charts, ie the "Created vs. Resolved Chart". The image link is: http://[jira]/charts?filename=jfreechart-onetime-[randomNr].png.

But when I look at the "Agile Classic Hour Burndown Chart" (also by atlassian). This gadget does not load a simple png. But It looks like it is drawn drawn dynamically on a HTML5 canvas. Are there any examples available on this way of creating charts?

What are the differences between these two ways of creating charts? When should I use one or the other?

3 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
Answer accepted
Hans de Groot
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 21, 2013

What I did:

  1. Create rest api to create the chart server side using jfreechart.
  2. Create the gadget.xml, this will call the rest api and load the png.

The advantage is that you cal style the chart so it looks like the a normal jira chart. Including mouse overs and bar clicks.

Aarti June 1, 2015

Could you advise how you did no 1?

0 votes
Kannan S February 9, 2014

Hans & Paul pasler

I tried both but in vain

While flotcharts complains about the missing function be it either AJS.$.plot(placeholder,data,options) or $.plot(placeholder,data,options)

using a plain jfreechart method generates a file name with the extension .png but i cannot find the physical location of the image file. more over not sure whetehr the image is generated or not.

Robert Jahrling
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 8, 2014

To use Flot, include the Flot Javascript resource. Then you can use AJS.$.plot() in your gadget spec.

Don't forget to define a width and height for the "placeholder" element.

Johan Jonsson Nilsson August 16, 2017

Could anyone assist on how to import the Flot resource in the gadget.xml file? Have been trying to make a pie chart for some time now but can't get it to work.

0 votes
Paul Pasler
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
September 22, 2013

Hi Hans, I had a similar Problem.

Greenhopper (JIRA Agile) is using the jQuery Flot API (http://www.flotcharts.org), which is easily to use and style. (Be careful with stacked bar charts and have a look at flot-plugins)

In my opinion, you should use a javascript soluton, if you want any kind of user interaction (Hover, Click, Zoom, etc). Another advantage is, that you can outsource the render-work to the client.

Kannan S February 9, 2014

Hans & Paul pasler

I tried both but in vain

While flotcharts complains about the missing function be it either AJS.$.plot(placeholder,data,options) or $.plot(placeholder,data,options)

using a plain jfreechart method generates a file name with the extension .png but i cannot find the physical location of the image file. more over not sure whetehr the image is generated or not.

TAGS
AUG Leaders

Atlassian Community Events