1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    DonSanto is on a distinguished road

      0  

    Default Answered: How to add Touch Charts into existing project

    Answered: How to add Touch Charts into existing project


    I have generated an app from the Terminal command and worked on it for a while. Now I would like to add Touch Charts. How do I do that?
    • Is there som command to generate the needed chart resources to an existing app?
    • Or do I just need to copy the files to my existing project? If yes, which files do I need?
    I've looked everywhere for a tutorial or something but can't find anything.

  2. You can add a path for Ext.chart to wherever you have stored them and then if you require the classes they should all be built into one JS file with your app files and such.

  3. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I think you can just copy the files... I don't know if our SDK tools have anything built-in quite yet.

    Which files do you need? That depends. If you're using dynamic loading, I think you need to configure the loader paths to point to your charts directory. Or you could include the "all" files, which include the rest of ST2 (I think).

    You're right in that we don't seem to have a tutorial on this. I'll bring that up to the powers-that-be.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

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


    You can add a path for Ext.chart to wherever you have stored them and then if you require the classes they should all be built into one JS file with your app files and such.
    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.

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    DonSanto is on a distinguished road

      0  

    Default


    Thanks, where do I put this path? How does it look? I'm a complete noob here and I'm trying to understand how it all fits together

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    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


    Code:
    Ext.Loader.setPath({
        'Ext.chart' : 'path/to/charts/src/'
    });
    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.

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    DonSanto is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Code:
    Ext.Loader.setPath({
        'Ext.chart' : 'path/to/charts/src/'
    });
    Ok, thank you. Now I'm starting to see whats going on

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    Oli@ is on a distinguished road

      0  

    Default insert chart into existing view

    insert chart into existing view


    Thank you for this thread, it has been very helpful. I'm also wondering if it is possible to insert a chart into an existing Sencha Touch 2.0 view, for instance as one of the items in Ext.Container?

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    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


    Quote Originally Posted by Oli@ View Post
    Thank you for this thread, it has been very helpful. I'm also wondering if it is possible to insert a chart into an existing Sencha Touch 2.0 view, for instance as one of the items in Ext.Container?
    The chart is a component so it can easily be an item of a container.
    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.

  10. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    Oli@ is on a distinguished road

      0  

    Default


    Thank you Mitchell! I have now created a container with vbox layout where I have a label, followed by a column chart, then a button. They are stacked correctly, but the chart is cut off half way through the last number on y-axis and only the top half of the text on x-axis is visible. I tried to adjust the size by setting "flex", and readjusting width and height on the graph, but that did not help (the whole graph gets readjusted, still cutting off text). I also can't find any examples where a chart is integrated within a container with other elements (buttons, text..). Do you maybe have an example on how to do it correctly? Here's my code:

    Code:
    var store = Ext.create('Ext.data.Store', {
                fields : ['temperature', 'date'],
                data : [{
                            temperature : 58,
                            date : new Date(2011, 1, 1, 8)
                        }, {
                            temperature : 63,
                            date : new Date(2011, 1, 1, 9)
                        }, {
                            temperature : 73,
                            date : new Date(2011, 1, 1, 10)
                        }, {
                            temperature : 78,
                            date : new Date(2011, 1, 1, 11)
                        }, {
                            temperature : 81,
                            date : new Date(2011, 1, 1, 12)
                        }]
            });
    
    var chartPanel = new Ext.chart.Chart({
                renderTo : Ext.getBody(), 
                width : 400,
                height : 300,
                store : store,
                axes : [{
                            type : 'Numeric',
                            position : 'left',
                            fields : ['temperature'],
                            minimum : 0,
                            maximum : 100
                        }, {
                            type : 'Time',
                            position : 'bottom',
                            fields : ['date'],
                            dateFormat : 'g:i'
                        }],
                series : [{
                            type : 'column',
                            xField : 'date',
                            yField : 'temperature'
                        }]
            });
    
    Ext.define('App.view.SomeView', {
                xtype : 'someView',
                extend : 'Ext.Container',
                requires : ['Ext.chart.Panel', 'Ext.chart.axis.Numeric',
                        'Ext.chart.axis.Category', 'Ext.chart.series.Column'],
    
                config : {
                    layout : {
                        type : 'vbox'
                    },
    
                    items : [
                             {
                                xtype : 'label',
                                html : 'Some label.'
                            }, {
                                items : chartPanel
                            }, {
                                xtype : 'button',
                                id : 'someButton',
                                ui : 'normal',
                                style : 'margin: 0.1em',
                                text : 'someText',
                                disabled : true
                            }
                    ]
    
                }
    
            });
    Do you maybe know what is wrong here and why the chart is cut off on top and bottom?

  11. #10
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Answers
    6
    Vote Rating
    7
    Kikketer is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You can add a path for Ext.chart to wherever you have stored them and then if you require the classes they should all be built into one JS file with your app files and such.
    Ok I have this same problem and adding this line to app.js did not help:
    Ext.Loader.setPath({
    'Ext' : 'sdk/src',
    "Ext.charts" : "../touch-charts/src/chart",
    "Ext.draw" : "../touch-charts/src/draw"
    });
    It was able to find the "Ext.charts" but consistently gives me an error when loading:
    Uncaught TypeError: Cannot read property 'Component' of undefined In Chart.js line 36

    I've attempted to copy over the src files from touch-charts into the standard sdk that I started using. So in theory I should not need the above path additions. This also didn't work.

    I wouldn't mind starting over completely in touch-charts but it seems to lack the vital parts that work with the sencha tools, aka I can't do a "sencha generate app" command in touch-charts.

    The intro video was amazing for standard Sencha, but I have yet to find solid walkthroughs for the charts.