Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default Answered: How to change the color of a POINT based on it's value

    Answered: How to change the color of a POINT based on it's value


    Hello all,

    I have a line chart and I'd like to change the color of the point based on it's value (or really any time, but based on value makes for a good example). I have the following code, and you can mess with it at the following link here. I think this could be useful for a lot of people to know how to do and I can't find any examples of it anywhere.

    Code:
    Ext.onReady(function() {
    Ext.define('tempModel', {
    extend: 'Ext.data.Model',
    fields: ['letter', 'number']
    });
    
    var tempStore = Ext.create('Ext.data.Store', {
    model: 'tempModel',
    data: [{ letter:"A", number: 48},
    { letter:"B", number: 72},
    { letter:"C", number: 64},
    { letter:"D", number: 29},
    { letter:"E", number: 37},
    { letter:"F", number: 51},
    { letter:"G", number: 35},
    { letter:"H", number: 90},
    { letter:"I", number: 61},
    { letter:"J", number: 19} ]
    });
    
    Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 470,
    height: 300,
    store: tempStore,
    axes: [
    {
    title: 'Numbers',
    type: 'Numeric',
    position: 'left',
    fields: ['number'],
    },
    {
    title: 'letter',
    type: 'Category',
    position: 'bottom',
    fields: ['letter'],
    title: 'letter',
    grid: true,
    label: {
    rotate: {
    degrees: 90
    }
    }
    }],
    series: [
    {
    type: 'line',
    xField: 'letter',
    yField: 'number',
    renderer : function (sprite, record, attributes, index, store) {
    /*
    if (record.number <= 30) {
    attributes.fill = '#ff0000';
    } else if (record.number >= 70) {
    attributes.fill = '#00ff00';
    } else {
    attributes.fill = '#0000ff';
    }
    */
    return attributes;
    },
    tips : {
    trackMouse : true,
    width : 200,
    height: 40,
    renderer : function(storeItem, item) {
    this.update(storeItem.get('letter') + ' ' + storeItem.get('number'));
    }
    }
    }
    ]
    });
    });
    In the series, I have a renderer, but I'm not sure how to get the value of the current record. I've tried record.number and record.get('number') and store.getAt(index) (which get's you the record again)... I'm stuck!

    Any suggestions would be greatly appreciated!

    Thanks

  2. the first time, chart.series.items[0].items[index] is undefined. thats what is causing the problem. You can get it working using the following:

    Code:
    if(chart.series.items[0].items[index])
       console.log(chart.series.items[0].items[index].storeItem.data.number);
    Now the value of the number field will be printed!

  3. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,074
    Answers
    111
    Vote Rating
    94
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    I looked up the API Documentation for line series: http://docs.sencha.com/ext-js/4-1/#!...e-cfg-renderer

    the comments on it say that there is some problem with the record (is not always correct) and recommend that instead of using store.getAt(index), you should use the following:

    Code:
    var correctRecord = chart.series.items[known series index].items[index].storeItem;
    where known series index would be 0 in your case if you are using only one series.

  4. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    Thanks for the link to that, it almost helped, but it doesn't seem to be working.

    In the code example he has:

    Code:
    var chartId = sprite.surface.id;
    var chart = Ext.getCmp(chartId);
    When I console.log chart, I don't get a value (I get undefined). I think that's because I'm doing this while rendering the chart, and this example is for after the chart has been rendered.

    So is there a way for me to do this while creating the chart? Or am I going to end up creating the chart, and then going over it a second time and styling it as needed?

  5. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,074
    Answers
    111
    Vote Rating
    94
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    you can do it inside the chart creation. you should be able to access the chart itself somehow inside the renderer function. getCmp will return undefined because you are not defining an id for the chart. Its not recommended (using an id) but for now, try the following: assign an id to your chart and then inside your renderer, use that id to get the chart. see if that works.

    var chart = Ext.getCmp('chart_id');

  6. #5
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    What I'm saying is that with the jsfiddle I set up, you can see that while the first line of the code that gets the chartId works correctly, the second line that gets the chart object does not.

    Code:
    var chartId = sprite.surface.id; // this works and returns a valid chartId
    var chart = Ext.getCmp(chartId); // this returns undefined

  7. #6
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,074
    Answers
    111
    Vote Rating
    94
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    getCmp works with a unique id which is not what chartId holds. see the documentation for Ext.getCmp(). the id should be configured on the chart.

    Code:
    Ext.create('Ext.chart.Chart', {
      id: 'chart_id',  // this is the id which you can use in Ext.getCmp('chart_id');
      renderTo: Ext.getBody(),
    ...
    
    });

  8. #7
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    You've been a great help so far, and I think we're almost there.

    I gave the chart a unique id, and now it almost works, except I get an error when trying to access the "storeItem".

    You can check out the jsfiddle here. If you append ".storeItem" to the console.log line in the renderer you'll see the error "Uncaught TypeError: Cannot read property 'storeItem' of undefined" happens.

  9. #8
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,074
    Answers
    111
    Vote Rating
    94
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    i cant see the console.log output in the fiddle you linked. dont know what is wrong. I can only try tomorrow when i get back to work.

    Anyway, one thing which you dont need is the id. "this" should be the series in the renderer function. Do console.log(this) and see if it is infact the series, if so, you dont need to first get the chart, you can use this.items[index]
    Last edited by Farish; 25 Oct 2012 at 10:22 AM. Reason: correction

  10. #9
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    If you're in chrome you can just hit control+shift+j to bring it up. In jsfiddle you won't be able to call Ext.stuff from the console though. You are correct though, I put in a 'console.log(this)' and it did return the series info, so maybe I can get the store info from that. Not sure. I'll update this thread if I find any more info.

  11. #10
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,074
    Answers
    111
    Vote Rating
    94
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    the first time, chart.series.items[0].items[index] is undefined. thats what is causing the problem. You can get it working using the following:

    Code:
    if(chart.series.items[0].items[index])
       console.log(chart.series.items[0].items[index].storeItem.data.number);
    Now the value of the number field will be printed!

Thread Participants: 1

Tags for this Thread