|
 Clickable Meter Chart |
| Posted by Abhishek Kumar on Jun-21-2006 20:49 |
|
I have a meter chart which i am able to display to the last possible customization but the clickable feature.Onn click of each zone i need to do something(alert or navigate to other page or show some data in the same page).This requirement is just an unfulfilled one.In the customized click section i found that the cordinates of the image where the clickable feature is to be added is calculated through image.getImageCoor() method but in this case the addZone() is not returning any object of which the coordinates can be calculated.
So need some help.please its urgent.
Regards,
Abhishek. |
| Re: Clickable Meter Chart |
| Posted by Peter Kwan on Jun-22-2006 03:37 |
|
Hi Abhishek,
The zones are not a clickable object in any ChartDirector charts. It is just considered as a way to color the chart or plot area background. Usually, only the data points (which will be drawn on top of the zones) are clickable. In a meter, typically, there is just one data point, so we can simply make the entire meter clickable by using an <A> tag, and no image map is needed.
However, if you need to have multiple clickable regions in a meter, you may create the image map yourself. Because a meter is a relatively static object (the axis are always manually scaled and independent of data, and the entire geometry of the meter is known in advance), it should be easy to create the image map.
If the meter zone are static, you may even consider to hard coded the image map. If the zones are dynamic, their positions should be computable by basic geometry. The exact method depends on the geometry of your meter (eg. whether it is circular, or linear horizontal or vertical, etc).
If you are not sure how to create an image map, it is just a standard HTML <AREA> tag. Some information may be available here http://www.w3schools.com/tags/tag_area.asp
If you need further help, it may be useful if you may include a copy of your meter, and I may suggest how to create the image map.
Regards
Peter Kwan |
| Re: Clickable Meter Chart |
| Posted by Abhishek Kumar on Jun-23-2006 13:41 |
|
Hi Peter,
Thanks for your reply.But i could not get one point in our whole explaination.You say that the each zone with different colors(suppose three zones bearing read blue and green colors) in a meter chart are not clickable but you say again that data point which are drawn on the top of these zones are clickable.Doesn't that mean that we can call three different methods for clicking the three different zones with three different colors. Might be this is not possible because there is only one dataset here which itself gets distributed in several zones as you said.Now please explain me in detail if different zones and their coordinates anyhow can be distinctly identified so that i can convert it to image map.I tried with getCoor() method but it dodnt work.Even if clickable is not possible then atleast if we can give the tool tip for each different zones displaying their values or percentage.
Thanks again 4 your reply but kindly please reply to this.
Thanks and Regards,
Abhishek |
| Re: Clickable Meter Chart |
| Posted by Peter Kwan on Jun-23-2006 13:49 |
|
Hi Abhishek,
Would you mind to post an image of your current meter?
The general suggestion is to write the <AREA> tags for the zones just like writing standard HTML.
For more specific suggestion, because there are many meter styles in ChartDirector, it is hard to come up with more details without seeing the meter you are using. It would be useful if I can see a sample of the meter.
Regards
Peter Kwan |
| Re: Clickable Meter Chart |
| Posted by Abhishek Kumar on Jun-23-2006 17:16 |
|
I am using the meter chart. I am sending the code with this reply as a reply.The method "getLostProdOverChart" in this code draws the meter chart.anyways i am adjoining that particular code:--
try {
System.out.println("Got the getLostProdOverChart() method...");
System.out.println("Parameter: " + actionMapping.getParameter());
// Call the data service class
ChartDataService service = new ChartDataService();
LostProdOverTimeData data = service.getLostProdOverTimeData(0, 0);
// The value to display on the meter
double value = data.getPaymentPercentage();
// Create an AngularMeter object of size 200 x 115 pixels
AngularMeter angularMeter = new AngularMeter(190, 160, Chart.BackgroundColor, Chart.Transparent, 0);
// Set the meter center at (100, 100), with radius 85 pixels, and span from -90 to +90 degress (semi-circle)
angularMeter.setMeter(95, 90, 60, -90, 90);
// Meter scale is 0 - 100, with major tick every 20 units, minor tick every 10 units, and micro tick every 5 units
angularMeter.setScale(0, 100, 20, 10, 5);
// Set the zone with green, yellow and red respectively
angularMeter.addZone(0, data.getLostTimePercentage(), 64, 75, 0xCC3333);
angularMeter.addZone(data.getLostTimePercentage(), data.getLostTimePercentage() + data.getProdTimePercentage(), 64, 75, 0x56A76F);
angularMeter.addZone(data.getLostTimePercentage() + data.getProdTimePercentage(), 100, 64, 75, 0xEECE51);
angularMeter.addText(75, 97, angularMeter.formatValue(value, "2"), "Verdana Bold", 8, 0x0).setBackground(0xFFFFFF, -1, 0);
angularMeter.addLegend(9,107, false, "Verdana", 7).setKeyBorder(10);
angularMeter.addLegend(9,107, false, "Verdana", 7).setKeySpacing(3);
angularMeter.addLegend(9,107, false, "Verdana", 7).addKey(10,"Lost",0xCC3333);
angularMeter.addLegend(9,107, false, "Verdana", 7).addKey(50,"Productive",0x56A76F);
angularMeter.addLegend(9,107, false, "Verdana", 7).addKey(100,"Overtime",0xEECE51);
angularMeter.addLegend(9,107, false, "Verdana", 7).setBackground(Chart.Transparent);
// Add a semi-transparent blue pointer with black border at the Specified value
angularMeter.addPointer(value, 0x40666699, 0x0);
angularMeter.setCap(8,0xFFFFFF);
//angularMeter.addRing(0,17,0x7D7DFF,0x000000);
// Clear the existing session variable
HttpSession session = request.getSession();
if(session.getAttribute("chartURL") != null) {
session.removeAttribute("chartURL");
System.out.println("Got the prev attribute .... and now it is removed.");
}
// Bind the angular meter object
request.setAttribute("AM", angularMeter);
} catch (Exception e) {
e.printStackTrace();
}
return actionMapping.findForward("success");
Hope this code can help you to help me.
here i have drawn three different zones with three different colors and obviously three different values.Now i want to show the value of each zone in tooltip and if possible navigate to some other chart or jsp for that matter.
Waiting in anticipation,
Thanks and Regards,
Abhishek.
|
| Re: Clickable Meter Chart |
| Posted by Abhishek Kumar on Jun-23-2006 17:23 |
|
| I understand that i need to find the coordinates of the area of each zone but my difficulty lies there itself.in other cases i am able to find the coodinates for drawing that area but in this case i am not able to find the coordinates of the area of different specific zones. if i can get this coordinates then i can easily use this for tooltip and navigations |
| Re: Clickable Meter Chart |
| Posted by Peter Kwan on Jun-24-2006 04:12 |
|
Hi Abhishek,
As the zone is a sector of a semi-circle, I think you may try to use standard coordinate geometry to get the coordinates of the sector. For example, for one zone, it is:
String mapForZone1 = "<area href='aaa.jsp' title='zone 1' shape='poly' coords='95,90";
for (double d = 0; d < data.getLostTimePercentage(); ++d) {
double angle = Math.PI - Math.PI * d / 100.0;
mapForZone1 += "," + ((int)(95 + Math.cos(angle) * 60)) + "," + ((int)(90 - Math.sin(angle) * 60));
}
mapForZone1 += "'>";
The same applies for other zones.
Hope this can help.
Regards
Peter Kwan |
| Re: Clickable Meter Chart |
| Posted by Abhishek Kumar on Jun-26-2006 18:27 |
|
Peter,
Thanx a lot.it works.though i am trying a bit more on that which i feel i will be able to do it.but the conclusion is it works.Now i am facing the same problem with the line meter i just want to give the title to the portion of the linear meter which has value.i tried the same thing with this but didnot work out. Here is the code.
public ActionForward getApprovedPercentageChart(ActionMapping actionMapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
try {
// Get the requested params
String deptName = request.getParameter("dept").trim();
String shiftId = request.getParameter("shift").trim();
String slotId = request.getParameter("slot").trim();
// Call the chart data service
ChartDataService service = new ChartDataService();
ApprovedData data = service.getApprovedPercentageData(slotId, deptName, shiftId);
// The value to display on the meter
double value = data.getApprovedPercentage();
// Create an LinearMeter object of size 250 x 75 pixels, using silver
// background with a 2 pixel black 3D depressed border.
LinearMeter linearMeter = new LinearMeter(625, 45, Chart.BackgroundColor, Chart.Transparent, 0);
// Set the scale region top-left corner at (15, 25), with size of 200 x
// 50 pixels. The scale labels are located on the top (implies
// horizontal
// meter)
linearMeter.setMeter(10, 14, 600, 7, Chart.TopCenter);
linearMeter.setRail(0x000000,1,0);
// Set meter scale from 0 - 100, with a tick every 10 units
linearMeter.setScale(0, 100, 20, 10, 5);
// Set 0 - 50 as green (99ff99) zone, 50 - 80 as yellow (ffff66) zone,
// and 80 - 100 as red (ffcccc) zone
linearMeter.addZone(0, value, 0xB47878);
// Add a blue (0000cc) pointer at the specified value
// linearMeter.addPointer(value, 0xcc);
// Add a label at bottom-left (10, 68) using Arial Bold/8 pts/red (c00000)
linearMeter.addText(330, 28, "Approved (% Complete)", "Verdana Bold", 8, 0x000000, Chart.Center);
// Clear the existing session variable
HttpSession session = request.getSession();
if(session.getAttribute("ApprovedChartUrl") != null) {
session.removeAttribute("ApprovedChartUrl");
}
//output the chart
request.setAttribute("ApprovedChart", linearMeter);
} catch (Exception e) {
e.printStackTrace();
}
System.out.println("Chart action for approved percentage executed==========");
return actionMapping.findForward("success");
}
waiting 4 ur help once again.
Thanks and Regards,
Abhishek. |
| Re: Clickable Meter Chart |
| Posted by Peter Kwan on Jun-27-2006 02:36 |
|
Hi Abhishek,
The linear meter shoud be much easier than the angular meter as it is rectangular, so the coordinates can be determined by linear interpolation. In your case, the image map is just:
String imageMap = "<area title='hello world' shape='rect' coords='10,14," + (10 + (int)(6 * value)) + "21'>";
Hope this can help.
Regards
Peter Kwan |
| Re: Clickable Meter Chart |
| Posted by Abhishek Kumar on Jun-28-2006 22:06 |
|
Peter,
Thanks for your answers though later even i was also able to do for the linear meter chart but one more question,can u tell me please on what basis u r calculating the coordinates in the case of meter chart. I need to know it because its getting a little bit wrong and misplaced and thus wrong tooltips in the wrong zones.If i can understand your multiplying and adding logic then probably i can solve it on my own.My code and your reply are in the earlier replies.I just copied and pasted it and it started working but the problem arose when we started testing it thoroughly.Like the tool tip for first zone continued till few portions of 2nd zone and similarly tool tip for third zone came inside fewer parts of 2nd zone and the starting point of the first zone and the ending point of the third zone were not showing any tool tip. So quite understandable the problem is with the coordinates of the area tag.So i will like to know why did we start with 95,90.If possible please make me understand your logic so that i can change it accordingly.One more problem was that no tool tip was coming on the circumference of the meter chart.It was coming till few pixels inside the edge of the circle or meter for that matter.So once again i feel its the same problem. So it becomes necessary for me to understand your logic for calculating the coordinates of area. So please help me...... with this.
Thanks and Regards,
Abhishek. |
| Re: Clickable Meter Chart |
| Posted by Peter Kwan on Jun-29-2006 01:09 |
|
Hi Abhishek,
For the image map for the circular meter, the (95, 90) are the center of the meter. The value 60 is the radius of the meter. (I obtain them by looking at your code.)
A sector is a region with one of the vertices being the center. So I start with the center. The perimeter of the meter is given by the formula in coordiante geometry:
x = cx + radius * cos(angle)
y = cy - radius * sin(angle)
The angle I use spans 180 degrees (from Math.PI to 9) because your meter is 180 degrees. I use "d / 100.0 " because your scale is from 0 - 100.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Abhishek Kumar)