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,754
    Answers
    3462
    Vote Rating
    828
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi