How to repaint markers on line chart?

[jonathanmv]

I'm using a line chart and i'm allowing the user to add/remove the markers shown in the chart.
The markers that i'm showing are custom shapes, type image. For each marker I have a custom tooltip, so when you mouse over the image you'll see some information

If the chart is blank and a marker (image) is added works fine. If the marker is removed the image is still being shown, however the marker is not there... There's no tooltip poping up when mousing over the image. If I add another marker, the image from the first marker is moved to the new marker position.

If there are 2 markers with the same image and I remove one of the markers, the image is removed too and the only image that remains is the one for the only marker in the chart.

Below there's some of the code i'm using

//For adding a custom shape (the marker image)
Ext.apply(Ext.chart.Shape, {
CustomShape1: function (surface, opts) {        
        return surface.add(Ext.apply({
            type: "image",
            width:32,
            height:32,
            src: "images/customshape1.png"
        }, opts));
    }
});

//Series chart configuration
              .........
              series: [{
                    type: 'line',
                    highlight: true,
                    selectionTolerance: 32,
                    axis: ['left', 'bottom'],
                    xField: 'xField',
                    yField: 'CustomShape1',
                    markerConfig: {
                        type: 'CustomShape1',
                        size: 32
                    },
                    listeners: {
                        scope: me,
                        itemmousedown: me.onItemClick
                    }
                }],
             ........

The markers are added/removed by changing the data on the store of the chart.
Thank you in advance for your help

[slemmon]

Any chance you could throw up an example in JSFiddle perhaps? Something to demo what you're working with?

[jonathanmv]

Hey slemmon

Thank you for replying. I got a JSFiddle http://jsfiddle.net/MFMDb/10/ but there it works just fine. You can use the add button to add items and the remove button to remove the one in the 0 position of the store or click on the marker to remove the clicked one.

In my application if you click on the marker and it's the only marker in the chart the image will remain there even when the marker is not there...

Another issue I'm facing with the ExtJS 4.1.x version is that lines are being drawn even when the configuration tries to make them transparent. As you can see, once the chart loads you don't get lines, but after adding a marker or resizing the window, the lines appear. Any idea? I'm stuck in ExtJS 4.0.7 because of this.

[Wilmer]

I'm having the same issue with the transparency in the lines. at first works fine, but after the window is resized, the lines become visible. "forgetting" their initial style attributes


does anyone knows a way to make it work. it's now almost two months and I can't find a way