Exploratory Data Analysis for Machine Learning Apps Using FusionCharts And Javascript

AI and machine learning are becoming more and more important in the world of business every day. AI is particularly useful in helping businesses predict trends, like sales forecasts or consumer behavior. Machine learning on the other hand can help a salesforce follow up on sales calls or even predict when customers may be ready to convert.

There are plenty of ways AI can help you, but it doesn’t happen on its own. Exploratory data analysis is one of the first steps in developing any machine learning or AI app. It helps data scientists gain key insights and discover trends within numbers. Trends that might not be obvious otherwise.

Data visualization is also a key part of exploratory data analysis. In addition, effective data presentation can help companies develop good marketing strategies and promote long-term growth.

If you are looking to improve the way your business visualizes its data, FusionCharts is an extensive library that includes 100+ charts and 2000+maps that can be easily integrated into a Javascript app. It has a wide variety of options for creating interactive charts and dashboards, which can be customized according to your data and application.

If all this interests you, then read on to find out how you can integrate a FusionCharts presentation in Sencha’s ExtJS app. This blog will teach you how to create a multi-series 2D column chart and a multi-series spline chart. Both these charts are shown below:

Multi-Series Chart (left), Multi-Series Spline (right)

The Data Source

The data for this app is taken from Global Health Observatory resources run by the World Health Organization. It shows the life expectancy of both males and females in Pakistan, along with the combined data for both groups. The data has been retrieved from the following URL with the given parameters:

https://apps.who.int/gho/athena/api/GHO/WHOSIS_000001.json?filter=COUNTRY:PAK&profile=simple

With the above query, a JSON object is returned. A part of the JSON text is shown below:

{
  ...
  "fact": [
           {
             "dim": {
                      "PUBLISHSTATE": "Published",
                      "GHO": "Life expectancy at birth (years)",
                      "SEX": "Male",
                      "REGION": "Eastern Mediterranean",
                      "COUNTRY": "Pakistan",
                      "YEAR": "2000"
                    },
             "Value": "59.3"
           },
   ....
}

We’ll use the data in the ‘fact’ key to draw the chart or spline.

What Are the Steps For Integrating FusionCharts With ExtJS

Below are four easy steps that you can follow to develop an ExtJS app with FusionCharts. It is assumed that you already have ExtJS or its trial version installed on your machine.

Step 1: Create an Empty ExtJS Project

To begin, you need to generate a minimal desktop application using the Ext JS Modern Toolkit. If you are new to Sencha, you can create an empty project by typing at the console:

ext-gen app -i

Next, follow the instructions at the prompt. Make sure to name your project chart and select the moderndesktopminimal option. You can follow this tutorial to better understanding how to generate a minimal desktop app using the modern toolkit. I have chosen to place all my project files in a folder called fusioncharts-extjs-demo.

Step 2: Include FusionCharts Library

Open the index.html file located in the main project directory. Add these lines anywhere in the header to include FusionCharts support for rendering charts and themes.

<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>


<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

Step 3: Add the Main View

In the main view, we’ll add the following:

• The visual components:

1. 1. The main App heading
   2. Two buttons for selecting between a chart and spline
   3. The area for rendering the chart or spline

• A model and a store with the autoLoad option, so that the data is loaded as soon as the app starts.

Open the MainView.js file located in the app/desktop/src/view/main folder and replace all its contents with the following code:

Ext.define('chart.view.main.MainView', {

  extend: 'Ext.Container',

  xtype: 'mainview',

  controller: 'mainviewcontroller',

  viewModel: {

    type: 'mainviewmodel'

  },

  items: [

    {

      xtype: 'component',

      html: '<h1> ExtJS Fusion Charts Demo </h1>'

    },

    {

      xtype: 'button',

      text: 'Chart',

      handler: 'onDrawChart'

    },

    {

      xtype: 'button',

      text: 'Spline',

      handler: 'onDrawChart'

    },    

    {

       xtype: "component",

       id: "chartContainer",

       tag: 'div',

       height:500,

       width:600

     },

  ],

  viewModel: {

    stores: {

      chartDataStore: {

        type: 'store',

        id: 'chartData',

        autoLoad: true,

        fields: [

        { name: 'sex', type: 'string',mapping: 'dim.SEX' },

        { name: 'year', type: 'string',mapping: 'dim.YEAR' },

        { name: 'value', type: 'string',mapping: 'Value'}   

    ],        

      proxy: {

        type: 'jsonp',

        url: 'https://apps.who.int/gho/athena/api/GHO/WHOSIS_000001.json?filter=COUNTRY:PAK&profile=simple',

        reader: {

            type: 'json',

            rootProperty: 'fact',

        }}

     }

   }

  },

})

Step 4: Write the Controller

In the controller, we’ll write a single handler for the two buttons. We’ll change the variable chartType to the relevant visual depending upon which button is pressed. When one of the buttons is pressed, the data is converted to the required JSON object and rendered as a chart or spline. Open the MainViewController.js file located in the app/desktop/src/view/main folder and replace all its contents with the following code:

Ext.define('chart.view.main.MainViewController', {

  extend: 'Ext.app.ViewController',

  alias: 'controller.mainviewcontroller',

  onDrawChart: function (button) { 

    var store = Ext.data.StoreManager.lookup('chartData');

    var items = store.data.items;

    var category=[];

    var dataM = [];

    var dataF = [];

    var both = [];

    var year = 0;

    //create category data as well as male, female and both sexes data

    for (var i=0;i<items.length;++i)

    {

        var sex = items.data.sex;