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
    37,217
    Answers
    3519
    Vote Rating
    859
    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