Sencha Touch Charts 2.0 Beta Now Available

[hallikpapa]

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

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

Uncaught TypeError: Cannot read property 'Series' of undefined

This is the method in Chart.js that is erroring out:

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)

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?

requires: [
      'Ext.chart.series.Series'  
    ],

Uncaught TypeError: Cannot call method 'create' of undefined

Which is here in Chart.js

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:

requires: [
      'Ext.chart.series.Series',
      'Ext.chart.interactions.Manager'
    ],

"The 'reset' type has not been registered with this manager"

So finally, my requires property now looks like this:

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?

[mike lebowski]

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.

[mike lebowski]

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.

[superstructor]

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

[hallikpapa]

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

    /**
     * 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);
    }

[gmp26]

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.

[zhangbei]

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

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.

[clipitar]

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

[jimmylu98]

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.

[Manasi Sakhare]

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