1. #1
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    sinclas is on a distinguished road

      0  

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

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


    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

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

    Thanks and regards,
    Shivam Mishra

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,795
    Answers
    3467
    Vote Rating
    834
    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


    Is the JS file loaded? Is the chart a child of another component?
    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.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Delhi, India
    Posts
    94
    Answers
    2
    Vote Rating
    0
    Abhishek Srivastava is on a distinguished road

      0  

    Default


    same pblm wid me also...

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

  5. #4
    Sencha User
    Join Date
    Jun 2007
    Posts
    6
    Vote Rating
    0
    tmk is on a distinguished road

      0  

    Default


    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

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Mumbai, India
    Posts
    33
    Answers
    2
    Vote Rating
    1
    shivam.mishra9 is on a distinguished road

      0  

    Default


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

    Thanks and regards,
    Shivam Mishra

  7. #6
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    sinclas is on a distinguished road

      0  

    Default


    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 } ] }});

  8. #7
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default


    Quote Originally Posted by sinclas View Post
    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

  9. #8
    Sencha User
    Join Date
    May 2012
    Location
    Quito, Ecuador
    Posts
    4
    Vote Rating
    0
    douglasjara is on a distinguished road

      0  

    Default


    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):
    Code:
    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.

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