How to Use Sencha Touch charts, Part 1

In this Sencha Touch tutorial you will learn how to use Sencha Touch charts in a mobile application. Specifically, you will learn the following topics:

  • How to create a Sencha Touch layout to render multiple charts.
  • How to configure and use the Sencha Touch Cartesian Chart.
  • How to feed Sencha Touch charts with data sent from the server.
  • How to update Sencha Touch charts on demand.

The app that you will build in this tutorial is based on an Executive Dashboard prototype that I put together some time ago. This app renders a number of charts with performance indicators for a hypothetical business.

dashboard-2-small

Designing the layout for the Sencha Touch charts

The first step you will take is to build a mock up of the user interface. This will help you define the look and feel of the app, and decide which Sencha Touch components you need to use to create this UI.

The Executive Dashboard consists of a single screen with a title bar and four rectangular regions each showing a chart. The title bar will contain a “Refresh” button. Each of the four areas for the charts will contain a chart, preceded by a label that will function as a title for the chart.

Translating this to Sencha Touch components, as reflected in the figure below, the app’s viewport will be filled with a Container. This container will use a vbox layout to host a top-docked Titlebar component, and two containers. The two containers will give you two rows of equal height, highlighted as green rectangles in the figure.

dashboard-3-small

Each row will in turn use an hbox layout to host two containers, which will give you two columns of equal width. This combination of rows and columns results in a 2×2 matrix. Each of the matrix’s cells, depicted as orange rectangles in the figure, will host a Container with the chart title, and a Chart.

Creating a skeleton app with Sencha Command

Now that you have an approach to the layout of the app’s only view, you can move on to the construction phase. Let’s take care of generating a skeleton app that you can use as a starting point for this Executive Dashboard.

To create a skeleton app, follow these steps:

  1. Install Sencha Cmd.
  2. Install Compass.
  3. Download the Sencha Touch SDK.
  4. Open a Terminal or Command window in your Sencha Touch SDK directory.
  5. In your terminal window, run: sencha generate app -path=”c:\projects\senchatouch\dashboard” -name dashboard

This will produce a Sencha Touch application in the c:\projects\senchatouch\dashboard directory:

dashboard-4

You can browse to the index.html file in your favorite Webkit browser and verify that the app comes up on the screen.

Building the main view

To create the main view of the Executive Dashboard, you will modify the main View of the skeleton app. In the app/view directory, open the main.js file and replace its code with the following:

Ext.define("dashboard.view.Main", {
    extend: "Ext.Container",
    requires: [
        "Ext.TitleBar"
    ],
    alias: "widget.main",
    config: {
        layout: {
            type:"vbox"
        },
        items: [
            {
                xtype: "titlebar",
                docked: "top",
                title: "Executive Dashboard",
                items: [
                    {
                        iconCls: "refresh",
                        align: "right",
                        handler: function () {
                            var parent = this.up("titlebar").getParent();
                            parent.fireEvent("refreshRequestCmd", parent);
                        }
                    }
                ]
            },            
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                html: "First row"
            }            ,
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                html: "Second row"
            }                
        ]
    }
});

The app’s main View is an instance of the Ext.Container class. For now, the view has a Titlebar and a couple of child containers.

Using a bvox layout and docking the Titlebar to the top of its parent, allows you to place the two child containers one on top of the other. Setting the flex config of each container to 1 makes them both have the same height.

Note that you also added the Refresh button to the Titlebar, along with its handler function, which acquires a reference to the view and fires the refreshRequestCmd event. Your controller will use this event to refresh the data used by the charts.

If you run the app on a browser, you should see the main view with its Titlebar and two child containers as depicted in the following screenshot.

dashboard-5-small

Next, you will add the containers for each of the charts and their titles. In the Main.js file, delete the html config of each child container, and add the items config, as shown in the following code.

Ext.define("dashboard.view.Main", {
    extend: "Ext.Container",
    requires: [
        "Ext.TitleBar"
    ],
    alias: "widget.main",
    config: {
        layout: {
            type:"vbox"
        },
        items: [
            {
                xtype: "titlebar",
                docked: "top",
                title: "Executive Dashboard",
                items: [
                    {
                        iconCls: "refresh",
                        align: "right",
                        handler: function () {
                            var parent = this.up("titlebar").getParent();
                            parent.fireEvent("refreshRequestCmd", parent);
                        }
                    }
                ]
            },            
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                items: [
                    {
                        xtype: "container",
                        flex: 1,
                        layout:"vbox",
                        html: "First row - First column"
                    },
                    {
                        xtype: "container",
                        flex: 1,
                        layout:"vbox",
                        html: "First row - Second column"
                    }
                ]
            }            ,
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                items: [
                    {
                        xtype: "container",
                        flex: 1,
                        layout: "vbox",
                        html: "Second row - First column"
                    },
                    {
                        xtype: "container",
                        flex: 1,
                        layout: "vbox",
                        html: "Second row - Second column"
                    }
                ]
            }                
        ]
    }
});

The items array of each child container consists itself of a couple of containers. This has the effect of dividing each row into two columns, which results in the 2×2 matrix layout that you are after. Since the “row” containers use an hbox layout, defining each of their child containers with flex = 1 forces them to have the same width.

If you run the app on a browser, you should see how the matrix layout is taking shape:

dashboard-6-small

Each Ext.Container instance of the 2×2 matrix you just created will host a chart and its title. To accomplish this, you will add an items config to the containers. This items config will define two things, a container that you will use to display the title of the chart, and a container for the chart itself. The following code shows how you do this.

Ext.define("dashboard.view.Main", {
    extend: "Ext.Container",
    requires: [
        "Ext.TitleBar"
    ],
    alias: "widget.main",
    config: {
        layout: {
            type:"vbox"
        },
        items: [
            {
                xtype: "titlebar",
                docked: "top",
                title: "Executive Dashboard",
                items: [
                    {
                        iconCls: "refresh",
                        align: "right",
                        handler: function () {
                            var parent = this.up("titlebar").getParent();
                            parent.fireEvent("refreshRequestCmd", parent);
                        }
                    }
                ]
            },            
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                items: [
                    {
                        xtype: "container",
                        flex: 1,
                        layout:"vbox",
                        items:[
                            {
                                xtype: "container",
                                docked: "top",
                                html: "Hours Worked",
                                margin: "15 0 0 15"
                            },
                            {
                                xtype: "container",
                                html: "Hours Worked Chart Placeholder",
                                margin: "15 0 0 15"
                            }
                        ]
                    },
                    {
                        xtype: "container",
                        flex: 1,
                        layout:"vbox",
                        items:[
                            {
                                xtype: "container",
                                docked: "top",
                                html: "Hours Billed",
                                margin: "15 0 0 15"
                            },
                            {
                                xtype: "container",
                                html: "Hours Billed Chart Placeholder",
                                margin: "15 0 0 15"
                            }
                        ]
                    }
                ]
            }            ,
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                items: [
                    {
                        xtype: "container",
                        flex: 1,
                        layout: "vbox",
                        items: [
                            {
                                xtype: "container",
                                docked: "top",
                                html: "Value Worked",
                                margin: "15 0 0 15"
                            },
                            {
                                xtype: "container",
                                html: "Walue Worked Chart Placeholder",
                                margin: "15 0 0 15"
                            }
                        ]
                    },
                    {
                        xtype: "container",
                        flex: 1,
                        layout: "vbox",
                        items: [
                            {
                                xtype: "container",
                                docked: "top",
                                html: "Value Billed",
                                margin: "15 0 0 15"
                            },
                            {
                                xtype: "container",
                                html: "Value Billed Chart Placeholder",
                                margin: "15 0 0 15"
                            }
                        ]
                    }
                ]
            }                
        ]
    }
});

After making this change, running the app in a browser will produce a layout similar to the one depicted in the screenshot below, which is the layout that you want to achieve.

dashboard-1-small

All that’s left to finish the view is to add the charts. Before you do that, though, you will create the components that will feed the charts with their respective data.

Creating the data model and the store used by the charts

You need a Model class that defines the data fields used by the charts. In the app/model directory, create the HrsAndValueByYear.js file, and add the following code to it.

Ext.define("dashboard.model.HrsAndValueByYear", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            { name: "hrsbilled", type: "int" },
            { name: "hrsworked", type: "int" },
            { name: "valuebilled", type: "int" },
            { name: "valueworked", type: "int" },
            { name: "year", type: "int" }
        ]
    }
});

You also need to declare the model in the models config of the application, in the app.js file:

models:[
	"HrsAndValueByYear"
]

Along with the model, you need to create a data store. The store will download data from the server and feed it to the charts. In the app/store directory, create the HrsAndValueByYear.js file, and define your store using the following code.

Ext.define("dashboard.store.HrsAndValueByYear", {
    extend: "Ext.data.Store",
    config: {
        data: [
            { year: "2010", hrsbilled: 130000, hrsworked: 143000, valuebilled: 475000, valueworked: 500000 },
            { year: "2011", hrsbilled: 149000, hrsworked: 158000, valuebilled: 270000, valueworked: 285000 },
            { year: "2012", hrsbilled: 153000, hrsworked: 149000, valuebilled: 325000, valueworked: 380000 },
            { year: "2013", hrsbilled: 165000, hrsworked: 171000, valuebilled: 265000, valueworked: 270000 }
        ]
    }
});

Initially you will not use the model or a proxy in the store. You will simply hard-code some data using the data config, which makes it easier to test the charts. Once you are sure that the charts are displaying the store’s data correctly, you will stop using the data config, and define a proxy so the store can retrieve its data from the server.

Don’t forget to declare the store in the stores config of the application:

stores:[
	'HrsAndValueByYear'
]

Next steps

This concludes the first part of this Sencha Touch tutorial. At this point you have:

  • Created the Sencha Touch barebones app that you will use as starting point for the Executive Dashboard app.
  • Designed and created the main view of the app.
  • Created a Sencha Touch data Model and Store that you will use to retrieve data from the server and feed it to the charts.

In the next part of this tutorial you will create the app’s charts. You will also add the charts to the main view, and create the Sencha Touch Controller that will handle the refreshing of the charts on demand.

What you think about this tut so far? Drop me a line in the comments section. :-)

Want to learn more?

My Sencha Touch and jQuery Mobile books will guide you, step by step, through the process of building Sencha Touch and jQuery Mobile applications. If you like to learn by doing, these books are for you.

You can also check the rest of my Sencha Touch tutorials and recipes, which cover interesting subjects related to Sencha Touch.

Get Free Articles and News

Sign up for MiamiCoder’s Newsletter and get free articles and news:



MiamiCoder will never sell your email address.

Leave a Reply

Your email address will not be published. Required fields are marked *