Need more than 9 Series in LineChart

Hi,

i try to generate a chart with different count of series.

If i had more than 9 series i get the following error:

• Uncaught TypeError: Cannot call method 'indexOf' of undefined
  • Ext.chart.series.Series.Ext.extend.getColorFromStyle touch-charts-debug.js:13730
  • Ext.chart.series.Series.Ext.extend.getLegendColor touch-charts-debug.js:13745
  • (anonymous function) touch-charts-debug.js:7250

In Line 13739 is an check if me.style exist. If not it should return something else. But is does not return anything.

How can i use more then 9 series? I think i must add more than 9 possible colors?

Thanks for Help

If you want to get the same error you can use the line example of sencha touch charts.

Replace the sereies (line 105 - 139) with:

Code:

---

series: [{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },

                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'android',
                    title: 'Android'
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'ipad',
                    title: 'iPad'
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                },{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },

                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'android',
                    title: 'Android'
                }]

---

Then you have 10 series and you will get the same error.

:-?

As Workaround i give all Series an own style and it works fine now. Maybe someone can find a better solution.

In the js-File there are testings for me, me.style,

With 10 series me.sytle exists but the object hast no params.

If me.style does not exist it try to use me.stroke. me.stroke is not set too.

After this me.stroke.indexOf failed.

I have the same problem, so if someone finds a solution i'm interested !

If you want to add more series in line chart you just add this into your themeList.js

Code:

---

{        "selector": "chart series:nth-child(10)",
        "style": {
            "fill": "#FE1817"
        },
        "specificity": [
            0,
            1,
            2
        ]
    },
    {
        "selector": "chart series:nth-child(11)",
        "style": {
            "fill": "#005337"
        },
        "specificity": [
            0,
            1,
            2
        ]
    },
    {
        "selector": "chart series:nth-child(12)",
        "style": {
            "fill": "#0C02FB"
        },
        "specificity": [
            0,
            1,
            2
        ]
    },
    {
        "selector": "chart series:nth-child(13)",
        "style": {
            "fill": "#FF9934"
        },
        "specificity": [
            0,
            1,
            2
        ]
    },
    {
        "selector": "chart series:nth-child(14)",
        "style": {
            "fill": "#FE64CA"
        },
        "specificity": [
            0,
            1,
            2
        ]
    },
    {
        "selector": "chart series:nth-child(15)",
        "style": {
            "fill": "#9E47FC"
        },
        "specificity": [
            0,
            1,
            2
        ]
    },

---

Is there a workaround this issue that does not involve touching the Sencha core?