Custom ToolTip & Custom background

[Jin]

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.

 

  

[JuanC]

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 

[Jin]

Thanks for the quick reply.

As for (3), what I'd like to do is:

 

 So I need to know the actual size of the chart to resize the shadow accordingly.

Is there a way to do that?

Thanks! 

[Jin]

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);

    });

    }

[JuanC]

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 

[Jin]

Thanks for the answer, Juan.

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

[Jin]

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.