Is it possible to have clickable segments in a stacked bar chart to show clicked range as a tooltip?

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by TomW on 9th August 2017
Good morning, Richard. Well, good afternoon for you! :)

Using your clickable stacked bar chart as an example (www.rgraph.net/demos/bar-stacked-click.html), is it possible to make it so you can click on the individual segments AND display the range for that segment?

Thanks!
Tom
Posted by Richard on 9th August 2017
Hi there,

What do you mean by "range"? Do you mean that you want to use individual tooltips for each segment that shows the minimum and maximum values for that segment?


Richard
Posted by TomW on 9th August 2017
Yes, sir. That is exactly what I'd like!
Posted by Richard on 9th August 2017
Hi there,

You can do it by using a function as the tooltips like this:

www.rgraph.net/fiddle/view.html/stacked-bar-chart-with-tooltips

It takes some messing around withe the index of the segments - but there it is.

I suppose you could also create the tooltips first and then create the chart - instead of creating each tooltip when the segment is clicked - but I did it like this.


Richard
Posted by TomW on 9th August 2017
Thanks again, Richard. This looks great! Will let you know how it turns out.
Posted by TomW on 10th August 2017
Hi, Richard. So, below is where I am at. Thanks again for your help! Is there a way for the tool tips to ignore the very first data set? In the example below, the 1356? I don't anything to fire when you mouseover or click that first bar. Please see below and let me know what you think. Thanks again...very much!!

<!DOCTYPE html>
<html>
<head>
     <title>Comparison Chart</title>
  <script src="../js/jquery.1.12.js"></script>
     <script src="../RGraph/libraries/RGraph.common.core.js" ></script>
  <script src="../RGraph/libraries/RGraph.common.key.js" ></script>
  <script src="../RGraph/libraries/RGraph.common.dynamic.js"></script>
  <script src="../RGraph/libraries/RGraph.common.tooltips.js"></script>
     <script src="../RGraph/libraries/RGraph.bar.js" ></script>
<script type="text/javascript">
function addcommas(n) {
   n = n.toString()
   while (true) {
     var n2 = n.replace(/(\d)(\d{3})($|,|\.)/g, '$1,$2$3')
     if (n == n2) break
     n = n2
   }
   return n
}
</script>
</head>
<body>
<div id="container6" style="width: 600px; position: relative; align:center; padding: 45px; border: 1px solid #ccc; display: inline-block">
  <canvas id="cvs6" width="600" height="250">
     [No canvas support]
  </canvas>
</div>
<script>
     $(document).ready ( function ()
     {
   var data = [[1356],[290,296,295,845],[221,192,287,1042],[323,265,299,904]];
   var segmentLabels = ['4th Quartile','3rd Quartile','2nd Quartile','1st Quartile'];
   var data_seq = RGraph.arrayLinearize(data);
   var labels = ['My Time','Avg Eastern','Avg Midwest','Avg West Coast'];

   var bar = new RGraph.Bar({
    id: 'cvs6',
    data: data,
    options: {
     title: 'Time Comparison',
     titleY: 1,
     labels: labels,
                 labelsAbove: true,
                 labelsAboveUnitsPre: '',
                 labelsAboveUnitsPost: '',
                 hmargin: 25,
                 hmarginGrouped: 5,
                 linewidth: 1,
                 strokestyle: 'black',
                 colors: ['crimson','#66f','#AA4643','#89A54E','#5892ad','#66f','#AA4643','#89A54E','#5892ad','#66f','#AA4643','#89A54E','#5892ad'],
     colorsSequential: true,
                 grouping: 'stacked',
                 shadowOffsetx: 0,
                 shadowOffsety: 0,
                 shadowBlur: 5,
                 gutterLeft: 35,
                 textAccessible: true,
     tooltips: function (idx)
     {
      var indexes = RGraph.sequentialIndexToGrouped(idx, data);
     
      for (var i=indexes[1],sum=0; i<data[indexes[0]].length; ++i) {
       sum += data[indexes[0]][i];
      }


      str = '<div style="display: inline-block; width: 100px; text-align: left"><h3>{1}</h3><b>Max:</b> {3}<br /><b>Min:</b> {2}'.format(
       segmentLabels[segmentLabels.length - indexes[1] - 1],
       addcommas((sum - data[indexes[0]][indexes[1]]).toFixed(0)),
       addcommas(sum.toFixed(0))
      );
     
      str = str+'</div>';
      return str;
     },
     tooltipsEvent: 'mousemove'
    }
   }).draw().on('mouseout', function (obj) {RGraph.redraw();});
     });
</script>
</body>
</html>
Posted by Richard on 10th August 2017
Hi there,

In the tooltips handler function just check that the idx variable is not 0. If the first bar can have multiple segments check the group in the indexes[0] variable instead after the RGraph.sequentialIndexToGrouped() call.


Richard
Posted by TomW on 10th August 2017
That worked perfectly...thanks again! Little upset with myself that I totally overthought that! lol

Add a reply




« Back to message list