1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    hrishirise is on a distinguished road

      0  

    Default Charts 3.0 how to create Dynamic markers or marker customizations.

    Charts 3.0 how to create Dynamic markers or marker customizations.


    Hi,
    I am working on Line charts. I want to be able to customize look and feel of each Marker based on the data type.

    How do i do that.

    Currently, the markers are set for entire chart. like this.
    Sprite marker = Primitives.diamond(0, 0, 2);
    marker.setFill(RGB.GREEN);
    series.setMarkerConfig(marker);


    Please let me know

  2. #2
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    You could use the setRenderer() method on line series. This gives you access to each marker sprite, along with its corresponding store index, as it is drawn.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    hrishirise is on a distinguished road

      0  

    Default


    Thanks Brendan,
    That helps in step 1 for me.That works for changing Marker colors and attributes etc.
    But, if i want to "replace" the marker and update it with something like Primitives.diamond or a new customized marker its not working. Its just changing colors of existing Marker. I am using "setComponent" method to set a complete new component style.

    series.setRenderer(new SeriesRenderer<XXX>() {
    @Override
    public void spriteRenderer(Sprite sprite, int index, ListStore<XXX> store) {
    if(store.get(index).getEvents()!=null){
    DrawComponent dc = new DrawComponent();
    Sprite marker = Primitives.diamond(0, 0, 12);
    marker.setFill(RGB.GREEN);
    dc.addSprite(marker);
    sprite.setComponent(component);
    } else {
    DrawComponent dc = new DrawComponent();
    Sprite marker = Primitives.circle(0, 0, 12);
    marker.setFill(RGB.BLUE);
    dc.addSprite(marker);
    sprite.setComponent(component);
    }
    }
    });


    Please do let me know, if you see anything wrong or any way i can do this.

    Thanks,
    Hrishi

  4. #4
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    Unfortunately you cannot change the sprite type in series renderers for performance reasons. However PathSprite does have a copy constructor for all sprite types, which you could use on the circle primitive. For example:
    Code:
    final PathSprite diamond = Primitives.diamond(0,0,12);
    final PathSprite circle = new PathSprite(Primitives.circle(0,0,12);
    series.setRenderer(new SeriesRenderer<XXX>() { 
    @Override
    public void spriteRenderer(Sprite sprite, int index, ListStore<XXX> store) {
    if(store.get(index).getEvents()!=null){
    sprite.setCommands(diamond.getCommands);
    sprite.setFill(RGB.GREEN);
    } else {
    sprite.setCommands(circle.getCommands);
    sprite.setFill(RGB.GREEN);
    } 
    }
    });
    Also keep in mind you can also use Sprites that are not in the Primitives class for markers.

Thread Participants: 1