Results 1 to 3 of 3

Thread: xtype:'chart' not displaying data from the store

  1. #1

    Default xtype:'chart' not displaying data from the store

    ***Reposting because couldn't find the previous post***

    I am using ExtJS charts for the first time and also MVC in ExtJS for the first time.
    My application has below structure.
    Application.js file which has below code:-
    Code:
    Ext.application({
        name: 'TestApp',
        controllers: [
            'MainController'
        ],
        launch: function() {
               Ext.create('Ext.container.Container', {
                    layout: 'fit',
                    renderTo: 'main-body-content',
                    id: 'container_id',
                    items: [
                        {
                            xtype: 'mainViewPanel'
                        }
                    ]
                });
    });
    ====

    Controller(Entry of controller is made in the application.js file) :-
    Code:
    Ext.define('Testapp.controller.MainController', {
        extend: 'Ext.app.Controller',
    
        models: [
            'TestApp.model.mainModel'
            //Keep/Create adding new Model files as and when required, and add the entry here with proper namespace.
        ],
    
        stores: [
          'TestApp.store.mainStore'
            //Keep/Create adding new Store files as and when required, and add the entry here with proper namespace.
        ],
    
        views: [
            'TestApp.view.mainView'
            //Keep/Create adding new View files as and when required, and add the entry here with proper namespace.
    
        ],
     
        init: function(application) {
                console.log("Controller : init");
        },
    
     
         onLaunch: function() {
                 console.log('Controller : onLaunch');
        },
    
    });
    ====
    View(Entry of the view is made in Controller and also an xtype is added in application.js)
    Output which I am currently getting : I can see the empty panel on the UI.
    And using the sencha Chrome plugin, I can see the store returning the records.

    Code:
    Ext.define('TestApp.view.mainView', {
    
        extend: 'Ext.form.Panel',
        alias: 'widget.mainViewPanel',
    
        items : [
                {
                    xtype: 'chart',
                    id: 'firstChart',
                    store : 'TestApp.store.mainStore',
                    axes: [
                        {
                            title: 'Cases',
                            type: 'Numeric',
                            position: 'left',
                            fields: ['count'],
                            minimum: 0,
                            maximum: 100
                        },
                        {
                            title: 'Type of Case',
                            type: 'Numeric',
                            position: 'bottom',
                            fields: ['fill']
                        }
                    ],
                   series: [
                       {
                           type: 'bar',
                           xField: 'fill',
                           yField: 'count'
                       }
                   ],
                   listeners: {
                                 /*'render': {
                                     fn: function() {
                                         console.log("View:Chart:Render");
                                         console.log(this);
                                     },
                                     scope: this,
                                     single: true
                                 },
                                 'afterrender': {
                                     fn: function() {
                                         console.log("View:Chart:AfterRender");
    
                                     },
                                     scope: this,
                                     single: true
                                 }*/
    
                         },
                }
        ],
    
        initComponent:function()
         {
          this.title='Title of the Page/Panel';
          console.log("View : initComponent() of View");
          this.border=true;
          this.callParent(); // Renders the Panel Components
         },
      },
    );
    ====
    Store : I have one store currently, which makes an ajax call to java backend and returns the data.
    When I see the network of developers tools and I can see that proper request to the backend has happened and data is also coming in json format.

    Code:
    Ext.define('TestApp.store.mainStore', {
        extend: 'Ext.data.Store',
        model: 'TestApp.model.mainModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url:  'ajax/testapp.com.Handler/getTotals',
            extraParams: {
                sort: 'name',
                dir: "ASC"
            },
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });
    ====
    Model : I have one model currently, which has the entries relevant tot he fields which I get in response of the ajax call happening from the store.
    Entry of the model is done in store and controller.

    Code:
    Ext.define('TestApp.model.mainModel', {
        extend: 'Ext.data.Model',
        fields: [
                 {name: 'id', type:'string'},
                 {name: 'type', type:'string'},
                 {name: 'label', type:'string'},
                 {name: 'count', type:'int'},
                 {name: 'color', type:'string'},
                 {name: 'fill', type:'string'}
                //Keep adding the fields by seeing the JSON response
             ]
         },
    );
    Problem :
    I am not sure if just by mapping the store to the xtype:chart in the view, will the store be mapped to the chart, or do we need to do something additional.
    Currently I can also see a blank panel with the title which I have given to the panel. And on the console, I do not see any error.
    Secondly, I can see all the files getting loaded, I confirmed it using the developers tool, which I am mentioning to say that the mapping of all the files and its structure is happening properly.

  2. #2

    Default

    No reply on this one???
    #Help

  3. #3

    Default

    Quote Originally Posted by umangsamani View Post
    No reply on this one???
    #Help
    This is fixed, the issue was with the Normalize.css stylesheet which was added to my project as part of HTML5 migration.
    The svg which renders has a [hidden=0] attribute to it, and the stylesheet makes it display:none.
    After modifying the Normalize.css, it is now showing the charts properly and hence closing it.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •