Mobile Zone is brought to you in partnership with:

Jorge is the author of three software development books: "Building a Sencha Touch Application", "How to Build a jQuery Mobile Application", and the "Ext JS 3.0 Cookbook". He runs a software development and developer education shop that focuses on mobile, web and desktop technologies. Jorge is a DZone MVB and is not an employee of DZone and has posted 50 posts at DZone. You can read more from them at their website. View Full User Profile

How to Create an Executive Dashboard Using Sencha Touch, Part 2

01.28.2014
| 4105 views |
  • submit to reddit

This is the second part of a Sencha Touch tutorial in which you will build an Executive Dashboard app that renders a number of charts with performance indicators for a hypothetical business.

dashboard-2-small

In the first part of this tutorial, you created the Sencha Touch barebones app that you will use as starting point for the Executive Dashboard, designed and created the main view of the app, and created a Sencha Touch data Model and Store that you will use to retrieve data from the server and feed it to the app’s charts.

Now you are ready to add the charts to the app. Let’s start with the Hours Worked chart.

Creating the Hours Worked chart

The first chart that you will create is the “Hours Worked” chart. In the app/view directory, create the HrsWorkedChart.js file, and add the following code to it:

Ext.define("dashboard.view.HrsWorkedChart", {
    extend: "Ext.chart.CartesianChart",
    requires: [
        "Ext.TitleBar",
        "Ext.chart.CartesianChart",
        "Ext.chart.series.Line",
        "Ext.chart.axis.Numeric",
        "Ext.chart.axis.Category",
        "Ext.draw.sprite.Circle"
    ],
    alias: "widget.hrsworkedchart",
    config: {
        flex: 1,
        xtype: "chart",
        store: "HrsAndValueByYear",
        cls: "chart",
        innerPadding: 10,
        animate: true,
        series: [
            {
                type: "line",
                xField: "year",
                yField: "hrsworked",
                title: "Hours Worked",
                style: {
                    stroke: "#003366",
                    lineWidth: 3
                },
                marker: {
                    type: "circle",
                    stroke: "#003366",
                    radius: 5,
                    lineWidth: 3
                }
            }
        ],
        axes: [
            {
                type: "numeric",
                position: "left",
                title: {
                    fontSize: 15,
                    text: "Hrs"
                },
                grid: {
                    even: {
                        fill: "#f9f9f9"
                    }
                }
            },
            {
                type: "category",
                position: "bottom"
            }
        ]
    }
});

This chart is an instance of the CartesianChart Class. In other words, it’s a line chart. The first detail you need to pay attention to is the requires object, where you list the classes needed to define the series, axis, and sprites you will use for the chart’s markers.

Note also the store, series and axes configs. While the store config is self explanatory, I would recommend that you review the Sencha Touch documentation for the series and axes config so you are aware of the multiple ways to configure these chart features. For example, in the series config, the most important properties are the xField and yField, which should match the model’s fields you want to display on the chart.

You should now add the chart to the views config of the application, in the app.js file:

views: [
    "HrsWorkedChart",
    "Main"
]

Adding the Hours Worked chart to the Main view

Then you can add an instance of the chart to the Main view of the app in the view/Main.js file

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: "hrsworkedchart"
                            }
                        ]
                    },
                    {
                        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"
                            }
                        ]
                    }
                ]
            }                
        ]
    }
});

At this point you can check the app in a browser, where you should see the Hours Worked chart rendered as shown in the screenshot below.

dashboard-7-small

Published at DZone with permission of Jorge Ramon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)