Categories: Front-End Web DevelopmentWeb DevelopmentTutorials

Reporting

4 min read

(For more resources related to this topic, see here.)

Creating a pie chart

First, we made the component test CT for display purposes, but now let’s create the CT to make it run.

We will use the Direct function, so let’s prepare that as well. In reality we’ve done this already.

Duplicate a different app.html and change the JavaScript file like we have done before. Please see the source file for the code: 03_making_a_pie_chart/ct/dashboard/pie_app.html.

Implementing the Direct function

Next, prepare the Direct function to read the data.

First, it’s the config.php file that defines the API. Let’s gather them together and implement the four graphs (source file: 04_implement_direct_function/php/config.php).

....
    'MyAppDashBoard'=>array(
        'methods'=>array(
            'getPieData'=>array(
                'len'=>0
            ),
            'getBarData'=>array(
                'len'=>0
            ),
            'getLineData'=>array(
                'len'=>0
            ),
            'getRadarData'=>array(
                'len'=>0
            )
        )
    ....

Next, let’s create the following methods to acquire data for the various charts:

getPieData
getBarData
getLineData
getRadarData

First, implement the getPieData method for the pie chart. We’ll implement the Direct method to get the data for the pie chart. Please see the actual content for the source code (source file: 04_implement_direct_function/php/classes/ MyAppDashBoard.php ).

This is acquiring valid quotation and bill data items. With the data to be sent back to the client, set the array in items and set up the various names and data in a key array. You will now combine the definitions in the next model.

Preparing the store for the pie chart

Charts need a store, so let’s define the store and model (source file: 05_prepare_the_store_for_the_pie_chart/app/model/ Pie.js).

We’ll create the MyApp.model.Pie class that has the name and data fields. Connect this with the data you set with the return value of the Direct function. If you increased the number of fields inside the model you just defined, make sure to amend the return field values, otherwise it won’t be applied to the chart, so be careful. We’ll use the model we made in the previous step and implement the store (source file: 05_prepare_the_store_for_the_pie_chart/app/model/ Pie.js).

 Ext.define('MyApp.store.Pie', {
    extend: 'Ext.data.Store',
    storeId: 'DashboardPie',
    model: 'MyApp.model.Pie',
    proxy: {
        type: 'direct',
        directFn: 'MyAppDashboard.getPieData',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
})

Then, define the store using the model we made and set up the Direct function we made earlier in the proxy.

Creating the View

We have now prepared the presentation data. Now, let’s quickly create the view to display it (source file: 06_making_the_view/app/view/dashboard/Pie.js).

 Ext.define('MyApp.view.dashboard.Pie', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.myapp-dashboard-pie',
    title: 'Pie Chart',
    layout: 'fit',
    requires: [
        'Ext.chart.Chart',
        'MyApp.store.Pie'
    ],
    initComponent: function() {
        var me = this, store;
        store = Ext.create('MyApp.store.Pie');
        Ext.apply(me, {
            items: [{
                xtype: 'chart',
                store: store,
                series: [{
                    type: 'pie',
                    field: 'data',
                    showInLegend: true,
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
            }]
        });
        me.callParent(arguments);
    }
});

Implementing the controller

With the previous code, data is not being read by the store and nothing is being displayed.

In the same way that reading was performed with onShow, let’s implement the controller (source file: 06_making_the_view/app/controller/DashBoard.js):

 Ext.define('MyApp.controller.dashboard.DashBoard', {
    extend: 'MyApp.controller.Abstract',
    screenName: 'dashboard',
    init: function() {
        var me = this;
        me.control({
            'myapp-dashboard': {
                'myapp-show': me.onShow,
                'myapp-hide': me.onHide
            }
        });
    },
    onShow: function(p) {
        p.down('myapp-dashboard-pie chart').store.load();
    },
    onHide: function() {
    }
});

With the charts we create from now on, as we create them it would be good to add the reading process to onShow. Let’s take a look at our pie chart which appears as follows:

Summary

You must agree this is starting to look like an application!

The dashboard is the first screen you see right after logging in. Charts are extremely effective in order to visually check a large and complicated amount of data. If you keep adding panels as and when you feel it’s needed, you’ll increase its practicability. This sample will become a customizable base for you to use in future projects.