Can Dojo MouseIndicator be HTML and not just plain text? - dojo

Question

Ive got some chart code whereas I add a MouseIndicator to a line chart. I want the text on the MouseIndicator to be HTML and I am not sure if this is possible since it is not working. Ive added a labelFunc to return the HTML I want, but it only ever shows up as plain text.
Ive got the code on JSFiddle (and below) so you can try it out.
Any help is appreciated.
require(["dojox/charting/Chart",
"dojox/charting/action2d/Magnify",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/Legend",
"dojox/charting/themes/PlotKit/green",
"dojox/charting/plot2d/StackedLines",
"dojox/charting/action2d/MouseIndicator",
"dojox/charting/axis2d/Default",
"dojo/ready"
], function(Chart, Magnify, Highlight, Tooltip, Legend, theme_green, _lines, MouseIndicator, _axis, ready) {
// wrapped in domready event
ready(function() {
// create a chart with placeholder div#charty
var chart2 = new Chart("chart");
chart2.setTheme(theme_green);
chart2.addPlot("default", {
type: "StackedLines",
markers: true,
// create round dots on plot-points
tension: 3,
// curve slightly
shadows: { // add shadow
dx: 2,
dy: 2,
dw: 2
}
});
chart2.addAxis("x", {
min: 0,
majorTick: {
stroke: "black",
length: 3
},
minorTick: {
stroke: "gray",
length: 3
}
});
chart2.addAxis("y", {
vertical: true,
min: 0,
max: 6,
majorTick: {
stroke: "black",
length: 3
},
minorTick: {
stroke: "gray",
length: 3
}
});
// each point, added to a series.
// note the first entry in Series A which has the
// customizable object notation
// Hover mouse over lower left point (first red square"
chart2.addSeries("Series A", [{
x: 0.5,
y: 3.5,
tooltip: "Custom data"}
, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {
stroke: {
color: "red",
width: 2
},
fill: "lightpink",
marker: "m-3,-3 l0,6 6,0 0,-6 z"
});
chart2.addSeries("Series B", [1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1], {
stroke: {
color: "blue",
width: 2
},
fill: "lightblue",
marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
});
chart2.addSeries("Series C", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {
stroke: {
color: "green",
width: 2
},
fill: "lightgreen",
marker: "m0,-3 l3,3 -3,3 -3,-3 z"
});
var anim2a = new Magnify(chart2, "default", {
scale: 3
});
var anim2b = new Highlight(chart2, "default");
var anim2c = new Tooltip(chart2, "default");
var legend2 = new Legend({
chart: chart2
}, "legend2");
new dojox.charting.action2d.MouseIndicator(chart2, "default", {
series : "Series A",
mouseOver: true,
labelFunc: function(v, v2){
return "<div>fred</br></br>betty</div>";
},
fillFunc: function(v){
return '#fcfcfc';
},
fontColor:'black',
stroke: {width: 2, color: 'purple'},
lineStroke: {width: 2, color: 'green'},
dualIndicator: true
});
chart2.render();
});
});

Answer 1

By default only plain text is rendered because the rendering is either done by SVG or Canvas (or VML for old IEs). However you should be able to customize this to render some HTML.
The way to proceed is to tell the data indicator to not render the labels itself (labels: false) and do it yourself in when a change event occurs. Something like the following (here using a dijit/Tooltip but you can use any other way to render HTML):
require(["dojo/ready", "dojo/on", "dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines",
"dojox/charting/action2d/MouseIndicator", "dijit/Tooltip", "dijit/place"],
function(ready, on, Chart, Default, Lines, MouseIndicator, Tooltip, place){
ready(function(){
var chart = new Chart("chart", { margins : {l :20, t:10, b:10, r: 50}});
chart.addAxis("x", {fixLower: "minor", natural: true, stroke: "gray",
majorTick: {color: "red", length: 4}, minorTick: {color: "blue", length: 2}});
chart.addAxis("y", {vertical: true, min: 0, max: 100, majorTickStep: 10, minorTickStep: 5, stroke: "gray",
majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}});
chart.addPlot("default", {type: Lines, markers: false});
chart.addSeries("Series A", [
{ x: 1, y: 8},{ x: 2, y: 7},{ x: 3, y: 3},{ x: 4, y: 2},{ x: 5, y: 5},{ x: 6, y: 7},{ x: 7, y: 9},{ x: 8, y: 10},{ x: 9, y: 2},{ x: 10, y: 10},
{ x: 15, y: 14},{ x: 16, y: 16},{ x: 17, y: 18},{ x: 18, y: 13},{ x: 19, y: 16},{ x: 20, y: 15},{ x: 21, y: 20},{ x: 22, y: 19},{ x: 23, y: 15},{ x: 24, y: 12},
{ x: 25, y: 24},{ x: 26, y: 20},{ x: 27, y: 20},{ x: 28, y: 26},{ x: 29, y: 28},{ x: 30, y: 26},{ x: 31, y: 28},{ x: 32, y: 29},{ x: 33, y: 24},{ x: 34, y: 29},
{ x: 35, y: 31},{ x: 36, y: 35},{ x: 37, y: 37},{ x: 38, y: 31},{ x: 39, y: 35},{ x: 40, y: 37},{ x: 41, y: 37},{ x: 42, y: 36},{ x: 43, y: 31},{ x: 44, y: 30},
{ x: 45, y: 50},{ x: 46, y: 49},{ x: 47, y: 42},{ x: 48, y: 46},{ x: 49, y: 44},{ x: 50, y: 40},{ x: 51, y: 47},{ x: 52, y: 43},{ x: 53, y: 48},{ x: 54, y: 47},
{ x: 55, y: 51},{ x: 56, y: 52},{ x: 57, y: 52},{ x: 58, y: 51},{ x: 59, y: 54},{ x: 60, y: 57},{ x: 61, y: 58},{ x: 62, y: 50},{ x: 63, y: 54},{ x: 64, y: 51},
{ x: 65, y: 62},{ x: 66, y: 68},{ x: 67, y: 67},{ x: 68, y: 62},{ x: 69, y: 62},{ x: 70, y: 65},{ x: 71, y: 61},{ x: 72, y: 66},{ x: 73, y: 65},{ x: 74, y: 62},
{ x: 75, y: 74},{ x: 76, y: 78},{ x: 77, y: 78},{ x: 78, y: 77},{ x: 79, y: 74},{ x: 80, y: 74},{ x: 81, y: 72},{ x: 82, y: 74},{ x: 83, y: 70},{ x: 84, y: 78},
{ x: 85, y: 84},{ x: 86, y: 83},{ x: 87, y: 85},{ x: 88, y: 86},{ x: 89, y: 86},{ x: 90, y: 89},{ x: 91, y: 89},{ x: 92, y: 85},{ x: 93, y: 86},{ x: 94, y: 86},
{ x: 95, y: 98},{ x: 96, y: 97},{ x: 97, y: 93},{ x: 98, y: 91},{ x: 99, y: 92},{ x: 100, y: 92}
]);
var i = MouseIndicator(chart, "default", { series: "Series A", labels: false });
var tooltip = new Tooltip();
on(i, "Change", function(evt){
if(evt.label){
var around = chart.getPlot("default").toPage({ x: evt.start.x, y: maxVertical });
around.w = 1;
around.h = 1;
tooltip.label = "<h1>value:</h1><h2>" + evt.start.y + "</h2>";
tooltip.position = ["above-centered"];
if (!shown) {
shown = true;
tooltip.open(around);
} else {
Tooltip._masterTT.containerNode.innerHTML = tooltip.label;
place.around(Tooltip._masterTT.domNode, around, ["above-centered"]);
}
} else {
// hide
tooltip.close();
shown = false;
}
});
chart.render();
var maxVertical = chart.getAxis("y").getScaler().bounds.to;
var shown = false;
})
});