MVC and Sencha Charts

[Voyd]

I have been developing in Sencha Touch with an MVC style format. I have recently downloaded the charts package. Working with the examples on a simple index.html page, I can manipulate the data and recreate tables. My problem comes when trying to do similar things inside my views. I was wondering if Sencha could provide an example using MVC where you load a chart (of any kind) into a panel (inside some view). Below is a code snippet where I am attempting to do something of that nature and failing...most of the chart code is directly from an example.

var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];
var store1 = new Ext.data.JsonStore({
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: [{name: 'bob', data1: 21},
                {name: 'sam', data1: 33},
                {name: 'sarah', data1: 44},
                {name: 'wo', data1: 55},
                {name: 'when', data1: 66},
                {name: 'how', data1: 77}
            ]
        });
var chartPanel = new Ext.chart.Panel({
    // fullscreen: true, screws up the app -either way wont render properly
    title: 'Pie Chart',
  store: store1,
  shadow: false,
                  gradients: [{
                    'id': 'v-1',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(212, 40, 40)'
                        },
                        100: {
                            color: 'rgb(117, 14, 14)'
                        }
                    }
                },
                {
                    'id': 'v-2',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(180, 216, 42)'
                        },
                        100: {
                            color: 'rgb(94, 114, 13)'
                        }
                    }
                },
                {
                    'id': 'v-3',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(43, 221, 115)'
                        },
                        100: {
                            color: 'rgb(14, 117, 56)'
                        }
                    }
                },
                {
                    'id': 'v-4',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(45, 117, 226)'
                        },
                        100: {
                            color: 'rgb(14, 56, 117)'
                        }
                    }
                },
                {
                    'id': 'v-5',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(187, 45, 222)'
                        },
                        100: {
                            color: 'rgb(85, 10, 103)'
                        }
                    }
                }],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    minimum: 0,
                    maximum: 100,
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'Value'
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Reports'
                }],  
  series: [{
      type: 'column',
      axis: 'left',
    highlight: true,
    renderer: function(sprite, storeItem, barAttr, i, store) {
        barAttr.fill = colors[i % colors.length];
                        return barAttr;
                    },
                    label: {
                      field: 'data1'
                    },
                    xField: 'name',
                    yField: 'data1'
                }],
                interactions: [{
                    type: 'panzoom',
                    axes: ['bottom']
                }]
});








var panel2 = new Ext.Panel({
    title: 'Reports',
    layout:'fit',
    items: [{
        xtype: 'list',
        store: workcatalog.stores.WhichReport,
        itemTpl: new Ext.XTemplate(
            "{label}"
        ),
        onItemDisclosure: function(record, btn, index) {
            var store1 = workcatalog.stores.Users;
                console.log(store1.getAt(index).data.id);
                
                workcatalog.controllers.WorkController.setUser(store1.getAt(index).data.id);
                Ext.dispatch({
                    controller: workcatalog.controllers.WorkController,
                    action: "displayUsedBy",
                    animation: {type:"slide", direction:"left"}
                    });
        },
        grouped: false,
        scroll: "verticle",
        //fullscreen: true    
        
    }],
    
});
workcatalog.views.WhichReportMenu = Ext.extend(Ext.TabPanel, {
    layout: {
        type: 'vbox',
        align: 'stretch',
    },
    defaults: {flex: 1},
    dockedItems: [{
           xtype: "toolbar",
           style: "font-size: 14px",
           title: "Report Details",
          items: [{
              xtype:"button",
               ui: 'back',
               text: 'Back',
                   handler: function() {
                        Ext.dispatch({
                               controller: workcatalog.controllers.WorkController,
                            action: "goBackFromWhichReports",
                            animation: {type:"slide", direction: "right"}
                        });
               }
            },
            {xtype:'spacer'},
            {
             id: 'home',
              xtype: "button",
               iconCls: "home x-icon-mask",
               handler: function() {
                workcatalog.controllers.WorkController.setFromUsersGate(0);
                workcatalog.controllers.WorkController.setFeaturedGate(0);
                Ext.dispatch({
                    controller: workcatalog.controllers.WorkController,
                    action: 'index',
                    animation: {type:'slide', direction:'right'}
                });
            }
            }]
    },{
        xtype: "toolbar",
        dock: "bottom",
           style: "font-size: 14px",
           title: "PC",
    }
    ],
    
    items: [panel2, chartPanel],


    initComponent: function() {


        workcatalog.views.WhichReportMenu.superclass.initComponent.apply(this, arguments);
    }
});

[Jamie Avins]

Both the WorldApp and EnergyApp use MVC. That I think the WorldApp might be a better choice since it's goes into a bit more depth with changing interactions dynamically.

[Voyd]

After I posted, I found those examples. Still no joy at what I am trying to do. Basically, I want to navigate to a tabpanel, one tab is a list, the other the chart. The tabpanel will take
items:[listpanel, chartpanel].
For testing, I am using a basic store to grab values just to get the chart to show. (Which it doesnt). I keep getting errors --
Uncaught Attempting to create a component with an xtype that has not been registered: [object Object]
I think this has something to do with my creation of the chart panel. If i use
var chart = new Ext.chart.Chart --- it throws an error and nothing displays.
If I use
var chart = new Ext.chart.Panel --- no errors, but nothing displays either.

How would I be able to get this code snippet to work?

var store1 = new Ext.data.JsonStore({
            fields: ['name', 'data1'],
            data: [{name: 'sean', data1: 21},
                {name: 'sam', data1: 33},
                {name: 'sarah', data1: 44},
                {name: 'wo', data1: 55},
                {name: 'when', data1: 66},
                {name: 'how', data1: 77}
            ]
        });
        
var myChart = new Ext.chart.Panel({
    width: 200,
    height: 200,
    
    cls: 'chartpanel',
    store: store1,
    series: [{
        type: 'column',
        xField: 'name',
        yField: ['data1']
    }],
    legend: {
        position: 'left'
    },
    interactions: [
        {
            type: 'panzoom',
            axes: ['bottom']
        }
    ]
});

After, I throw the panel inside a tabpanel items.

tabpanel
--- items: [myChart]

Thanks.

[philogb]

Hi,

Thanks for your report. The chart has to have a relative (or at least non-absolute) position in the tab panel in order to be well displayed, however the fit layout sets position:absolute to it's children. This can be fixed by handsetting the position style on the chart. For example:

Ext.setup({    
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {




        var store1 = new Ext.data.JsonStore({
          fields: ['name', 'data1'],
          data: [{name: 'sean', data1: 21},
            {name: 'sam', data1: 33},
            {name: 'sarah', data1: 44},
            {name: 'wo', data1: 55},
            {name: 'when', data1: 66},
            {name: 'how', data1: 77}
          ]
        });


        var myChart = new Ext.chart.Chart({
          title: 'something',


          cls: 'chartpanel',
          style: 'position:relative',


          store: store1,
          series: [{
            type: 'column',
            xField: 'name',
            yField: ['data1']
          }],
          legend: {
            position: 'left'
          },
          interactions: [
            {
            type: 'panzoom',
            axes: ['bottom']
          }
          ]
        });


        
        new Ext.TabPanel({
           renderTo: Ext.getBody(),
           width: 400,
           height: 400,
           region:'center',
           deferredRender:false,
           activeTab:0,
           defaults:{autoScroll:true},
           items:[{
              title: 'Refreshed Panel',
              html: 'hello'
           }, myChart]
        });
        
    }
});

I hope this helps,

[Voyd]

Well, I must be missing something really simple, because I still can't get this puppy to display. I am calling this card from a controller, so Ext.Setup, OnReady, etc -- will not work for this particular case? Here is my entire code as it stands now. When I leave the chart as Ext.chart.Chart it throws errors. When I change it to chart.Panel, it will display the title but no chart (and no errors). I am banging my head on the desk trying to see what I am missing.

From the controller, the method to display the card.

    displayWhichReport: function(options) {
        workcatalog.views.viewport.setActiveItem(workcatalog.views.whichreport, options.animation);
        workcatalog.views.viewport.doLayout();
    },

var store1 = new Ext.data.JsonStore({
	fields: ['name', 'data1'],
	data: [{name: 'sean', data1: 21},
       	   {name: 'sam', data1: 33},
           {name: 'sarah', data1: 44},
           {name: 'wo', data1: 55},
           {name: 'when', data1: 66},
           {name: 'how', data1: 77}
           ]
    });


var myChart = new Ext.chart.Chart({
			autoSize: true,
			title: 'something',
			animate: true,
			cls: 'chartpanel',
    		        style: 'position:relative',
    		        store: store1,
    		        series: [{
    			type: 'column',
        		xField: 'name',
        		yField: ['data1']
          	        }],
        		legend: {
        		position: 'left'
        		},
       			 interactions: [
        		{
        		type: 'panzoom',
        		axes: ['bottom']
        		}
    		]
		});




workcatalog.views.WhichReportMenu = Ext.extend(Ext.TabPanel, {
		autoSize: true,
           	region:'center',	
    		dockedItems: [{
       			xtype: "toolbar",
       			style: "font-size: 14px",
       			title: "Report Details",
    		},{
				xtype: "toolbar",
				dock: "bottom",
       		                style: "font-size: 14px",
       		                title: "PC",
			}
			],
			items: [myChart],
			
	initComponent: function() {


    	workcatalog.views.WhichReportMenu.superclass.initComponent.apply(this, arguments);
	}
});

[philogb]

What about removing the autoSize: true and try setting some fixed with/height values, would that work?

Could you try to inspect the generated html when the chart panel is selected and see whether the html is actually generated for the chart, and if it is, what size it is?

Also, could you open the error console and tell me what error is thrown?

Thanks,

[Voyd]

I tried your suggestions. Nothing worked. The error being thrown from Chrome Console is

Uncaught TypeError: undefined is not a function

I traced down the errors and this line is the first from my own code that it has a problem with which of course is from my controller. That line activates the card.

workcatalog.views.viewport.setActiveItem(workcatalog.views.whichreport, options.animation);

[Voyd]

Evidently, I needed sencha-charts-debug.js in the head of my html. Everything works now. Cheers!

[Jamie Avins]

Remember to just use the sencha-charts.js when you are done developing. The minified version runs much faster on mobile devices.