Hybrid View

  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,084
    Answers
    112
    Vote Rating
    95
    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,084
    Answers
    112
    Vote Rating
    95
    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,084
    Answers
    112
    Vote Rating
    95
    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(),
    ...
    
    });

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi