1. #11
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    Quote Originally Posted by superstructor View Post
    Are you using dynamic module loading or the full builds of sencha touch and touch charts ? I.e. What scripts did you include exactly ?
    I am using dynamic loading. These are the includes on my index.html file

    Code:
    <link rel="stylesheet" href="/js/lib/sencha-touch-2.0.0-gpl/resources/css-debug/sencha-touch.css" type="text/css">
        <link rel="stylesheet" href="/js/lib/sencha-touch-2.0.0-gpl/src/ux/touch/grid/resources/css/Ext.ux.grid.View.css" type="text/css">
        <link rel="stylesheet" href="/css/dashboard.css" type="text/css">
        
        <link rel="stylesheet" href="/js/lib/sencha-touch-2.0.0-gpl/resources/css/touch-charts.css" type="text/css">
    <!--    <link rel="stylesheet" href="../../resources/css/energy-demo.css" type="text/css">-->
    
        <script type="text/javascript" src="/js/lib/sencha-touch-2.0.0-gpl/sencha-touch-debug.js"></script>
        <script type="text/javascript" src="/js/lib/sencha-touch-2.0.0-gpl/touch-charts-debug.js"></script>
                
        <!-- Application Registration -->
        <script type="text/javascript" src="/js/app.js"></script>
    Also, came across a new error:

    Code:
    Uncaught TypeError: Cannot read property 'Series' of undefined
    This is the method in Chart.js that is erroring out:

    Code:
    series.each(function (series) {
                if (!(series instanceof Ext.chart.series.Series)) {
    
                    series.chart = me;
                    collection.add(series = Ext.create('Ext.chart.series.' + me.capitalize(series.type), series));
                }
    And here is my Chart defined (almost exact copy from the EnergyApp demo)

    Code:
    Ext.define('APP.view.links.PageAuthority', {
        extend: 'Ext.chart.Chart',
        xtype : 'linksPageAuthority',
        config: {
            title   : 'Page Authority',
            iconCls : 'area',
            cls     : 'chartpanel',
            theme   : 'Energy',
            interactions: ['reset',{
                type: 'panzoom'
            },{
                type: 'iteminfo',
                gesture: 'tap',
                listeners: {
                    show: function (interaction, item, panel) {
                        EnergyApp.popup(item, panel);
                    }
                }
            }],
            animate: false,
            store: 'PABacklinks',
            axes: [{
                type: 'Numeric',
                position: 'right',
                minimum: 0,
                label: {
                    renderer: APP.commify
                },
                adjustMinimumByMajorUnit: 0,
                fields: ['count1', 'count2', 'count3', 'count4', 'count5'],
                title: '# of Links'
            },{
                type: 'Category',
                position: 'bottom',
                fields: ['pa'],
                title: 'Page Authority (PA)',
                label: {
                    rotate: {
                        degrees: 45
                    }
                }
            }],
            legend: {
                position: Ext.os.is.Phone ? 'left' : 'top'
            },
            series: [{
                type: 'area',
                highlight: false,
                title: [],
                axis: 'right',
                xField: 'pa',
                yField: ['count1', 'count2', 'count3', 'count4', 'count5']
            }],
            listeners: {
                afterrender: function (me) {
                    me.on('beforerefresh', function () {
                        if (me.ownerCt.getActiveItem().id !== me.id) {
                            return false;
                        }
                    }, me);
                }
            }
        }
    });
    Adding this to the beginning of my class definition makes that error go away, but then I get a new error (see below). In the current beta state, is the dynamic loading not 100%? Is there standard required libraries I should define in a class?

    Code:
    requires: [
          'Ext.chart.series.Series'  
        ],
    Code:
    Uncaught TypeError: Cannot call method 'create' of undefined
    Which is here in Chart.js

    Code:
    if (!(interaction instanceof Ext.chart.interactions.Abstract)) {
                    interaction.chart = me;
                    collection.add(interaction = Ext.chart.interactions.Manager.create(interaction));
    Uncaught TypeError: Cannot call method 'create' of undefined
                    
                }

    THEN Going one step further, I made my required property for the class look like this, then got a new error:


    Code:
    requires: [
          'Ext.chart.series.Series',
          'Ext.chart.interactions.Manager'
        ],
    Code:
    "The 'reset' type has not been registered with this manager"
    So finally, my requires property now looks like this:

    Code:
    requires: [
          'Ext.chart.series.Series',
          'Ext.chart.interactions.Reset',
          'Ext.chart.interactions.PanZoom',
          'Ext.chart.interactions.ItemInfo',
          'Ext.chart.interactions.Manager'
        ],
    And a chart is rendered in my app now. (Still get that pseudo error though). Could this be considered a bug or should I be telling my app somewhere that all these chart classes need to be dynamically loaded to begin with?

  2. #12
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    fwiw, I am attempting to add charts to my app as well.

    1) its not quite clear how much of the contents of the resources folder in touch-charts-2.0.0-beta need to be included in a new app .. These bundled examples are great for showing off the library features but they are harder for a newbie to correlate to a stand alone app, because the infrastructure for the collection of examples is overly complicated compared to a smaller app. For example, it seems that the examples resources dir contains things which are specific to the example project. So its not clear what a new project would start with.
    It would be nice to see a minimal stand alone version of a touch 2.0 app with chart example, or just a clear "getting started" that says "copy these files from the charts 2.0 distro into your existing ST 2.0 project"

    2) I see the same error as hallikpapa -
    Uncaught TypeError: Cannot read property 'pseudos' of undefined

    3)



    In the example Area, I notice they have requires: ['Ext.chart.Panel',
    But I don't even see Ext.chart.Panel in the library doc. I see Ext.chart.Chart but not Ext.chart.Panel . Is that a change from charts 1 to 2 that is not correctly adjusted in the example?

    think i will study the EnergyApp rather than the Area, as the EnergyApp is MVC based, maybe that will clear some things up.

  3. #13
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    fyi. I found out the hard way , if the store that is passed into the chart config is not a valid reference, then you may encounter an infinite loop in the Ext.chart.axis.Category deduceLabels function. So make sure you have a valid store.

  4. #14
    Sencha Premium Member
    Join Date
    Dec 2010
    Location
    Auckland, NZ
    Posts
    57
    Vote Rating
    15
    superstructor will become famous soon enough

      0  

    Default


    @hallikpapa

    Thanks for all the details. I have found dynamic loading with charts to be buggy and attached my minor patches to a previous post. This is probably why the bundled sencha-touch-debug.js is full build with dynamic loading disabled by default.

  5. #15
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    Good to know, thanks.

    I have a request, not sure if I should post it here or wait until there is a forum for ST2 Charts. But something I am coming across a lot is wanting to make the legend titles dynamic. When using a chart, I want to be able to change the "sources" that are plotted on a chart.

    For instance, in the EnergyApp charts, there are fuel consumption sources like Coal, Nuclear, etc...

    In my app I have buttons where I can change the data points, like unchecking Coal, and checking Water, Uncheck Nuclear, check Wind. There is no easy way to change the labels to show there are new data sources loaded in the store. I hacked together a sloppy way to do it this morning, but figured I am not going to be the only person who wants to do this. Curious if there is any plans to make legend titles easier to change in the future?

    In my data store, I have data1, data2, etc...And I am using the labels like domain1, domain2, etc...

    Code:
        /**
         * When we show the page auth chart, we need to populate the legend
         * with the correct domain names
         */
        onLinkTabsShow: function(el, value, oldValue, eOpts) {
                var activeChart = this.getLinkTabs().getActiveItem(),
                store = Ext.getStore('PABacklinks');
                this.rec = store.getAt(0);
                Ext.each(activeChart._series.items, function(name, index, array) {
                   var lbl = 'domain';
                   y = index + 1;
                   lbl = lbl + y;
                   var x = this.rec.get(lbl);
                   name._title = x;
                }, this);
        }

  6. #16
    Sencha User
    Join Date
    Jun 2010
    Posts
    4
    Vote Rating
    0
    gmp26 is on a distinguished road

      0  

    Default


    Are there any plans to implement event handling on Sprites soon? e.g. so the example listener code in the draw guide works?

    This is a really big hole. I know that interactions work on charts - but they don't work on primitive shapes or paths created with the draw tools.

  7. #17
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    zhangbei is on a distinguished road

      0  

    Default


    Canvas based Surface does not support any primitive event through dom, therefore all the event you can ever get should be calculated using javascript code. This will dramatically drag down the performance.

    What I will suggest is to manually calculate this for several certain sprites. We will give you a simple graphical editor example in the next release (not touch charts 2.0.0).

    Quote Originally Posted by gmp26 View Post
    Are there any plans to implement event handling on Sprites soon? e.g. so the example listener code in the draw guide works?

    This is a really big hole. I know that interactions work on charts - but they don't work on primitive shapes or paths created with the draw tools.

  8. #18
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    clipitar is on a distinguished road

      0  

    Question Charts in carousel ?

    Charts in carousel ?


    We're trying to setup a carousel to display several charts. We see the dots at the bottom for the carousel but the charts are not displayed. We are able to change to next or previous cards but nothing appears.

    Any ideas how to do this ?
    Is it a bug ?

    Thanks
    Attached Files

  9. #19
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default sencha-touch.css has problem, possible a bug?

    sencha-touch.css has problem, possible a bug?


    Could not make my app work with Charts 2.0 Beta without even using touch-charts.js unless I copy sencha-touch.css from sencha-touch-2.0.0-commercial/resource.

    My App works fine at sencha-touch-2.0.0.

  10. #20
    Sencha User
    Join Date
    Jan 2012
    Location
    India
    Posts
    10
    Vote Rating
    0
    Manasi Sakhare is on a distinguished road

      0  

    Default Cannot read property 'pseudos' of undefined

    Cannot read property 'pseudos' of undefined


    I still could not understand the reason for this error

    Cannot read property 'pseudos' of undefined
    I included the sencha-touch-debug.js from the latest sencha touch 2.0.0 gpl version, and then the touch-charts-debug.js, yet i get this error without writing a single line of code related to charts. Replacing the touch-charts-debug.js with touch-charts.js did not work either.

    Help needed urgently...!!!!