1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    11
    Vote Rating
    0
    Jemt is on a distinguished road

      0  

    Default Radar Chart + Store with proxy = x axis and labels becomes invisible

    Radar Chart + Store with proxy = x axis and labels becomes invisible


    Hello,

    I have created a simple Radar chart that loads data through a store. The store is based on a model that loads data through an AJAX proxy.

    This is what I expect (click for full size):

    Expected.png


    This is what I get (click for full size):
    Labels and x axis is invisible - but labels are clearly still consuming space (notice spacing on left side of chart)Actual.png

    The first image was created using a model and store with fixed data (not loaded through a proxy).

    My code (javascript - model, store and chart)

    Code:
    Ext.require('Ext.chart.*');
    
    
    Ext.onReady(function()
    {
        Ext.define("Company.model.Developer",
        {
            extend : "Ext.data.Model",
            /*fields : [ "Id", "Task", "HFT", "AAV", "JIT" ],*/
            proxy :
            {
                type : "ajax",
                api :
                {
                    read : "_data/RadarData.json",
                },
                reader :
                {
                    type : "json"
                }
            }
        });
    
    
        var store = Ext.create("Ext.data.Store",
        {
            model : "Company.model.Developer",
            /*data :
            [
                { Id : "1", Task : "Analysis",            HFT : 05, AAV : 05, JIT : 15 },
                { Id : "2", Task : "Design",            HFT : 05, AAV : 05, JIT : 05 },
                { Id : "3", Task : "Development",        HFT : 45, AAV : 60, JIT : 30 },
                { Id : "4", Task : "Implementation",    HFT : 05, AAV : 00, JIT : 05 },
                { Id : "5", Task : "Test",                HFT : 15, AAV : 10, JIT : 25 },
                { Id : "6", Task : "Documentation",        HFT : 00, AAV : 00, JIT : 00 },
                { Id : "7", Task : "Other",                HFT : 25, AAV : 20, JIT : 20 }
            ],*/
            autoLoad: true,
        });
    
    
        var chart = Ext.create("Ext.chart.Chart",
        {
            renderTo : Ext.getBody(),
            width : 600,
            height : 400,
            insetPadding : 20,
            animate : true,
            theme : "Category5",
            store : store,
            legend :
            {
                position : "right"
            },
            axes :
            [
                {
                    type : "Radial",
                    position : "radial",
                    label :
                    {
                        display : true
                    },
                    minimum : 10,
                    maximum: 70
                }
            ],
            series :
            [
                {
                    type : "radar",
                    xField : "Task",
                    yField : "HFT",
                    showInLegend : true,
                    showMarkers : true,
                    markerConfig :
                    {
                        radius: 3
                    },
                    style :
                    {
                        "stroke-width" : 1,
                        fill : "none"
                    }
                },
                {
                    type : "radar",
                    xField : "Task",
                    yField : "AAV",
                    showInLegend : true,
                    showMarkers : true,
                    markerConfig :
                    {
                        radius: 3
                    },
                    style :
                    {
                        "stroke-width" : 1,
                        fill : "none"
                    }
                },
                {
                    type : "radar",
                    xField : "Task",
                    yField : "JIT",
                    showInLegend : true,
                    showMarkers : true,
                    markerConfig :
                    {
                        radius: 3
                    },
                    style :
                    {
                        "stroke-width" : 1,
                        fill : "none"
                    }
                }
            ]
        });
    });


    My data (_data/RadarData.json)

    Code:
    
    {
        success: true,
        metaData:
        {
            root: "data",
            idProperty: "Id",
            fields : [ "Id", "Task", "HFT", "AAV", "JIT" ],
        },
        data:
        [
            { Id : "1", Task : "Analysis",            HFT : 05, AAV : 05, JIT : 15 },
            { Id : "2", Task : "Design",            HFT : 05, AAV : 05, JIT : 05 },
            { Id : "3", Task : "Development",        HFT : 45, AAV : 60, JIT : 30 },
            { Id : "4", Task : "Implementation",    HFT : 05, AAV : 00, JIT : 05 },
            { Id : "5", Task : "Test",                HFT : 15, AAV : 10, JIT : 25 },
            { Id : "6", Task : "Documentation",        HFT : 00, AAV : 00, JIT : 00 },
            { Id : "7", Task : "Other",                HFT : 25, AAV : 20, JIT : 20 }
        ]
    }

    Additional information

    My code is available here for download (~ 2 K.

    Enabling the code disabled (
    in green) will fix the problem - but obviously that's no help - I need to be able to load data through a proxy.

    This has been tested with Ext JS 4.0.7 and 4.1.0 (downloaded today) - both with the same result.

    Client platform: Chrome
    18.0.1025.151 (Developer Build 130497 Linux) Ubuntu 11.10

    I would really appreciate any help on this. Thanks in advance.

    Best regards
    Jimmy Thomsen

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    11
    Vote Rating
    0
    Jemt is on a distinguished road

      0  

    Default


    Nobody ?

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    25
    Vote Rating
    1
    lmalgras is on a distinguished road

      0  

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar