Gradient Chart Question

[jptec]

Hi,

 

I want to do a gradient area chart  like the attached.

 

Can I achieve like that gradient?

 

I find some example like Bar-Chart-With-Gradient-Example in Sencha Touch like

 

https://gist.github.com/amrishodiq/1369480

 

Also I find it in sencha help .

 

http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.chart.CartesianChart-cfg-gradients

 

 

But I dont know how to use it .

 

Please advise.

[Sherzod]

Hi,

 

Which Series are you using, TUnimAreaSeries ?!

[jptec]

Yes AreaSeries , exactly as the attached Picture 

[Sherzod]

Hi,

 

Can you try this approach for now?!:

 

1. UnimChart -> ClientEvents -> UniEvents -> Ext.chart.CartesianChart[chart] -> function chart.beforeInit:

function chart.beforeInit(sender, config)
{
    // gradients config
    config.gradients = [{
        id: 'gradientId1',
        type: 'linear',
        angle: 45,
        stops: [{
            offset: 0,
            color: 'red'
        }, {
            offset: 1,
            color: 'yellow'
        }]
    }, {
        id: 'gradientId2',
        type: 'radial',
        stops: [{
            offset: 0,
            color: '#555',
        }, {
            offset: 1,
            color: '#ddd',
        }]
    }]
}

2. UnimChart -> ClientEvents -> ExtEvents -> Ext.chart.CartesianChart[chart] -> function chart.painted:

function chart.painted(sender, eOpts)
{
    var me=this;
    // for UnimAreaSeries1
    me.getSeries()[0].sprites[0].setAttributes({fillStyle: 'url(#gradientId1)'});
    me.getSeries()[0]._style.fillStyle='url(#gradientId1)';

    // for UnimAreaSeries2
    me.getSeries()[1].sprites[0].setAttributes({fillStyle: 'url(#gradientId2)'});
    me.getSeries()[1]._style.fillStyle='url(#gradientId2)';
}

 

* still need to change the color of the legend too, but at the moment it can be done with Brush.Color

 

Try,

 

Best regards.

[jptec]

Sorry for later reply. It works . Thank you