1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    29
    Vote Rating
    0
    jonathanmv is on a distinguished road

      0  

    Default Unanswered: How to repaint markers on line chart?

    Unanswered: How to repaint markers on line chart?


    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

    Code:
    //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));
        }
    });
    Code:
    //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

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,363
    Answers
    432
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    29
    Vote Rating
    0
    jonathanmv is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    Wilmer is on a distinguished road

      0  

    Default


    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

Thread Participants: 2

Tags for this Thread