Stacked Bar chart with whole column clickable

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« 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 Antonio Vianello on 6th November 2013
Hi there!

I've implemented three stacked bar chart on the same page based on your example (bar-stacked-click.html) and everything is working fine except when I move the window graph area with the vertical scroll bar (in fact the three charts don't fit all in a single page); in this case when I move the mouse over the bars the cursor doesn't show an hand and so the bar is unclickable.
This strange behaviour is different depending on the browser, i.e. Firefox does't work at all, with Chrome the bar is yet clickable but the tooltip appears elsewhere.

It is related to the fact that the charts appear in a scrollable page?
Please help!

Thanks in advance
Posted by RGraph Support on 6th November 2013
Hi there,

Sounds like you may need to use the chart.tooltips.coords.page option. Set it to true and the tooltip should appear next to the cursor.



Richard, RGraph Support
Please remember to link to the RGraph website

Help support RGraph - single site license only £99
    www.rgraph.net/license#single-site
Posted by Antonio Vianello on 6th November 2013
Hi there!

I applied the above statement but unfortunately nothing has changed.
The bar becomes unclickable as soon as I scroll the page.
It seems to be fixed at that position, so when I move up the page it disappears and it can't be activated.

Please help!

Thanks
Posted by RGraph Support on 6th November 2013
Hi there,

Try proving a link to an example so I can see what's happening.



Richard, RGraph Support
Please remember to link to the RGraph website

Help support RGraph - single site license only £99
    www.rgraph.net/license#single-site
Posted by Antonio Vianello on 6th November 2013
Hi there!

This is how I define one of my three chart:
        
  function buildGraph3(id, data) {

         bar3 = new RGraph.Bar('chart3', data);
         bar3.Set('linewidth', 1);
         bar3.Set('chart.title.yaxis', 'Sfasamento');
         bar3.Set('chart.text.size',12);
         bar3.Set('chart.text.font','Calibri');

         bar3.Set('shadow', true);
         bar3.Set('shadow.offsetx', 1);
         bar3.Set('shadow.offsety', 1);
         bar3.Set('shadow.blue', 5);
         bar3.Set('hmargin', 4);
         bar3.Set('gutter.top', 8);
         bar3.Set('gutter.left', 65);
         //bar3.Set('gutter.right', 65);
         bar3.Set('gutter.bottom', 25);
         bar3.Set('background.grid.vlines', false);
         bar3.Set('background.grid.border', false);
      bar3.Set('chart.background.color','rgba(224,224,224,1)');
      bar3.Set('chart.background.grid.color','rgba(192,192,192,1)');
         bar3.Set('chart.title.yaxis.pos',0.4);
  bar3.Set('axis.color', '#ccc');
  bar3.Set('chart.ylabels.count',1);
  bar3.Set('chart.numyticks', 4);
  bar3.Set('chart.tooltips.coords.page', true);
  bar3.Set('labels' ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23']);    

  bar3.Draw();
  return bar3;
}

and this is the code snippet that creates the tooltip:


RGraph.each (bar3.coords2, function (key, value)
{
  var x = value[0][0];
  var y = value[0][1];
  var w = value[0][2];
  var h = value[0][3] + value[1][3] + value[2][3]; // Sum up the heights of the bar segments

   var rect = new RGraph.Drawing.Rect('chart3', x, y, w, h)
                       .Set('strokestyle', 'rgba(0,0,0,0)')
                       .Set('fillstyle', 'rgba(0,0,0,0)')
                       .Set('tooltips', [myTooltip[key]])
                       .Set('highlight.stroke', 'rgba(0,0,0,0)')
                       .Draw();
}, bar3);


Remember that I have three charts in the same page and so I have to scroll the page up and down to show them all. Could this be the problem?

Thanks in advance
Posted by RGraph support on 6th November 2013
Hi there,

Normally the tooltips would just scroll up with the page. Unless you're using fixed positioning - or perhaps (i)frames.

I've padded the demo page with text so that the browser can be scrolled - and there's nothing on the page that affects the tooltip.

www.rgraph.net/demos/bar-stacked-click.html





Richard, RGraph Support
Please remember to link to the RGraph website (or buy an RGraph
license and you don't need to!)

Single developer license just £199:
   www.rgraph.net/license#one-developer

Add a reply




« Back to message list