1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    0
    soniamru is on a distinguished road

      0  

    Default Unanswered: Load json data by ajax and memory proxy in Bar chart

    Unanswered: Load json data by ajax and memory proxy in Bar chart


    Hi
    I stucked with simple change in existing Bar chart example ( from sencha touch chart beta 2.0 release ). i want to load json data instead of generate function in example also i want to do it by Ext.data.store instead of json store.
    so in that store i am using proxy type Ajax or Memory... i used following code in example.js file ..
    Code:
    var tmp = {		      users:[
                    {Month: 'Jan', Amount1: 30, Amount2: 30,Amount3:90, 2009:40,2010:40,2011:40,number:123456},
                    {Month: 'Feb', Amount1: 30, Amount2: 30,Amount3:90, 2009:70,2010:41,2011:34,number:123456},
    		        {Month: 'Mar', Amount1: 30, Amount2: 30,Amount3:90, 2009:65,2010:111,2011:88,number:123456},
    		        {Month: 'April', Amount1: 30, Amount2: 30,Amount3:90, 2009:99,2010:102,2011:67,number:123456}
                  ]	
    	      };
    	 
       
        
    	Ext.define('User', {
        extend: 'Ext.data.Model',
        config: {
    		 idProperty: 'Month',
    			
             fields: ['Month', 'Amount1', 'Amount2', 'Amount3','2009','2010','2011','number']       
        }
       });
      
      
      
        // store1 i will assign directly in Bar chart code to store property. 
         store1 = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'User',
        data:tmp,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root : 'users'
            }
        },
             listeners: {
                 load: function(obj, records){
                     Ext.each(records, function(rec){
                         console.log(rec);
                     });
                 }
             }
    
    
       });
    for Ajax i am using
    Code:
    Ext.define('User', {    extend: 'Ext.data.Model',
        config: {
    		 idProperty: 'f1',
    			
             fields: ['f1', 'f2', 'f3', 'data1','data2']       
        }
       });
      
      
      
      
    	window.store1 = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'User',   
        proxy: {
            type: 'ajax',
            reader: {
                type: 'json',
                url : 'myjson.json'
            }
        }
    
    
       });
    Here in console log if i traverse object "values in data coming as undefined for each json field or tmp array.
    can you provide me sample code ???

    Thanks in advance!!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,994
    Answers
    3487
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The url config needs to go in the proxy not the reader.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

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

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    22
    Vote Rating
    0
    soniamru is on a distinguished road

      0  

    Default


    Thanks mitchellsimoens..!! i have another query .. i am able to retrieve data now and also i am getting axis for the same. but not bars... following ar changes.. so what can i do in bar code...

    Code:
    Ext.setup({    tabletStartupScreen: 'tablet_startup.jpg',
        phoneStartupScreen: 'phone_startup.jpg',
        tabletIcon: 'icon-ipad.png',
        phoneIcon: 'icon-iphone.png',
        glossOnIcon: false,
        requires: ['Ext.chart.Panel',
            'Ext.chart.axis.Numeric',
            'Ext.chart.axis.Category',
            'Ext.chart.series.Area'],
        onReady: function () {
            window.initExample('Bar Chart', "This example's uses many interactions.<br><ul>" +
                "<li>A horizontal swipe will change between a grouped and stacked bar chart.</li>" +
                "<li>Tapping two items will overlay an arrow and show a comparison in the Title area.</li>" +
                "<li>The chart can be zoomed vertically with a pinch gesture, and the panned by dragging.  For devices which do not support multi-touch, an extra toggle button is made available to switch between pan and zoom.  When zoomed in, arrow indicators will be overlayed on the chart to show that more data is available</li>" +
                "<li>Double-Tap will reset the chart back to the initial state</li>");
            var chartPanel = window.createPanel(Ext.create('Ext.chart.Chart', {
                layout: 'auto',
                themeCls: 'bar1',
                theme: 'Demo',
                store: store1,
                animate: true,
                shadow: false,
                legend: {
                    position: {
                        portrait: 'bottom',
                        landscape: 'right'
                    },
                    labelFont: '17px Arial'
                },
                interactions: [
                    {
                        type: 'reset'
                    },
                    {
                        type: 'togglestacked'
                    },
                    {
                        type: 'panzoom',
                        axes: {
                            left: {}
                        }
                    },
    					{
                        type: 'iteminfo',
                        listeners: {
                            show: function (interaction, item, panel) {
                                var storeItem = item.storeItem;
                                panel.setHtml(['<ul><li><b>Invoice Number: </b>' + storeItem.get('number') + '</li>',
                                    '<li><b>Invoice Amount: </b> ' + item.value[1] + '</li></ul>'].join(''));
                            }
                        }
                    },
                    'itemhighlight',
                    {
                        type: 'iteminfo',
                        gesture: 'longpress',
                        panel: {
                            items: [
                                {
                                    docked: 'top',
                                    xtype: 'toolbar',
                                    title: 'Details'
                                }
                            ]
                        },
                        listeners: {
                            'show': function (me, item, panel) {
                                panel.setHtml('<ul><li><b>Month:</b> ' + item.value[0] + '</li><li><b>Value: </b> ' + item.value[1] + '</li></ul>');
                            }
                        }
                    }/*,
                    {
                        type: 'itemcompare',
                        offset: {
                            x: -10
                        },
                        listeners: {
                            'show': function (interaction) {
                                var val1 = interaction.item1.value,
                                    val2 = interaction.item2.value;
    
    
                                chartPanel.descriptionPanel.setTitle(val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
                                chartPanel.headerPanel.getLayout().setAnimation('slide');
                                chartPanel.headerPanel.setActiveItem(1);
                            },
                            'hide': function () {
                                var animation = chartPanel.headerPanel.getLayout().getAnimation();
                                if (animation) {
                                    animation.setReverse(true);
                                }
                                chartPanel.headerPanel.setActiveItem(0);
                            }
                        }
                    }*/
                ],
                axes: [
                    {
                        type: 'Numeric',
                        position: 'bottom',
                        fields: ['2009', '2010', '2011'],
                        label: {
                            renderer: function (v) {
    							
                                return v.toFixed(0);
                            }
                        },
                        title: 'Invoice Amount(in $)',
                        minimum: 0
                    },
                    {
                        type: 'Category',
                        position: 'left',
                        fields: ['Month'],
                        title: 'Month of the Year'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        xField: 'Month',
                        yField: ['2009', '2010', '2011'],
      axis: 'right',
                        highlight: true,
                        showInLegend: true
                    }
                ]
            }));
        }
    });
    Code:
     Ext.define('User', {    extend: 'Ext.data.Model',
        config: {
    		 
    			
             fields: ['Month', 'Amount1', 'Amount2', 'Amount3','2009','2010','2011','number']       
        }
       });
      
      
    	window.store1 = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'User',
        proxy: {
    			type: 'ajax',
    			url: '../myjson.json',
    			reader: {
    				type: 'json',
    				rootProperty: 'users'
    			}
    		}
    
    
       });
    Code:
      {      "users":[
                    {
    		    "Month": "Jan", 
    		    "Amount1": 31,
    		    "Amount2": 30,
    		    "Amount3":90,
    		    "2009":40,
    		    "2010":40,
    		    "2011":40,
    		    "number":123456
    		 },
                     {
    		    "Month": "feb", 
    		    "Amount1": 32,
    		    "Amount2": 30,
    		    "Amount3":90,
    		    "2009":40,
    		    "2010":40,
    		    "2011":40,
    		    "number":123457
    		 },
    		 {
    		    "Month": "mar"', 
    		    "Amount1": 33,
    		    "Amount2": 30,
    		    "Amount3":90,
    		    "2009":40,
    		    "2010":40,
    		    "2011":40,
    		    "number":123458
    		 }
                  ]	
    	   }
    here actually whats wrong i want know ..sometime i get axis ..for previous format but not bars(graphics) ... and now in above code i am not getting anything... only prinitng 2009 ,2010,2011 ..

    Please help me out !!!

Thread Participants: 1