1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    74
    Answers
    7
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default Answered: Line chart isn't showing

    Answered: Line chart isn't showing


    Hi Guys,

    I'm currently working on charts and have it runnning for bar charts. But for some reason I can't display a line chart. I use the following code:

    Code:
    Ext.define('TestChart.view.Main',
    {
        extend: 'Ext.Panel',
        xtype: 'main',
        
        requires: [ 'Ext.chart.CartesianChart',
                    'Ext.chart.axis.Numeric',
                    'Ext.chart.axis.Category',
                    'Ext.chart.series.Line',
                    'Ext.chart.interactions.PanZoom'
                    ],
    
    
        config:
        {
            layout: 'fit',
            
            items: [
            {
                xtype: 'chart',
                store: Ext.create('Ext.data.Store',
                {
                    fields: [ "Month", "Serie1", "Serie2", "Serie3" ],
                    data: [
                    { "Month": "jan", "Serie1": 1, "Serie2": 2, "Serie3": 9 },
                    { "Month": "feb", "Serie1": 3, "Serie2": 3, "Serie3": 8 },
                    { "Month": "mar", "Serie1": 6, "Serie2": 4, "Serie3": 7 },
                    { "Month": "apr", "Serie1": 3, "Serie2": 5, "Serie3": 3 },
                    { "Month": "may", "Serie1": 9, "Serie2": 6, "Serie3": 4 },
                    { "Month": "jun", "Serie1": 8, "Serie2": 4, "Serie3": 7 },
                    { "Month": "jul", "Serie1": 5, "Serie2": 4, "Serie3": 8 },
                    { "Month": "aug", "Serie1": 3, "Serie2": 4, "Serie3": 8 },
                    { "Month": "sep", "Serie1": 2, "Serie2": 4, "Serie3": 8 },
                    { "Month": "okt", "Serie1": 1, "Serie2": 3, "Serie3": 9 },
                    { "Month": "nov", "Serie1": 3, "Serie2": 2, "Serie3": 5 },
                    { "Month": "dec", "Serie1": 4, "Serie2": 2, "Serie3": 4 }
                ]
                }),
                background: 'white',
                interactions: 'panzoom',
                series: [
                {
                    type: 'line',
                    xField: 'Month',
                    yField: [ 'Serie1', 'Serie2', 'Serie3' ],
                    style:
                    {
                        stroke: 'rgb(40,40,40)'
                    },
                    subStyle:
                    {
                        fill: [ "#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111" ]
                    }
                } ],
                axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    minimum: 0,
                    maximum: 10,
                    grid: true
                },
                {
                    type: 'category',
                    position: 'bottom',
                    title: 'test',
                    grid: true
                } ]
            } ]
        }
    });
    I expect to show the months in the bottom part and 3 series on the left. All I see is one line sitting just above 0. I can't seem to figure out what I'm doing wrong. Could you please help me? I'm using ST2.3.1, thanks!

  2. I already got it working! We need to loop over data and add a new serie to the series for each line.So what I did now:
    Code:
    var yField = ['Serie1', 'Serie2', 'Serie3'];
    for (var i = 0, j = yField.length; i < j; i++)
    {
    series.push(            { 
        type: 'line', 
        xField: 'Month', 
        yField: yField[i], 
        style:                { 
            stroke: 'rgb(40,40,40)'
        }
    }); 
           }

  3. #2
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    74
    Answers
    7
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default


    I already got it working! We need to loop over data and add a new serie to the series for each line.So what I did now:
    Code:
    var yField = ['Serie1', 'Serie2', 'Serie3'];
    for (var i = 0, j = yField.length; i < j; i++)
    {
    series.push(            { 
        type: 'line', 
        xField: 'Month', 
        yField: yField[i], 
        style:                { 
            stroke: 'rgb(40,40,40)'
        }
    }); 
           }

  4. #3
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,931
    Answers
    328
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Thanks for the update and sharing your solution. You can also define each series separately on your chart as I have done in the following example. https://fiddle.sencha.com/#fiddle/3b1
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  5. #4
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    The Netherlands
    Posts
    74
    Answers
    7
    Vote Rating
    4
    zwikske is on a distinguished road

      0  

    Default


    Agreed, but then it's harder to make it dynamic .

Thread Participants: 1

Tags for this Thread