DrawAdditionalGridline.js

DrawAdditionalGridline.js

var myDataValues = [ 
    {category:"5/1/2010", values:2000}, 
    {category:"5/2/2010", values:50}, 
    {category:"5/3/2010", values:400}, 
    {category:"5/4/2010", values:200}, 
    {category:"5/5/2010", values:5000}
];
var mychart = new Y.Chart({
        dataProvider: myDataValues,
        render: "#mychart",
        horizontalGridlines: true,
        verticalGridlines: true
    });
    var mygraphic = mychart.get("graph").get("gridlines").get("graphic"),
        w = mygraphic.get("width"),
        h = mygraphic.get("height"),
        //set ycoordinate to 85%
        ycoord = Math.round(h - (h * .85)),
        myshape,
        //store current state of Graphic's autoDraw attribute
        autoDraw = mygraphic.get("autoDraw");
    //set graphic's autoDraw attribute to true    
    mygraphic.set("autoDraw", true);
    //create and style path shape
    myshape = mygraphic.addShape({
        type: "path",
        stroke: {
            color: "#f00",
            weight: 3,
        }
    });
    //draw the line at 85%
    myshape.clear();
    myshape.moveTo(0, ycoord);
    myshape.lineTo(w, ycoord);
    myshape.end();
    //set the graphic's autoDraw attribute to its previous state
    mygraphic.set("autoDraw", autoDraw);
});