Now i am playing with dojo column chart and stacked chart.It works fine when the Page loads. When I hover over different stacked fields and can't get the tool tip displayed.So please request to your how can show my tooltips on mouse hover with respected series name .Here is my js fiddle [link][ http://jsfiddle.net/kairi/S4tH2/ ] .
So kindly request to you how can i show my tooltips on mouse over with respective fields.
So here is my code is
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend"],
function(Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend) {
ready(function() {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap:6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle:"inside",
//maxBarSize: 35,
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation:-20,
majorTicks:true,
majorTickStep:1,
minorTicks:false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{"value":1,"text":"A"},{"value":2,"text":"B"},{"value":3,"text":"C"},{"value":4,"text":"D"},{"value":5,"text":"E"},{"value":6,"text":"F"}]
});
chart1.addAxis("y", {title:"Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep:500,
max: 7000,
//from:1000,
//to:6000,
vertical: true
});
chart1.addSeries("AC",[3000,5000,5500,6000,1300,8280] ,
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF" ,
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [2844,7301,6699,620,820,9683] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [5000,1000,1000,1000,2500,2500] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [1500,150,1500,700,7000,0,8000,1300,1300] , {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align:top
}, "chart1SelectableLegend");
});
});
Here i want different different tooltips for different different series.So how it is possible.
