Commits

cleonello  committed dcc5611

Added showLabels option to bubble charts. Added calculated bubble radius to event callback hander arguments.

  • Participants
  • Parent commits 5506adf

Comments (0)

Files changed (2)

File examples/bubbleChart2.html

   <link rel="stylesheet" type="text/css" href="examples.css" />
   
   <!-- BEGIN: load jquery -->
-  <script language="javascript" type="text/javascript" src="../src/jquery-1.4.2.min.js"></script>
+  <script language="javascript" type="text/javascript" src="../src/jquery-1.4.2.js"></script>
   <!-- END: load jquery -->
   
   <!-- BEGIN: load jqplot -->
         padding-bottom: 1em;
         margin-top: 1em;
         margin-bottom: 4em;
+        clear: both;
         
     }
     
     .note {
         font-size: 0.8em;
     }
+    
+    #tooltip1b {
+        font-size: 12px;
+        color: rgb(15%, 15%, 15%);
+        padding:2px;
+        background-color: rgba(95%, 95%, 95%, 0.8);
+    }
+    
+    #legend1b {
+        font-size: 12px;
+        border: 1px solid #cdcdcd;
+        border-collapse: collapse;
+    }
+    #legend1b td, #legend1b th {
+        border: 1px solid #cdcdcd;
+        padding: 1px 4px;
+    }
   </style>
 
 <script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
             shadow: true,
             shadowAlpha: 0.05
         }
+    });    
+});</script>
+
+<script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
+    
+    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
+    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
+    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];
+    
+    plot1b = $.jqplot('chart1b',[arr],{
+        title: 'Tooltip and Custom Legend Highlighting',
+        seriesDefaults:{
+            renderer: $.jqplot.BubbleRenderer,
+            rendererOptions: {
+                bubbleAlpha: 0.6,
+                highlightAlpha: 0.8,
+                showLabels: false
+            },
+            shadow: true,
+            shadowAlpha: 0.05
+        }
     });
     
+    // Legend is a simple table in the html.
+    // Now populate it with the labels from each data value.
+    $.each(arr, function(index, val) {
+        $('#legend1b').append('<tr><td>'+val[3]+'</td><td>'+val[2]+'</td></tr>');
+    });
+    
+    // Now bind function to the highlight event to show the tooltip
+    // and highlight the row in the legend. 
+    $('#chart1b').bind('jqplotDataHighlight', 
+        function (ev, seriesIndex, pointIndex, data, radius) {    
+            var chart_left = $('#chart1b').offset().left,
+                chart_top = $('#chart1b').offset().top,
+                x = plot1b.axes.xaxis.u2p(data[0]),  // convert x axis unita to pixels on grid
+                y = plot1b.axes.yaxis.u2p(data[1]);  // convert y axis units to pixels on grid
+            var color = 'rgb(50%,50%,100%)';
+            $('#tooltip1b').css({left:chart_left+x+radius+5, top:chart_top+y});
+            $('#tooltip1b').html('<span style="font-size:14px;font-weight:bold;color:'+color+';">'+data[3]+'</span><br />'+'x: '+data[0]+'<br />'+'y: '+data[1]+'<br />'+'r: '+data[2]);
+            $('#tooltip1b').show();
+            $('#legend1b tr').css('background-color', '#ffffff');
+            $('#legend1b tr').eq(pointIndex+1).css('background-color', color);
+        });
+    
+    // Bind a function to the unhighlight event to clean up after highlighting.
+    $('#chart1b').bind('jqplotDataUnhighlight', 
+        function (ev, seriesIndex, pointIndex, data) {
+            $('#tooltip1b').empty();
+            $('#tooltip1b').hide();
+            $('#legend1b tr').css('background-color', '#ffffff');
+        });
 });</script>
 
 <script class="code" language="javascript" type="text/javascript">$(document).ready(function(){
     [24, 104, 1176, {label:"AM General", color:"salmon"}], [50, 23, 610, {color:"papayawhip"}], 
     [18, 17, 539, "Audi"], [7, 89, 864], [2, 13, 1026, "Bugatti"]];
     
-    plot1b = $.jqplot('chart1b',[arr],{
+    plot1c = $.jqplot('chart1c',[arr],{
         title: 'Bubble Data Customizations',
         seriesDefaults:{
             renderer: $.jqplot.BubbleRenderer
     $(document).ready(function(){
         
         $('script.code').each(function(index) {
-            $('pre.code').eq(index).html($(this).html());
+            $('pre.code').eq(index).text($(this).html());
         })
         $(document).unload(function() {$('*').unbind(); });
     });
 <p>By default, all bubbles are scaled according to the size of the plot area.  The radius value in the data point will be adjusted to fit the bubbles in the chart.  If the "autoscaleBubbles" option is set to false, the radius value in the data will be taken as a literal pixel value for the radius of the points.</p>
 
 <p>The below chart show basic customization of bubble appearance with the "bubbleAlpha" and "highlightAlpha" options.</p>
+
 <div id="chart1" class="plot" style="width:460px;height:340px;"></div>
 <pre class="code"></pre>
 
+<div style="position:absolute;z-index:99;display:none;" id="tooltip1b"></div>
+
+<table><tr>
+    <td><div id="chart1b" class="plot" style="width:460px;height:340px;"></div></td>
+    <td><div style="height:340px;"><table id="legend1b"><tr><th>Company</th><th>R Value</th></tr></table></div></td>
+</tr></table>
+<pre class="code"></pre>
+
 <p>Below is a basic bubble chart showing usage of the optional label and color properties passed in with the data.</p>
 
-<div id="chart1b" class="plot" style="width:460px;height:340px;"></div>
+<div id="chart1c" class="plot" style="width:460px;height:340px;"></div>
 <pre class="code"></pre>
 
 <p>The next chart uses the "bubbleGradients: true" option to specify gradient fills on the bubbles.  Radial gradients are not supported in IE<sup>*</sup> and will be automatically disabled.</p>  

File src/plugins/jqplot.bubbleRenderer.js

         // NOT AVAILABLE IN IE due to lack of excanvas support for radial gradient fills.
         // will be ignored in IE.
         this.bubbleGradients = false;
+        // prop: showLabels
+        // True to show labels on bubbles (if any), false to not show.
+        this.showLabels = true;
         // array of [point index, radius] which will be sorted in descending order to plot 
         // largest points below smaller points.
         this.radii = [];
             this.bubbleCanvases[idx].draw(gd[2], color, this.bubbleGradients, this.shadowAngle/180*Math.PI);
             
             // now draw label.
-            if (t) {
+            if (t && this.showLabels) {
                 tel = $('<div style="position:absolute;" class="jqplot-bubble-label"></div>');
                 if (this.escapeHtml) {
                     tel.text(t);
  
     function handleMove(ev, gridpos, datapos, neighbor, plot) {
         if (neighbor) {
-            var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
+            var si = neighbor.seriesIndex;
+            var pi = neighbor.pointIndex;
+            var ins = [si, pi, neighbor.data, plot.series[si].gridData[pi][2]];
             var evt1 = jQuery.Event('jqplotDataMouseOver');
             evt1.pageX = ev.pageX;
             evt1.pageY = ev.pageY;
     
     function handleMouseDown(ev, gridpos, datapos, neighbor, plot) {
         if (neighbor) {
-            var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
+            var si = neighbor.seriesIndex;
+            var pi = neighbor.pointIndex;
+            var ins = [si, pi, neighbor.data, plot.series[si].gridData[pi][2]];
             if (plot.series[ins[0]].highlightMouseDown && !(ins[0] == plot.plugins.bubbleRenderer.highlightedSeriesIndex && ins[1] == plot.series[ins[0]]._highlightedPoint)) {
                 var evt = jQuery.Event('jqplotDataHighlight');
                 evt.pageX = ev.pageX;
     
     function handleClick(ev, gridpos, datapos, neighbor, plot) {
         if (neighbor) {
-            var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
+            var si = neighbor.seriesIndex;
+            var pi = neighbor.pointIndex;
+            var ins = [si, pi, neighbor.data, plot.series[si].gridData[pi][2]];
             var evt = jQuery.Event('jqplotDataClick');
             evt.pageX = ev.pageX;
             evt.pageY = ev.pageY;
     
     function handleRightClick(ev, gridpos, datapos, neighbor, plot) {
         if (neighbor) {
-            var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
+            var si = neighbor.seriesIndex;
+            var pi = neighbor.pointIndex;
+            var ins = [si, pi, neighbor.data, plot.series[si].gridData[pi][2]];
             var idx = plot.plugins.bubbleRenderer.highlightedSeriesIndex;
             if (idx != null && plot.series[idx].highlightMouseDown) {
                 unhighlight(plot);