1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default Answered: Scatter Plot, Highlight Certain Points According to Flag in Data

    Answered: Scatter Plot, Highlight Certain Points According to Flag in Data


    Hi all,

    I want to figure out a way to highlight certain points in my scatter plot. I've spent some time looking into it but have found no easy way. If I was plotting data that looked like this:

    numberOne: 50, numberTwo:45, highlight:0
    numberOne: 65, numberTwo:30, highlight:0
    numberOne: 35, numberTwo:50, highlight:1
    numberOne: 25, numberTwo:45, highlight:1
    numberOne: 60, numberTwo:75, highlight:0

    So the points representing the third and fourth row above would show up as a different shape or color or size. Does anyone have any insight on this?

    thank you!

  2. I figured out a way to color the markers differently according to a flag in the data. I used a renderer in the series, here is the code:

    Code:
                    renderer:function(sprite, record, attr, index){
                            console.log(record.get('highlight'));
                            console.log(sprite);
                            var highlight = record.get('highlight');
                            var color = null;
                            if (highlight == 1) {
                                    color = "#1BE01B";
                            }else{
                                    color = "#E81717";
                            }
                                    return Ext.apply(attr, { fill: color });
                    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    All markers and the entire line in each series are going to be the same.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default


    Thanks for the reply!

    Would there be a way to break up a store into two different series depending on some flag variable in the store. Like having each series represent different rows of data from the same store. I know you cant have more than one store associated with a chart

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    Answers
    6
    alex9311 is on a distinguished road

      0  

    Default


    I figured out a way to color the markers differently according to a flag in the data. I used a renderer in the series, here is the code:

    Code:
                    renderer:function(sprite, record, attr, index){
                            console.log(record.get('highlight'));
                            console.log(sprite);
                            var highlight = record.get('highlight');
                            var color = null;
                            if (highlight == 1) {
                                    color = "#1BE01B";
                            }else{
                                    color = "#E81717";
                            }
                                    return Ext.apply(attr, { fill: color });
                    }

Thread Participants: 1

Tags for this Thread