Add a line (not a series) to a dojo chart

Question

I have a working chart that graphs sales by week. I'd like to add a vertical line to the chart that represents the current week, but I can't figure out how to do it.

My chart setup is pretty vanilla:

dojo.ready(function(){
var chart = new dojox.charting.Chart2D("saleschart");
chart.setTheme(dojox.charting.themes.Claro);

chart.addPlot(
    "default", 
    {
        type: "Lines",
        markers: true,
        shadows: {dx: 2, dy: 2}
    });

chart.addAxis("x", {title: "Week", majorTickStep: 2});

chart.addAxis("y", { title: "Sales ($)", vertical: true, fixLower: "major", fixUpper: "major", majorTickStep: 100 });

chart.addSeries("2009",[{x:36, y:512.65},{x:37, y:195.5},{x:38, y:388.15},{x:39, y:601.3},{x:40, y:178.55},{x:41, y:298.15},{x:42, y:98.7},{x:43, y:187.55},{x:44, y:241.3},{x:45, y:251.35},{x:46, y:69.8},{x:47, y:174.55},{x:48, y:74.7},{x:49, y:379.2},{x:50, y:375.95},],{plot: "default"});chart.addSeries("2010",[{x:2, y:18.95},{x:3, y:174.7},{x:4, y:113.65},{x:5, y:258.4},{x:6, y:666.35},{x:7, y:941.5},{x:8, y:192.6},{x:9, y:233.25},{x:10, y:283.25},{x:11, y:122.7},{x:12, y:279.4},{x:13, y:129.65},{x:14, y:32.9},{x:15, y:162.7},{x:16, y:160.65},{x:17, y:297.25},{x:18, y:361.1},{x:19, y:270.1},{x:20, y:37.85},{x:32, y:38.95},{x:35, y:434.9},{x:36, y:416.15},{x:37, y:443.95},{x:38, y:423},{x:39, y:176.5},{x:40, y:240.55},{x:41, y:174.55},{x:42, y:195.55},{x:43, y:230.5},{x:44, y:373.95},{x:45, y:184.5},{x:46, y:261.3},{x:47, y:165.55},{x:49, y:471.95},{x:50, y:328.1},{x:51, y:168.65},],{plot: "default"});chart.addSeries("2011",[{x:4, y:218.45},{x:5, y:357.3},{x:6, y:459.95},{x:7, y:1200.7},{x:8, y:257.3},{x:9, y:149.65},{x:10, y:190.6},{x:11, y:259.45},{x:12, y:130.65},{x:13, y:277.4},{x:14, y:85.75},{x:16, y:428.1},{x:17, y:428.9},{x:18, y:282.35},{x:19, y:308.35},{x:20, y:20.95},{x:35, y:174.75},{x:36, y:1008.45},{x:37, y:619.15},{x:38, y:394.2},],{plot: "default"});

var tip = new dojox.charting.action2d.Tooltip(chart,"default");

var mag = new dojox.charting.action2d.Magnify(chart,"default");

new dojox.charting.action2d.Highlight(chart,"default"); 

chart.render();

var selectableLegend = new dojox.charting.widget.SelectableLegend({chart: chart},"selectableLegend");

});

Answer 1

I solved this by adding a plot of type column to the chart, with it's own y axis that goes from 0 to 1:

chart.addAxis("y2", {
            vertical: true, 
            fontColor: "#708291",
            min: 0,
            max: 1.0,
            minorTicks: true,
            minorLabels: true,
            microTicks: true,                
            leftBottom: false                
          });              
chart.addPlot("verticalLine", {type: "Columns", gap: 1, minBarSize: 1, maxBarSize: 1, vAxis:"y2"});

Then you need a data series that has the exact amount of x values as your data:

var verticalLineData = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

You would change 0 to 1 at whichever index corresponds to where you want the line to be.

Then I added this series to that plot:

chart.addSeries("verticalLine", verticalLineData, {plot: "verticalLine"});

Bring it to the front and render:

chart.movePlotToFront("verticalLine");
chart.render();

You can look up how to change the width/color/fill of the column in the dojo docs.

Answer 2

since dojox.charting uses dojo gfx you can draw any graphical object inside a chart, right now after it was rendered. E.g. the example below draws a vertical line inside the chart.

    chart.surface.createLine(
    {
      x1: 100, 
      y1: chart.offsets.t, 
      x2: 100, 
      y2: chart.getCoords().h - chart.offsets.t - chart.offsets.b
    });

Regards, Christoph