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

[bogdansarbu]

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:

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?

[mitchellsimoens]

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.

[bogdansarbu]

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":

                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?