1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    bogdansarbu is on a distinguished road

      0  

    Default Unanswered: Ext.chart.series.Line not running properly the renderer function

    Unanswered: Ext.chart.series.Line not running properly the renderer function


    I tried to create a Line Chart in Sencha Touch 2.1.1 with a specialised renderer. According to documentation I should create a renderer function which receives following parameters: (sprite, record, attributes, index, store)

    When in the console I type "attributes" to check the content of it, it is always empty. The same happens for sprite and index.

    Here is the code that I run:

    Code:
    Ext.define('GabChart.view.Main', {
        extend: 'Ext.Panel',
        xtype: 'main',
        requires: [
            'Ext.chart.CartesianChart',
            'Ext.chart.axis.Numeric',
            'Ext.chart.axis.Category',
            'Ext.chart.series.Line'
        ],
        config: {
            layout: 'vbox',
            items: [
                {
                    xtype: 'titlebar',
                    docked: 'top'
                },
                {
                    xtype: 'container',
                    layout: 'fit',
                    flex: 1,
                    items: [
                        {
                            xtype: 'chart',
                            store: {
                                id: 'chartStore',
                                fields: ['Name', 'Year2'],
                                data: [
                                    { "Name": "Week 1", "Year2": 22.35},
                                    { "Name": "Item-1", "Year2": 0.41},
                                    { "Name": "Item-2", "Year2": 14.80},
                                    { "Name": "Item-3", "Year2": 12.98},
                                    { "Name": "Item-4", "Year2": 4.44},
                                    { "Name": "Item-5", "Year2": 8.26},
                                    { "Name": "Item-6", "Year2": undefined},
                                    { "Name": "Item-7", "Year2": undefined},
                                    { "Name": "Item-8", "Year2": undefined},
                                    { "Name": "Item-9", "Year2": undefined},
                                    { "Name": "Item-10", "Year2": undefined},
                                    { "Name": "Item-11", "Year2": undefined},
                                    { "Name": "Item-12", "Year2": undefined},
                                    { "Name": "Item-13", "Year2": undefined},
                                    { "Name": "Item-14", "Year2": undefined}
                                ]
                            },
                            //define x and y-axis.
                            legend: {
                                position: 'bottom'
                            },
    
    
                            //define x and y-axis.
                            axes: [
                                {
                                    type: 'numeric',
                                    position: 'left'
                                },
                                {
                                    type: 'category',
                                    visibleRange: [0, 1],
                                    position: 'bottom'
                                }
                            ],
                            //define the actual series
                            series: [{
                                type: 'line',
                                xField: 'Name',
                                yField: 'Year2',
                                title: 'Step line',
                                style: {
                                    stroke: "#a61120",
                                    renderer: function(sprite, record, attributes, index, store){
                                        debugger
                                    },
                                },
                                marker: {
                                    type: 'circle',
                                    stroke: '#0d1f96',
                                    fill: '#115fa6',
                                    lineWidth: 1,
                                    radius: 4,
                                    shadowColor: 'rgba(0,0,0,0.7)',
                                    shadowBlur: 10,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3
                                }
                            }]
                        }
                    ]
                }
            ]
        }
    });
    I want to write a renderer for Touch like suggested here for Ext JS - which works: #6

    How can I make the Chart to run my renderer function with the correct filled parameters?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,795
    Answers
    3466
    Vote Rating
    834
    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

      0  

    Default


    There isn't going to be anything you can do to magically get this to work via a config or anything. This could be a bug or it could be at that time it has no attributes.
    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.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    bogdansarbu is on a distinguished road

      0  

    Default


    Hi mitchellsimoens,

    I looked more through the source code and it seems that there is a mismatch between the documentation and the actual code. Please let me know if I my conclusion is wrong.

    Documentation states that the renderer receives following arguments: (sprite, record, attributes, index, store)

    In the Ext.chart.series.sprite.Line the renderer is called with fewer arguments in the method "renderAggregates":

    Code:
                    if (attr.renderer) {
                        attr.renderer.call(this, markerCfg, this, i, this.getDataItems().items[i]);
                    }
    If I should deduce the arguments the renderer is given, then it would be: (markerCfg, sprite, index, record).

    What I am trying to do is to implement a renderer that will create gaps in the Line series when the Y data is "undefined".

    Do you think that it is possible to implement that through a renderer? Or should I start (which I do not prefer) to modify the "drawStroke" method of "Ext.chart.series.sprite.Line"?

    Or maybe better, when will you support gaps in Line series in Sencha Touch 2?

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    bmatto is on a distinguished road

      0  

    Default


    I was able to create gaps as follows in the renderer method...

    Code:
    if(rendererData.store.getAt(index-1) && rendererData.store.getAt(index-1).get('rating_txt') === 'WR' && config.type === 'line'){
         return { strokeStyle: 'transparent', fillStyle : 'transparent' };
    }
    Where rating_txt is a member of the record we are not charting and requires a gap. To your point I suppose you would test the member that when undefined you want to hide.

Thread Participants: 2

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