Create a custom lines in EXTJS Line Chart

Question

I need to add a vertical line and a text on my Line chart near to a specified point on chart (specified by data, not coordinates). I tried to use CompositeSprites, but it doesn't show on screen completely. I'm new to ExtJS drawing.

Answer 1

You should put the logic that adds the vertical line inside of the chart's refresh event listener, that way, if the data changes the line position will be updated to reflect the new data.

Here's an example of how you could do it, assuming you can get a reference to the chart container (e.g. "myPanel"):

var myChart = myPanel.down('chart'),

myChart.on('refresh', function(myChart) {

    // First, get a reference to the record that you want to position your 
    // vertical line at. I used a "findRecord" call below but you can use 
    // any of the datastore query methods to locate the record based on 
    // some logic: findBy (returns index #), getAt, getById, query, queryBy
    var myRecord = myChart.store.findRecord(/*[someField]*/, /*[someValue]*/),

    // a reference to the series (line) on the chart that shows the record
    mySeries = myChart.series.first(), 

    // get the chart point that represents the data
    myPoint = Ext.each(mySeries.items, function(point) {
        return myRecord.id === point.storeItem.id;
    }),

    // the horizontal position of the point
    xCoord = point.point[0],

    // check for any previously drawn vertical line
    myLine = myChart.surface.items.findBy(function(item) {
        item.id === 'vert'
    });

    // if there is no previously drawn line add it to the "surface"
    if (!myLine) {

        myChart.surface.add({
            id: 'vert', // an id so that we can find it again later
            type: 'rect',
            width: 4,
            height: myChart.surface.height, // the same height as the chart
            fill: 'black',
            opacity: 0.5, // some transparency might be good
            x: xCoord,
            y: 0 // start the line at the top of the chart
        });

    // if we already had a line just reposition it's x coordinate            
    } else {

        myLine.setAttributes({
            translate: {
                x: xCoord,
                y: 0
            }

        // I think the chart gets drawn right after the refresh event so 
        // this can be false, I haven't tested it though
        }, false);

    }
});

If you are using the MVC pattern your event handler would look a little different (you wouldn't use myChart.on()).