How do I embed a small chart (e.g., a sparkline) in a Tooltip? I tried something like:
var contdiv = document.createElement('div'); // container DIV
dojo.body().appendChild(contdiv);
var chdiv = document.createElement('div'); // chart DIV
contdiv.appendChild(chdiv);
dojo.style(chdiv, "width", 128);
dojo.style(chdiv, "height", 50);
dojo.style(chdiv, "margin", "auto");
dojo.style(chdiv, "overflow", "hidden");
dojo.style(chdiv, "text-align", "center");
dojo.style(chdiv, "padding", "0px");
dojo.style(chdiv, "border", "0px");
var pricechart = new dojox.charting.Chart2D(chdiv);
[...]
pricechart.render();
dijit.showTooltip(contdiv.innerHTML, node);...but it doesn't seem to work :-(
Any suggestion?
Thanks in advance,
Enzo

It probably doesn't work because...
...some of the renderers for gfx need the parent node to be visible first. Try showing the tooltip first and then creating the sparkline.
Actually the chart IS rendered...
...in the temporary container DIV (and it appears at the end of the page, as the container DIV is appended to dojo.body() - I was planning to remove it later).
What doesn't seem to work is using the innerHTML from the container DIV as the string passed to dijit.showTooltip(). Is there any better way to insert the chart into a tooltip shown by dijit.showTooltip() ?
I have to use dijit.showTooltip() because I want the tooltip to be shown while hovering on a DataGrid cell: the code partially shown in my previous post is executed inside an event handler, and "node" is actually e.cellNode, where e is the event:
dojo.connect(myDataGrid, "onCellMouseOver" , function(e) { [...] dijit.showTooltip(contdiv.innerHTML, e.cellNode); }Try the regular DOM node
Try the regular DOM node API, like appendChild() instead of using innerHTML.
I see. I think.
What you'll need to do is probably something like this:
1. Create a tooltip widget and make sure you have a reference to it (as opposed to using dijit.showTooltip).
2. Use the show method with some dummy text, probably an empty string.
3. Immediately after the call to show, append your div to the tooltip's domNode.
I think the main issue here is that Tooltip does not take a DomNode as an argument but instead insists on innerHTML. Probably you should file a bug/enhancement against 1.3 that will alter this to take either a string or a DomNode as an argument.
More or less solved
dijit.Tooltip has no show() method: this is a method of the object dijit._masterTT, and takes as arguments, among other things, an innerHTML (see source of Tooltip.js). So, I might as well call dijit.showTooltip(), which internally calls dijit._masterTT.show(), and then mess with dijit._masterTT.domNode , replacing its content. But from my limited understanding, altering dijit._masterTT.domNode is a BAD_THING, because the current Tooltip machinery relies on simple replacements of the innerHTML of one of its children, dijit._masterTT.containerNode , so if I damage the DOM structure no other tooltips can be shown. And at http://www.dojoforum.com/node/14857 Dante says that "appendChild()'ing anyWidget.domNode is questionable, and should be used with caution".
Instead, this appears to work, more or less:
1. create a DIV for the chart, insert in the DOM with dojo.body().appendChild() and build the sparkline inside it.
2. show a tooltip (dijit.showTooltip() works fine), and then append the chart's DIV to dijit._masterTT.containerNode :
This has the effect of showing the chart with the sparkline below the msg. Other tooltips keep working normally. However, this solution is not very clean because dijit._masterTT is supposed to be a private object; besides, I'm not sure if the DOM elements of the sparkline chart are properly destroyed once the tooltip is hidden.
What I don't understand is why the chart's HTML code can't just be copied into the tooltip, e.g. with:
msg = 'some HTML fragment'; dijit.showTooltip(msg, e.cellNode); // dijit._masterTT.containerNode.appendChild(chdiv); var contdiv = document.createElement('div'); dojo.body().appendChild(contdiv); contdiv.appendChild(chdiv); dijit._masterTT.containerNode.innerHTML = contdiv.innerHTML;This results in an empty tooltip. Isn't HTML with SVG tags like any other HTML content?
More generally...
Self-followup:
> What I don't understand is why the chart's HTML code can't just be copied into the tooltip
This also applies to other cases: for example, it would be nice to place sparklines into DataGrid cells. So my question is more general: Is there any way of (roughly speaking) serializing a chart into an HTML string that can be placed wherever an innerHTML is accepted?
No, actually, it's not.
...and it's because you aren't guaranteed a specific renderer for GFX at all. You might *assume* it's SVG but it's possible that it's one of 4 (and probably a Flash one at some point in the future). Because of this, you simply can't "copy the markup" and slap it in--you will lose all programmatic references, etc.
I have another approach you can try though...
1. use the regular dijit.showTooltip(), and pass it an innerHTML of:
2. use dojo.byId('myChartSparklineIdGoesHere') as the domNode for the sparkline.
I've been especially busy the past couple of days, so let me apologize in advance for not thinking of this before--it's such an obvious solution.
getting the DIV reference by ID
Thanks for your explanation, and the good suggestion. This probably works for charts in Tooltips, but it does not for charts embedded in DataGrid cells (which are now my main focus): the reason being that the cell's content is stored in a dojo.data store, so any modification to the innerHTML of the DIV rendered in the DOM is overwritten every time the cell content is refreshed from the store (e.g., upon insertion of new items, or sort over a column etc.). So, I tried to embed in the HTML fragment stored in the cell not only the <div> / </div> but also a call to the code that builds the chart, within <script>/</script> tags. Unfortunately, such script is executed only under FireFox (and only for successive renderings, not the first) but not with MSIE7 or Google Chrome, God knows why. This is a possible DataGrid issue, not a Charting issue, because the problem is the non-execution of any script, so it should be discussed elsewhere.
Thanks anyway for your help!