creating a view with an xtype defined doesn't show chart

[sinclas]

I have a simple ST 2 app whereby I want to add a simple Line Chart. I downloaded the Beta of the Charts. (http://cdn.sencha.io/touch-charts-2.0.0-beta.zip) . The touch-charts-debug.js is linked into my Index.html. My question is how to add a line chart to a view using xtype. I can't get the chart to show up. No errors in my Chrome console (script). All the resources loaded. Are there examples out there that I can see where the chart is created using xtype and not ext.create?

Thanks!!
Steve

[mitchellsimoens]

Is the JS file loaded? Is the chart a child of another component?

[Abhishek Srivastava]

same pblm wid me also...

js file is loaded and chart is child extends chart.Panel

[tmk]

I would also love to see an example embedding a chart into a Sencha Touch application.

So far I only get this: http://screencast.com/t/YFHuT9ACdsL. I'm just starting out so I have no idea what I am doing

[shivam.mishra9]

have you specified the layout of the parent panel in which chart is an item????
try fit layout.

Thanks and regards,
Shivam Mishra

[sinclas]

setting layout:'fit' seems to have made it work. Thanks! Also, i was using the Ext.form.Panel. If I just use a regular panel it works as expected.

here is the code:

Ext.define('MyApp.view.MyCurve', { extend: 'Ext.form.Panel', xtype: 'mycurvepanel', name: 'myForm', id: 'myForm', config: { title:'My Curve', iconCls:'star', fullscreen:true, layout:'fit', items:[{ xtype : 'yclinechart' // This is my custom view with a Sencha chart in it } ] }});

[abu_hamid]

setting layout:'fit' seems to have made it work. Thanks! Also, i was using the Ext.form.Panel. If I just use a regular panel it works as expected.

here is the code:

Ext.define('MyApp.view.MyCurve', { extend: 'Ext.form.Panel', xtype: 'mycurvepanel', name: 'myForm', id: 'myForm', config: { title:'My Curve', iconCls:'star', fullscreen:true, layout:'fit', items:[{ xtype : 'yclinechart' // This is my custom view with a Sencha chart in it } ] }});

Hi I see you got something working with inside a panel using an xtype. Could you help me to establish a nice first code that I could reuse and adapt in the futur ?

Thanks

[douglasjara]

Hi,

Can you put your custom view code, like an example?

I have the same problem to display the chart... in spite of that i put the layout:'fit'..

Here is my custom view code:

montos.js (view):

var store = new Ext.data.JsonStore({
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
            {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
            {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
            {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
            {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
        ]
    });


var lineChart = new Ext.create('Ext.chart.Chart', {
	//extend: 'Ext.chart.Chart',
	config: {
		renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate: true,
        store: store,
        shadow: true,
        theme: 'Category1',
        legend: {
            position: 'top'
        },
         axes: [{
                type: 'Numeric',
                grid: true,
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
                title: 'Sample Values',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Sample Metrics',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
        }],
        series: [{
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: 'name',
            yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
            style: {
                opacity: 0.93
            }
        }]
	}
});


Ext.define('MyApp.view.montos', {
	extend: 'Ext.chart.Chart',
	xtype: 'montos',
	
	config:
    {
		title: 'Montos',
               chart: lineChart,
		width: 800,
		height: 500
    }
});

I hope that you can help me. Thanks a lot for your time.