ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  gauge chart with very small values in decimal
Posted by Massimo Brillante on Feb-08-2017 21:56
| Reply | Monitor
Hi,

at the moment I have a gauge chart using the code below based on a scale of values from 1 to 10. Now I have been asked to use a range of values as follow:

• Low = <=0.33
• Medium between 0.34 and 0.66
• High = >0.67

As I am a real donkey in mathematics I cannot figure it out the values for
m.setScale and smoothColorScale.

Would you be so kind to help me? Otherwise with a trial and error approach I will end up mad.


#######################chart code below
// Centrer at (150, 150), scale radius = 124 pixels, scale angle -90 to +90 degrees
                m.setMeter(170, 170, 120, -90, 90);

                // Add a pale grey (0xeeeeee) scale background of 148 pixels radius, with a 10 pixel thick light
                // grey (0xcccccc) border
                m.addScaleBackground(148, Chart.Transparent, 6, 0x000000);

                // Meter scale is 0 - 10, with major tick every 20 units, minor tick every 10 units, and micro
                // tick every 1 units
                m.setScale(0, 10, 1, 5, 1);

                // Set the scale label style to 15pt Arial Italic. Set the major/minor/micro tick lengths to
                // 16/16/10 pixels pointing inwards, and their widths to 2/1/1 pixels.
                m.setLabelStyle("Verdana Italic", 16);
                m.setTickLength(-16, -16, -10);
                m.setLineWidth(0, 2, 1, 1);

                // Demonstrate different types of colour scales and putting them at different positions
                double[] smoothColorScale = { 0, 0x3366ff, 3, 0x02472e, 6, 0xefef51, 7, 0xf79400, 10, 0xff0000 };

                // Add the smooth colour scale starting at radius 124 with zero width and ending at radius
                // 124 with 16 pixels inner width
                m.addColorScale(smoothColorScale, 120, 0, 120, -18);
                // Add a red (0xff0000) pointer
                m.addPointer2(DataValue, 0xff0000);

                // Output the chart
                GaugeImg = m.makeWebImage(Chart.PNG);

  Re: gauge chart with very small values in decimal
Posted by Massimo Brillante on Feb-08-2017 22:25
| Reply | Monitor
Attachments:
Actually I managed to do the math (I was lucky at the third trial and error attempt :-) )

my problem now is that rather than numbers, in the gauge I need to show
"low", "medium" , "High"

I got near the result (see screenshot and code) but as you can see there is something weird in the gauge
gauge.png
GaugeCode
GaugeCode
2.16 Kb

  Re: gauge chart with very small values in decimal
Posted by Peter Kwan on Feb-08-2017 23:11
| Reply | Monitor
Hi Massimo,

The meter scale is set to 0 - 0.6. However, your color scale is set to 0 - 0.67. So the color scale exceeds the meter scale. The solve the problem, please replace the 0.67 in the "smoothColorScale" array to 0.6.

Hope this can help.

Regards
Peter Kwan

  Re: gauge chart with very small values in decimal
Posted by Massimo Brillante on Feb-08-2017 23:13
| Reply | Monitor
Thanks Peter, I figured this out myself.

Your patience is always great.

  Re: gauge chart with very small values in decimal
Posted by Massimo Brillante on Feb-08-2017 23:12
| Reply | Monitor
Attachments:
I managed to get a fair result; there is any chances to get low medium and high outside the gauge? around the arch or should I use a legend?
GaugeCode
GaugeCode
2.16 Kb

  Re: gauge chart with very small values in decimal
Posted by Massimo Brillante on Feb-08-2017 23:41
| Reply | Monitor
Attachments:
I decided to go ahead with a legend and I added the code below

LegendBox legendBox = m.addLegend(500, 10, false, "Verdana Bold", 9);
legendBox.setHeight(30);
legendBox.setAlignment(Chart.Bottom);
legendBox.setBackground(0xe8f0f8, 0x445566);
legendBox.setRoundedCorners(5);

however the legend does not show up; also as I do not have a dataset but just one value, how do I set the legend colours and text?

I am aiming to have a leged just below the chart; my plan B would be to get the same result with CSS and hard-coded values.
gauge.png

  Re: gauge chart with very small values in decimal
Posted by Peter Kwan on Feb-09-2017 03:54
| Reply | Monitor
Hi Massimo,

You can set the labels on the external side of the scale by using BaseMeter.setLabelPos. If you configure a large enough offset using BaseMeter.setLabelPos, the label would be outside the meter boundary. An example is:

//Please adjust the parameters to fit your meter layout
m.setLabelPos(false, 5);

For the legend box, from your code, the bottom center point of the legend box is at (500, 10). It is likely not to be at the bottom of your meter, and possibly outside the meter image itself, so nothing will be visible. If you would like to use the legend box, you would need to make the meter canvas larger (instead of using 350 x 230, try 350 x 300). You can then put the legend box under the meter, like:

// The top center of the legend box is at (170, 190), which is a point under the meter.
// So the top of the legend box is positioned under the meter.
LegendBox legendBox = m.addLegend(170, 190, false, "Verdana Bold", 9);
legendBox.setAlignment(Chart.Top);
legendBox.setBackground(0xe8f0f8, 0x445566);
legendBox.setRoundedCorners(5);

Then you can add the legend key you want:

legendBox.addKey("ABC", 0xff0000);
legendBox.addKey("DEF", 0x00ff00);
....

Hope this can help.

Regards
Peter Kwan