Jump to content
We've recently updated our Privacy Statement, available here ×

Simple semi-circular gauge using highcharts


tom.beckman

Recommended Posts

Hello,

We are currently using Jasperserver Pro 5.2.0 with iReport

is it possible to make an HTML 5 type of guage with highcharts (see below)?  

 gauge1.jpg.b5e9034861c32f91d4b52419e5118ec2.jpg

After doing a bunch of research, it seems that the direction I need to be focused on involves using a pie chart with a few modifications (donut, and semi-circle).  I think I can massage the overall query that is returning the result value to give me two distinct numbers so I can sort of fake it.  For example, suppose the value returned is 80%...I can adjust the overall output to make sure I have a 20% as well, so that the chart will look like a gauge...sort of a duct-tape way of doing it seems...maybe someone has a better idea on how to accomplish decent looking gauges in this tool?

Back to the original approach tough:

I have been trying to get a HighCharts pie chart to show up as a semi-circle, but there is virtually no documentation on the Jasper implementation of HighCharts or any of the highcharts functions.  I have been able to manage a complete 360 degree donut, but cannot even simply adjust the angle of it from pointing dead-north.

For example, from their documentation, the dirction of the pie chart should be able to be adjusted by adding the entry for startAngle, while a semi-circle is defined by startAngle and endAngle (highlighted in yellow).  http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-semi-circle/

plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            }

However, it seems these attributes are not present in the jasperserver-pro tool?

Has anyone been able to make functional gauge-like visualizations in JasperServer?  I am avoiding the "WidgetsPro" due to their requirement of flash, along with their lack of "HTML 5" feel.  Unless there is some property in that component that I have missed that will actually use HTML5 and not flash?

Any help is greatly appreciated.

Link to comment
Share on other sites

  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...