Pie Piece Labels – Displaying hints for each piece

Description

This chart contains a PieSeries with a label centered over each piece.

Source Code

1. <script type=”text/javascript”>
4.   //
5.   // Define the CSS in the header:
6.   // <style type=”text/css” media=”screen,print”>
7.   //     .PiePieceLabel { position: absolute; background-color: #fff; border: 1px solid #999; padding: 2px;
8.   //    opacity: 0.8; filter: Alpha(opacity:80); }
9.   // </style>
10.   //
12.   // Define variables to store references to the chart and series
13.   var myChart, mySeries = undefined;
15.   // After drawing is complete, create and/or reposition pie piece captions
16.   function doAfterDraw(chart) {
18.     // Verify series has been created
19.     if (mySeries != undefined) {
21.       var piePoints = mySeries.getPoints();
23.       // Loop through the list of pie series points
24.       for (var i = 0; i < piePoints.length; i++) {
26.         // We’re saving the reference to the div object in the point,
27.         // so check if it already exists
28.         if (piePoints[i].hintDiv == undefined) {
29.           // Create the div
30.           piePoints[i].hintDiv = document.createElement(“DIV”);
31.           piePoints[i].hintDiv.className = “PiePieceLabel”;
32.           piePoints[i].hintDiv.innerHTML = “<strong>” + piePoints[i].label + “</strong><br/>” + piePoints[i].x + ” of ” + mySeries.getTotalValue() +
33.             ” (” + (piePoints[i].x / mySeries.getTotalValue() * 100) + “%)”;
35.           document.getElementsByTagName(“body”)[0].appendChild(piePoints[i].hintDiv);
36.         }
38.         // Find the center of the piece
39.         var pointCoordinates = mySeries.findCenter(piePoints[i]);
41.         // Adjust the location of the div based on the piece center
42.         piePoints[i].hintDiv.style.left = pointCoordinates.x – Math.floor(piePoints[i].hintDiv.offsetWidth / 2) + “px”;
43.         piePoints[i].hintDiv.style.top = pointCoordinates.y – Math.floor(piePoints[i].hintDiv.offsetHeight / 2) + “px”;
45.       }
46.     }
48.   };
50.   myChart = new EJSC.Chart(“myChart1a”,
51.     {
52.       show_legend: false,
53.       allow_zoom: false,
54.       show_mouse_position: false,
55.       // Hide the standard hints
56.       show_hints: false,
57.       // Assign the onAfterDraw event
58.       onAfterDraw: doAfterDraw
59.     }
60.   );
62.   mySeries = new EJSC.PieSeries(
63.     new EJSC.ArrayDataHandler(
64.       [[10, “Piece 1”],[20, “Piece 2”],[45, “Piece 3″],[25,”Piece 4”]]
65.     )
66.   );
68.   myChart.addSeries(mySeries);
70. </script>