Dimensional Data

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. Step 3: Add the Main View In the main view, we’ll add the following: The main App heading Two buttons for selecting […]

When it comes to displaying information there are few JavaScript components as important, or as useful as the Grid. It is one of the primary tools developers use to display, and, more importantly, allow users to view, sort, and interact with large data sets. As a tool, JavaScript Grids allow developers to modernize and accelerate business processes by simplifying the way their users work with data. Grids allow us to render large sets of information without lagging or freezing. They also help considerably reduce the amount of time we spend managing our data. In this article, we will show you how to improve your JavaScript Grids with sorting, grouping, and filtering using Sencha Ext JS. Now, let’s dive in. What is Sencha Ext JS? Sencha Ext JS is a powerful framework for developing cross-platform web and mobile applications. It supports over 150 UI elements, including grids, pivot grids, and D3 adapters. It helps you to develop data-intensive apps quickly and conveniently. How can I Turbocharge my JavaScript Grids with Sorting? One of the reasons the grids are so necessary is that they allow us to determine exactly how data is viewed. With Ext JS Grids, your options are almost unlimited — you can sort your data either by configuration or under program control. You also can perform both single-column and multi-column sorting. Here is an example of single-column sorting: To create the sorting shown above, you have to follow these steps: 1. First, you have to specify the view of the app. Then extend Grid, and specify title and items. Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’, items: [{     docked: ‘top’,     xtype: ‘toolbar’,     items: [{         text: ‘Sort on destination’,         handler: function(button){             // Sort under program control             button.up(‘grid’).getStore().sort(‘to’);         }     }] }], 2. Next, you have to sort the data via configuration. store: {       // Sort via store configuration     sorters: [{         property: ‘airline’     }],       type: ‘store’,     autoLoad: true,     fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],     proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} }, 3. Then you have to define the columns. For more information on how to do this check the source code. 4. Finally, add this code: Ext.application({ name: ‘MyApp’, mainView: ‘MyApp.view.Main’ }); Source Code: You can play with the code on Fiddle. Next, let’s look at multiple-column sorting. All you have to do to achieve this is add multiple sorters via configuration. Here is an example: Source Code: You can find the source code right here. How can I Turbocharge my JavaScript Grids with Grouping? Grids have a grouped config that allows you to conveniently group columns. Here is an example of how to make it happen: To create the grouping shown above, simply follow these steps: 1. Specify the view of the app and title. Also, extend the Grid. Ext.define(‘MyApp.view.Main’, {     extend: ‘Ext.grid.Grid’,     title: ‘Reykjavik Flight Departures’, 2. Set grouped to true. grouped: true, 3. Now, you have to specify the columns. You can find everything on the source code. 4. Next, you have to define the store. store: {         type: ‘store’,         autoLoad: true,         fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}],         proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}}     }     }); 5. Then add this code: […]

Forms are a vital part of any digital product that we see today. They are a great way to interact with the users and record their input. They also play a significant role in capturing valuable user feedback as well. Due to its benefits and use cases, many application developers look for quick and easy ways to create business process forms and focus more of their energy on implementing business logic over the design. In this blog post, we’ll look at how we can make use of Sencha Ext JS and quickly create impressive process forms for our own use cases. Which types of fields are available for creating forms with Sencha Ext JS? Sencha Ext JS has an entire namespace Ext.form.field dedicated to providing form controls. It has a standard set of field types that you can use to create an end-to-end form panel. These field types include Checkbox, ComboBox, Date, Display, File, Hidden, HtmlEditor, Number, Radio, Text, TextArea, and Time. For detailed information about these fields, check out their individual documentation. How can I do validations based on field types? Client-side validations are equally important as server-side schema and data validations. They help in the identification of incorrect or insufficient information before making API calls to the server. Hence, resulting in lesser network traffic due to correct API calls. Sencha Ext JS supports two types of validations namely built-in and custom validations. Ext JS has its own set of apparent validation rules for some field types. For instance, in a Date field, if incorrect data is entered which can not be actually converted into the Date instance, Ext JS internally detects it and provides meaningful hints and error messages for the user to rectify their data. With Ext JS, it is fairly easy to change the location of the error message. The following code snippet will move the error message from the default tooltip to a piece of text under the field itself. { xtype: ‘datefield’, fieldLabel: ‘Date of Birth’, name: ‘birthDate’, msgTarget: ‘under’, // location of the error message invalidText: ‘”{0}” bad. “{1}” good.’ // custom error message text } The resulting error message will look like follows. While built-in validations are smooth, straightforward, and time-saving, they can be used every time with every field type. Some validation requirements cannot be met using these built-in validation rules. The simplest way to implement a custom validation is to use the Text Field’s regex configuration to apply validation rules and the maskRe configuration to limit which characters can be typed into the field. Following is an example of a Text Field that validates a time. { xtype: ‘textfield’, fieldLabel: ‘Last Login Time’, name: ‘loginTime’, regex: ‘/^([1-9]|1[0-9]):([0-5][0-9])(sm)$/i’, maskRe: ‘/[ds:amp]/i’, invalidText: ‘Not a valid time. Must be in the format “12:34 PM”.’ } The best part about Ext JS is that it allows you to create reusable validation classes that you can use in your application multiple times without duplicating the code. Following is an example of a validation class that does exactly the same thing i.e. it validates time, but with reusable configurations. // custom Vtype for vtype:’time’ var timeTest = ‘/^([1-9]|1[0-9]):([0-5][0-9])(sm)$/i’; Ext.apply(Ext.form.field.VTypes, { // vtype validation function time: function(val, field) { return timeTest.test(val); }, // vtype Text property: The error text to display when the validation function returns false timeText: ‘Not […]