how to overlay a line on a dojo column chart - dojo

Question

I am using a dojo column chart. I want to add a custom line (some kind of a threshold line) that is drawn on the plot.
So, lets say y axis ranges from 0 to 5. I want a horizontal line at, lets say, 4.2 running across the plot.
It is a column chart.
I was hoping to find some drawing APIs that can help me do custom drawing on the plot but i am unable to figure out how. I know the chart uses gfx and surface so if i can get a handle to the chart/plot surface perhaps i can draw a custom line? Will also need data to rendered co-ordinates mapping to make this happen
My current chart uses code like:
var mychart = new dojox.charting.Chart2D("columns").
addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true,
font: "normal normal 10pt Arial",
labels: [{value: 1, text: "Q2 FY11"},
{value: 2, text: "Q3 FY11"},
{value: 3, text: "Q4 FY11"},
{value: 4, text: "Q1 FY12"}]
}).
addAxis("y", {vertical: true, includeZero: false, fixLower: "major", fixUpper: "major", min: 0, max: 5, font: "normal normal 10pt Arial", majorTick: {color: "black", length: 6}, minorTicks: false}).
addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 5, minBarSize : 14, maxBarSize:24, animate: { duration: 1000, easing: dojo.fx.easing.linear} }).
addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]).
addSeries("Series B", [1.2, 2.5]);

Answer 1

You could render the line using another plot.
new dojox.charting.Chart2D("columns").
addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true,
font: "normal normal 10pt Arial",
labels: [{value: 1, text: "Q2 FY11"},
{value: 2, text: "Q3 FY11"},
{value: 3, text: "Q4 FY11"},
{value: 4, text: "Q1 FY12"}]
}).
addAxis("y", {vertical: true, includeZero: false, fixLower: "major", fixUpper: "major", min: 0, max: 5, font: "normal normal 10pt Arial", majorTick: {color: "black", length: 6}, minorTicks: false}).
addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 5, minBarSize : 14, maxBarSize:24, animate: { duration: 1000, easing: dojo.fx.easing.linear} }).
addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]).
addSeries("Series B", [1.2, 2.5]).
addPlot("threshold", { type: "Lines" }).
addSeries("threshold", [{x: 0, y: 4.2}, {x: 4, y: 4.2}], { plot: "threshold" }).
render();

Answer 2

Another simple example representing max_temperature as Lines and Min_temperature as Columns in the same chart:
var chart = new Chart("chartNode");
chart.addPlot("tempMaxPlot", {
type: "Lines",
markers: false
});
chart.addPlot("tempMinPlot", {
type: "Columns",
markers: true,
gap: 5
});
chart.addAxis("x");
chart.addAxis("y", { min: -3, max: 13, vertical: true, fixLower: "minor", fixUpper: "major" });
var chartData_tmax = [11,13,12,11,10,9,9,10];
chart.addSeries("tmax",chartData_tmax, { plot: "tempMaxPlot" });
var chartData_tmin = [1,1,2,1,0,-1,-1,0];
chart.addSeries("tmin",chartData_tmin, { plot: "tempMinPlot" });
chart.render();

Answer 3

Last but not least you can gfx drawing functions to draw a line manually, as described below:
Add a line (not a series) to a dojo chart