Jump to content
JChartFX Community
  • 0

Custom ToolTip & Custom background


Jin
 Share

Question

Hi,

I've been using jChartFX for displaying some charts in my webpages and they worked great. I loved them.

However, I'm trying to implement some custom tooltips but I've been having some issues. 

 

1) It seems  

chart.on("gettip", onGetTip);

works fine, but

 chart.off("gettip", offGetTip);

doesn't seem to work although chart.off() function has been defined.

Is there anyway we can get a callback when the cursor is off the chart element?

 

2) when we are using a custom tooltip, we're supposed to "add" a div containing our custom tooltip to the standard tooltip div as a child like,

 args.tooltipDiv.appendChild(toolTip); 

 It's working fine w/r/t the issue above, but I don't like the fade-in/out feature.

Is there anyway I can turn it off? I managed to reduce the delay time for showing on/off the tooltip by modifying the library, but I can't find a place where the opacity is being changed...

 

3) I'd like to add a background shadow for a pie chart, and I wonder if there's any variable I can refer to in order to get the "acutal" chart being drown (not the size of div). I need to know it since the page size can vary, so the chart size changes.

 

I'd appreciated if you can give me answers or guideline where I can look for.

Thank you very much in advance for your reply.


 

  

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

1) 

chart.off is used to detach your function from the event, i.e. you do not want to be called anymore when the tooltip is about to appear. Unfortunately we currently do NOT have an event that is fired when the tooltip is being hidden. You could try checking when the mouse is no longer over the chart but note that the tooltip dissappears even if the mouse is over the chart but is not over any of the bars/points.

2)

To remove the fade in/out, modify the jchartfx.css file, and in the jchartfxToolTip2Visible and jchartfxToolTip2Hidden classes remove all the transition properties. Please note that in 7.0 we had ToolTipVisible and ToolTipHidden classes, in 7.1 we added the ToolTIp2* classes used for the new stylable tooltips

3)

Not sure what you mean about the background shadow of the pie chart, are you looking for a background shadow for all the slices or the rectangle that contains the chart? Can you post a simulated screeenshot of what you are looking for?

Regards,

JuanC 

post-2107-13939743384758_thumb.jpg

Link to comment
Share on other sites

  • 0

Never mind. I figured it out.

 

Elements with id  "C0s" are the svg elements for the chart, and elements with id "C1s" are the svg elements for the legend.

You can investigate the bound rect (by calling getBoundingClientRect() function) for adjustment.

The following is the function that I used. Note that I made the function being called constantly in order to keep the shadow at a proper size. 

 

function adjustShadow() {

     $("[id=C0s]").each(function () {

    if ($(this).closest("div").attr("id") != "chrtPrimaryVector") return;

     var w = ($(this)[0].getBoundingClientRect().right - $(this)[0].getBoundingClientRect().left) * 1.1;

    var h = ($(this)[0].getBoundingClientRect().bottom - $(this)[0].getBoundingClientRect().top) * 1.1;

    var x = $(this)[0].getBoundingClientRect().left - $("#chrtPrimaryVector").offset().left;

    var y = $(this)[0].getBoundingClientRect().top - $("#chrtPrimaryVector").offset().top + h * 0.1;

     $("#chrtPrimaryVector").css({ "background-position": x + "px " + y + "px", "background-size": w + "px " + h + "px" });

// constantly repositioning the shadow

    setTimeout(adjustShadow, 200);

    });

    }


Link to comment
Share on other sites

  • 0

Note that the fact that we generate elements that are in the plotarea as C0s and elements in the legend as C1s is entirely an implementation detail.

If you are using jChartFX.coreVector.js and can live with 2D rendering you can take advantage of our "stylable" templates by using one of the following prebuilt templates for doughnut (to use one of these you have to include jChartFX.vectorTemplates.js as well)

    chart1.getGalleryAttributes().setTemplate("DoughnutMetal");

    chart1.getGalleryAttributes().setTemplate("DoughnutSpotlight");

    chart1.getGalleryAttributes().setTemplate("DoughnutBasic");

Additionally we can help you creating new templates, this would be a template similar to the default 2D doughnut look but adding a background shadow, the background shadow can be moved by changing the values of C.left and C.top and the blurriness can be changed by changing the number in BBE R="2"
 
    chart1.getGalleryAttributes().setTemplate('<T><T.R><T K="cfxBackgroundFull"><C><P D="{B G}" F="#808080" C.Left="4" C.Top="4"><P.BE><BBE R="2"/></P.BE></P></C></T><T K="cfxForegroundFull"><C c="{B CE}"><E A="0.75" ST="1"><E.F><R><G C="#00000000" O="0.8"/><G C="#67000000" O="1"/></R></E.F><E.S><L E="0.829,0.87" S="0.203,0.082"><G C="#4CFFFFFF" O="0"/><G C="#00FFFFFF" O="1"/></L></E.S></E></C></T></T.R><C><P D="{B G}" F="{B F}" S="{B S}"/><P D="{B G}" F="{N}" A="0.2"><P.S><L E="1,1" S="0,0"><G C="#FFFFFFFF" O="0"/><G C="#FF000000" O="1"/></L></P.S></P></C></T>');
  
Regards,
 
JuanC 
Link to comment
Share on other sites

  • 0

Thank you very much for your answer, Juan.

But I use 3D charts, and the template apparently doesn't work for that case.

I think I'll just stick with the solution that I posted earlier (although it depends on the implementation detail) as it serves me well. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...