Paul Pritchard avatar Paul Pritchard committed f7cd4d6

Add tooltip support for Pie Charts

Comments (0)

Files changed (2)

examples/cursor-highlighter.php

 
 <pre class="code prettyprint brush: js"></pre>
 
+<p>Tooltips can be displayed with Pie Charts.  Cursor tracking doesn't work with Pie Charts since they do not have points or axes, so the tooltip is based on the highlighter and always follows the mouse.  You may wish to change the background and border colors of the highlighter tooltip for use with Pie Charts, since the default tooltip colors are designed to be displayed on top of a white background, while the Pie Chart slices provide a darker color background for the tooltips.  To change the tooltip colors or other attributes, modify the jqplot-highlighter-tooltip class in jquery.jqplot.css.</p>
+
+<div id="chart3" style="height:300px; width:600px;"></div>
+
+<pre class="code prettyprint brush: js"></pre>
+
 <script class="code" type="text/javascript">
 $(document).ready(function(){
   var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
 });
 </script>
 
+<script class="code" type="text/javascript">
+$(document).ready(function() {
+  var line1 = [['Sony',7], ['Samsung',13.3], ['LG',14.7], 
+    ['Vizio',5.2], ['Insignia', 1.2]];
+
+  var plot3 = $.jqplot('chart3', [line1], {
+    title: 'Pie Chart with Tooltips',
+    seriesDefaults: {
+      renderer: $.jqplot.PieRenderer,
+      rendererOptions: {
+        showDataLabels: true,
+        padding: 10,
+        sliceMargin: 6,
+        shadow: false
+      }
+    },
+    legend: {
+      show: true
+    },
+    highlighter: {
+      show: true,
+      useAxesFormatters: false,
+      tooltipFormatString: '%s'
+    }
+
+  });
+
+});
+
 
 <!-- End example scripts -->
 

src/jqplot.core.js

                                 minang = (j>0) ? s.gridData[j-1][1]+sm : sm;
                                 maxang = s.gridData[j][1];
                                 if (theta > minang && theta < maxang) {
-                                    return {seriesIndex:s.index, pointIndex:j, gridData:s.gridData[j], data:s.data[j]};
+                                    return {seriesIndex:s.index, pointIndex:j, gridData:[gridpos.x,gridpos.y], data:s.data[j]};
                                 }
                             }
                         }
                                 minang = (j>0) ? s.gridData[j-1][1]+sm : sm;
                                 maxang = s.gridData[j][1];
                                 if (theta > minang && theta < maxang) {
-                                    return {seriesIndex:s.index, pointIndex:j, gridData:s.gridData[j], data:s.data[j]};
+                                    return {seriesIndex:s.index, pointIndex:j, gridData:[gridpos.x,gridpos.y], data:s.data[j]};
                                 }
                             }
                         }
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.