Results 1 to 8 of 8

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

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Answers
    3884
    Vote Rating
    1297
      0  

    Default

    Is the JS file loaded? Is the chart a child of another component?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      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
      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
      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
      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
      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
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •