|
 Pie Chart - Jacascript MouseOver |
| Posted by John Nelson on Feb-12-2018 23:03 |
|
I am trying to setup a pie chart that will have the javascript mouse over feature that you provide in the 'javascript clickable chart' in the sample code war file.
I have this source code below but I cannot seem to get the values for field0, field1, etc....
The labels array is a paramter that is passed in an created before the call to make this chart...
PieChart c = new PieChart(500, 300);
String showText = "";
double[] data = {40.0, 50.0, 60.0, 70.0, 80.0 }
c.setPieSize(135, 140, 110);
c.addLegend(310, 40);
c.setLabelStyle("", 8, Chart.Transparent);
double[] data1 = data.clone();
c.addExtraField(data1);
showText = "onmouseover='showPieInfo("{label}", "{field0|2,.-$}", "{field1|2,.-$}", "{field2|2,.-$}", "{field3|2,.-$}", "{field4|2,.-$}");' ";
c.setLabelFormat("<*font=Arial Bold, size=12*>{value}");
// Set the pie data and the pie labels
c.setData(data, labels);
// Use rounded edge shading, with a 1 pixel white (FFFFFF) border
c.setSectorStyle(Chart.RoundedEdgeShading, 0xffffff, 1);
c.setColors2(Chart.DataColor, colors);
c.getHTMLImageMap("", "", showText ))
And here is the javascript in the jsp...
function showPieInfo(year, red, yellow, green, other, reserve) {
var obj;
if (document.getElementById)
//IE 5.x or NS 6.x or above
obj = document.getElementById('detailInfo');
else
//IE 4.x
obj = document.all['detailInfo'];
if (!year)
{
obj.style.visibility = "hidden";
return;
}
var content = "<table border='1' cellpadding='3' style='font-size:10pt; " +
"font-family:verdana;' width='480'>";
content += "<tr><td><b>Occurrence </b></td><td>" + red + "</td></tr>";
content += "<tr><td><b>Mitigation </b></td><td>" + yellow + "</td></tr>";
content += "<tr><td><b>Opportunity </b></td><td>" + green + "</td></tr>";
content += "<tr><td><b>Contingency </b></td><td>" + other + "</td></tr>";
content += "<tr><td><b>Management </b></td><td>" + reserve + "</td></tr>";
content += "</table>";
obj.innerHTML = content;
obj.style.visibility = "visible";
}
When I run this I get the mouse over popup with the '{value}' comng in as {filed0} and all the other strings come across as 'field1, field2, etc.
Any help getting the correct values to be passed to the javascript function? |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by Peter Kwan on Feb-13-2018 00:37 |
|
Hi John,
The field0 refers to the first extra field array. The field1 refers to the second extra field array, and so on.
Since you code only have one extra field array (as it calls addExtraField only one time), so field1, field2, .... are undefined. Only field0 is defined.
The extra field you use is the same the data. (data1 is just a clone of the data.) So the {field0} is the same as the data {value}.
For testing, you may try:
double[] data1 = {111, 222, 333, 444, 555};
double[] data2 = {1, 2, 3, 4, 5};
double[] data3 = {55, 66, 77, 88, 99};
c.addExtraField(data1);
c.addExtraField(data2);
c.addExtraField(data3);
Now your onmouseover should display field0, field1 and field2 with the data coming from data1, data2 and data3.
Hope this can help.
Regards
Peter Kwan |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by John Nelson on Feb-13-2018 01:23 |
|
Ok I think I understand where you are coming from. I'm still not sure how to accomplish what I want.
Which is a pie chart with 5 sections - each with it's own value and color.
Then in the javascript popup I want to see all five of those same values displayed.
That is why I used the same data in the 'data' and 'data1' array.
I have this problem solved for a bar chart where each bar has five different values and take for example the first bar has all of the values in the five arrays.
But for the pie chart I only have one array of 5 values.
Make sense? |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by John Nelson on Feb-13-2018 01:37 |
|
So I got it to work doing this...
double[] data1 = {data[0], data[0], data[0], data[0], data[0]};
double[] data2 = {data[1], data[1], data[1], data[1], data[1]};
double[] data3 = {data[2], data[2], data[2], data[2], data[2]};
double[] data4 = {data[3], data[3], data[3], data[3], data[3]};
double[] data5 = {data[4], data[4], data[4], data[4], data[4]};
c.addExtraField(data1);
c.addExtraField(data2);
c.addExtraField(data3);
c.addExtraField(data4);
c.addExtraField(data5);
String showText = "onmouseover='showPieInfo("{label}", "{field0|2,.-$}", "{field1|2,.-$}", "{field2|2,.-$}", "{field3|2,.-$}", "{field4|2,.-$}");' ";
c.getHTMLImageMap("", "", showText); |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by John Nelson on Feb-13-2018 01:47 |
|
but - I still have a question. And that is I also create a pie chart with that same data array - but I show it with the percent.
So the pie chart does indeed show the percent as well as the tool tip flyover...
Percent = {percent|2}%
String toolTip = "title='{dataSetName} " + "Percent = {percent|2}%";
c.getHTMLImageMap("", "", showText + toolTip)
But now i need the javascriptopup box to show the percentages as well.
Do I need to create those values myself or will chart director handle that? |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by Peter Kwan on Feb-13-2018 03:38 |
|
Hi John,
For displaying the percentage, do you mean you want to display the value and percentage of all sectors, regardless of which sector the mouse cursor is over?
If this is the case, the percentage displays can also be regarded as constant of the chart as they do not change. Unluckily, ChartDirector does not provide an API to obtain the percentage, but I think they can be computed very easily with code. Once computed, you can add them to the tooltip like in my last message.
Hope this can help.
Regards
Peter Kwan |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by Peter Kwan on Feb-13-2018 03:32 |
|
Hi John,
The extra fields are useful if your field is different for every sector. If all sectors have the same extra value, then it is just a "constant" of the chart, and there is no need to use any field at all.
For example, consider the code:
var content = "<table border='1' cellpadding='3' style='font-size:10pt; " +
"font-family:verdana;' width='480'>";
content += "<tr><td><b>Occurrence </b></td><td>" + red + "</td></tr>";
content += "<tr><td><b>Mitigation </b></td><td>" + yellow + "</td></tr>";
content += "<tr><td><b>Opportunity </b></td><td>" + green + "</td></tr>";
content += "<tr><td><b>Contingency </b></td><td>" + other + "</td></tr>";
content += "<tr><td><b>Management </b></td><td>" + reserve + "</td></tr>";
content += "</table>";
You can see the text "Occurrance", "Mitigation", etc.. They are "constant" of the chart (that is, not depending on the sector) and so the code just put them there. If the texts are different for every sector, then they need to use extra fields.
For your case, an example is like:
var content = "<table border='1' cellpadding='3' style='font-size:10pt; " +
"font-family:verdana;' width='480'>";
content += "<tr><td><b>Occurrence </b></td><td>" + <%=data[0]%> + "</td></tr>";
content += "<tr><td><b>Mitigation </b></td><td>" + <%=data[1]%>+ "</td></tr>";
content += "<tr><td><b>Opportunity </b></td><td>" + <%=data[2]%>+ "</td></tr>";
content += "<tr><td><b>Contingency </b></td><td>" + <%=data[3]%> + "</td></tr>";
content += "<tr><td><b>Management </b></td><td>" + <%=data[4]%>+ "</td></tr>";
content += "</table>";
If you would like to pass the data values as parameters, you can just directly add them to the Javascript, like:
showText = "onmouseover='showPieInfo(\"{label}\", " + data[0] + ", " + data[1] + ", " + data[2] + ", " + data[3] + ", " + data[4] + ");' ";
Hope this can help. |
| Re: Pie Chart - Jacascript MouseOver |
| Posted by John Nelson on Feb-13-2018 04:29 |
|
Here is what I got to work for percentages - the actual data usese the same principal...
double total = data[0]+data[1]+data[2]+data[3]+data[4];
double[] data1 = {data[0]/total*100, data[0]/total*100, data[0]/total*100, data[0]/total*100, data[0]/total*100};
double[] data2 = {data[1]/total*100, data[1]/total*100, data[1]/total*100, data[1]/total*100, data[1]/total*100};
double[] data3 = {data[2]/total*100, data[2]/total*100, data[2]/total*100, data[2]/total*100, data[2]/total*100};
double[] data4 = {data[3]/total*100, data[3]/total*100, data[3]/total*100, data[3]/total*100, data[3]/total*100};
double[] data5 = {data[4]/total*100, data[4]/total*100, data[4]/total*100, data[4]/total*100, data[4]/total*100};
c.addExtraField(data1);
c.addExtraField(data2);
c.addExtraField(data3);
c.addExtraField(data4);
c.addExtraField(data5);
showText = "onmouseover='showPieInfo("{label}", "{field0|2}%", "{field1|2}%", "{field2|2}%", "{field3|2}%", "{field4|2}%");' ";
hideText = "onmouseout='showPieInfo(null);' ";
// toolTip = "title='{dataSetName} " + representation + "'";
toolTip = "title='{label} Total = {value|2,.-$}, {label} Percent = {percent|2}%'";
c.getHTMLImageMap("", "", showText + hideText + toolTip |
|
Forum Home
Search
Message List
Post Message