Powerful Data Visualization Using JavaScript Carousels And NASA APIs Copy – Sencha.com Sencha Home / Blog / Ext JS / Powerful Data Visualization Using JavaScript Carousels And NASA APIs Copy
Carousels are a great way to allow users to swipe through multiple full-screen pages. A carousel shows only one of its pages at a time but allows you to browse through other pages using a swipe gesture. You can think of a carousel as a single active item, with the rest of the items stretching away left and right. Indicator dots visualize how many available screens are available to swipe through. In this blog post, we’ll look at how we can use NASA APIs to create beautiful JavaScript image carousels for powerful data visualization and analysis. How can I get images from NASA APIs? NASA provides a bunch of APIs to access a variety of astronomical data such as APOD, Asteroids NeoWs, DONKI, Earth, EONET, EPIC, Exoplanet, etc. To use these APIs, you need to have an access token. You can create your access token by registering onto the NASA portal with your email address and password. For demonstration activities throughout this tutorial, we will use the following API calls to NASA to get the images for our Sencha carousel. APOD (current day) APOD (specific day) Earth imagery APOD API (current day) let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/apod?api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the code above, we are calling NASA’s planetary APOD API with no optional query parameters. It means that it will return the astronomical picture of the day for the current day. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. Earth Imagery API let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/earth/imagery?lon=100.75&lat=1.5&date=2014-02-01&api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the above code, we are calling NASA’s earth imagery API with a bunch of query parameters. The API will return an earth image at the specified latitude and longitude values. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. APOD API (specific day) let request = new XMLHttpRequest(); request.open(“GET”, “https://api.nasa.gov/planetary/apod?date=2020-05-05&api_key=”); request.send(); request.onload = () => { if (request.status === 200) { // by default the response comes in the string format, we need to parse the data into JSON console.log(JSON.parse(request.response)); } else { console.log(`error ${request.status} ${request.statusText}`); } }; In the above code, we are calling NASA’s planetary APOD API with the date as an optional query parameter. It means that it will return the astronomical picture of the day for the specified day. Notice that the api_key query parameter specifies a placeholder in the above code snippet which should be replaced with your personal API access token before making the API call. You can find numerous other NASA APIs at api.nasa.gov. How can I set up a simple horizontal carousel? The response of each API call we used above will either return a link […]
Turbocharge Your JavaScript Grids with Locked Columns, Infinite Scrolling, and Sparklines – Sencha.com Sencha Home / Blog / Ext JS / Turbocharge Your JavaScript Grids with Locked Columns, Infinite Scrolling, and Sparklines
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 […]
The login functionality of an application is the first thing most people see when they go to use a product. It is the most essential, inevitable, and foundational part of any software system out there. A developer who is working on an application often looks for quick and easy ways in which they can build the login part of an application, and focus most of the energy on implementing the actual business logic. In this blog post, we’ll see a quick overview of how we can rapidly build a login system for your JavaScript dashboards using Sencha Ext JS. For a more in-depth version of this guide see the documentation. How can I generate an app using Sencha CMD? Sencha allows you to generate an application boilerplate using the Sencha CMD. Run the following command in your terminal or CLI to generate a LoginApp boilerplate code. sencha -sdk /path/to/ExtSDK generate app LoginApp ./LoginApp Once you have generated the app, navigate to {appRoot}/app.js and remove the mainView config from the application config. We are doing this because we want to perform some validations and evaluations before deciding the initial view when the application loads. For example, there is no need to instantiate the Main view if the user is logged out of the system. At this point, when we have removed the mainView config, the browser shows a blank page upon refreshing the page. This is because the app does not know which view to instantiate yet. We handle this by adding plugins: ‘viewport’ line to {appRoot}/app/view/main/Main.js file. How can I create the login view components? After handling all the configurations and setup prerequisites, navigate to app/view folder inside the LoginApp folder and create a new directory called login. Inside this new directory, create two files Login.js and LoginController.js. Your directory structure should look somewhat like this now. How to generate the login window in my application? To create the login window, open the {appRoot}/app/view/login/Login.js file and define the Login class as follows. Ext.define(‘LoginApp.view.login.Login’, { extend: ‘Ext.window.Window’, xtype: ‘login’ }); In the above code, we essentially extended the Ext.window.Window class to create our own Login class to be further in the application. Let’s add some basic dependencies and properties that our Login class should rely on. requires: [ ‘LoginApp.view.login.LoginController’, ‘Ext.form.Panel’ ], controller: ‘login’, bodyPadding: 10, title: ‘Login Window’, closable: false, autoShow: true Now comes the actual UI part. We need to create a form containing at least three entities in total; username text field, password text field, and login button itself. items: { xtype: ‘form’, reference: ‘form’, items: [{ xtype: ‘textfield’, name: ‘username’, fieldLabel: ‘Username’, allowBlank: false }, { xtype: ‘textfield’, name: ‘password’, inputType: ‘password’, fieldLabel: ‘Password’, allowBlank: false }, { xtype: ‘displayfield’, hideEmptyLabel: false, value: ‘Enter any non-blank password’ }], buttons: [{ text: ‘Login’, formBind: true, listeners: { click: ‘onLoginClick’ } }] } All in all, the final code for in Login.js file should look like below. Ext.define(‘LoginApp.view.login.Login’, { extend: ‘Ext.window.Window’, xtype: ‘login’, requires: [ ‘LoginApp.view.login.LoginController’, ‘Ext.form.Panel’ ], controller: ‘login’, bodyPadding: 10, title: ‘Login Window’, closable: false, autoShow: true, items: { xtype: ‘form’, reference: ‘form’, items: [{ xtype: ‘textfield’, name: ‘username’, fieldLabel: ‘Username’, allowBlank: false }, { xtype: ‘textfield’, name: ‘password’, inputType: ‘password’, fieldLabel: ‘Password’, allowBlank: false }, { xtype: ‘displayfield’, hideEmptyLabel: false, value: ‘Enter any non-blank password’ }], buttons: [{ […]
As businesses and individuals move increasingly online, they accumulate large volumes of data in the form of digital images. If you have found yourself in this position, then you are definitely aware that to efficiently organize, analyze, and edit your images takes plenty of time. It takes so much time, in fact, that often the only good solution is for you to develop your own high-quality software to ease the ever-increasing load. Thankfully, there are tools available to you that speed things up, and they do it using AI and machine learning. They perceive and recognize objects within your images and automatically label them appropriately. In addition to being very useful for organizing your directories full of digital images, they also help you search for and discover the important information contained within your images. DeepAI.org has created a number of these machine learning and computer vision technology tools. DenseCap API in particular scans and adds captions to your images by identifying objects they contain. Most importantly, DenseCap API is fast. It takes seconds to scan and caption even your largest images. If building your own AI and machine learning apps interests you, then read on to find out how you can quickly build a Sencha Ext JS app that automatically labels objects in an image. Let’s get started building an app that looks like this: What is the DenseCap API by DeepAI? So what does the DenseCap API do? Simply put, the DenseCap API takes your image input and returns a JSON object that contains information about each item or object it detects within the image. For object it identifies it returns the following three attributes: Object label Confidence value of the object Coordinates/bounding box of the object within the image. The great thing about DeepAI is that the API key is provided for free. You can use this key to try out their interface and once you run out of a fixed number of queries, you can get your own key. To see it in action for yourself, first, open the command line in Sencha Cmd and type the following: curl -F ‘image=https://images.pexels.com/photos/4198322/pexels-photo-4198322.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260’ -H ‘api-key:42638949-3cf9-486b-a063-eaf5f4df0634’ https://api.deepai.org/api/densecap Pasted below is a part of the JSON text that the API returns. The API actually identifies more objects for this image, but we are only showing two of them below to help you gain an understanding of how the API works: { “id”: “26f9959b-2001-4f98-a648-99c6f8856190”, “output”: { “captions”: [ { “caption”: “a white plate with a white frosting”, “bounding_box”: [ 420, 189, 578, 589 ], “confidence”: 0.9974018335342407 }, { “caption”: “a small orange bowl”, “bounding_box”: [ […]
At Sencha, we are proud of our solutions. More importantly, however, we are proud of our customers, who are our most valuable assets. That’s why today we would like to share some of our greatest customer success stories. Read on for some of our favorite case studies explaining how a few well-known organizations have harnessed the power of Sencha development tools. Customer Success Stories We have seen and documented plenty of customer success stories at Sencha, but, that said, there are always a few that stand out. These are the case studies that we would like to share with you today — studies that demonstrate the power of our platforms and what you can achieve with our products in the real world. In these examples, we show you how Sencha products have proven themselves as scalable, affordable, and effective across a variety of industries from scientific research and robotics to vending machine manufacture. Whether you are a market leader or just starting out, read on to find out how developing with Sencha makes good sense. Ticketmaster Manages Event Ticket Sales Ticketmaster’s case study shows how Sencha ExtReact helped this international event ticket seller develop a platform that manages ticket sales around the world. From the biggest events in sport to the theatre and concerts you would love to see, Ticketmaster is probably where you turn to make it happen. They share how easy it was to implement ExtReact to streamline and improve their grid. In addition, they explain how efficiently they were able to work and manipulate their data with ExtReact without having to create new components from scratch. Finally, find out how we helped them take their new components and easily define and apply their corporate style. Read full case study. University At Buffalo Improves Scientific Research SUNY Buffalo explains their decision to use Ext JS components to develop their new bioinformatics and life sciences research platform instead of creating their own. Ext JS helped them create robust, highly-perfomant end-user interfaces. Their REDFly web app is built with Ext JS and is the perfect example of the incredible efficiency and speed you can achieve developing with Ext JS components. Read full case study. Kaseware Combats Cyber Crime Kaseware’s case study shows how they used Ext JS to enforce security on their codebase. In a comparison of Ext JS widgets with Angular widgets, Kaseware discovered you can’t always be certain Angular widgets are maintainable and secure. Ext JS gave them secure and configurable components for their application, without them having to resort to a third-party library or framework to achieve specific features — it’s all there in Ext JS. As if security wasn’t enough, Ext JS customizable of components allowed Kaseware the freedom and flexibility to style their components exactly like they wanted. Read full case study. Las Cumbres Robotic Advancements Las Cumbres’ case study describes how Sencha GTX enabled them to create a sophisticated control interface. With a highly customizable and intelligent interface designed using Sencha GXT, LCO’s operations team controls and monitors thousands of telemetric data points and telescope controls. The high-level abstraction attracted them to Sencha GTX for the availability of its components. LCO took advantage of the native buttons, tabs, and trees in Sencha GTX to create a great user interface to visualize and monitor a […]
Here we go with one more post about the power of Artificial Intelligence (AI) and Machine Learning (ML) using object and facial recognition! Today we are going to implement a really awesome application that can Identify objects and faces through your webcam. The application will teach the machine to save aspects of an object or face to and then tell you what or who it sees on camera. That’s incredible! We will be working based on this Google lab post using TensorFlow.js. and, of course, applying Ext JS best practice as usual. How can I get Getting Started with Sencha CMD? If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed you can make sure you have it properly installed and configured by running this command on terminal/shell: If it returns the sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details. How can I create the Sencha application? The first thing you want to do is create your project structure. Sencha CMD can do this for you easily–all you need to do is run this command. If you have any questions, take a look at the bullet points below. They explain what everything in the command does and what you will need to change to personalize your application. sencha -sdk /Users/fabio/sencha-sdks/ext-7.4.0/ generate app modern TeachableMachine ./teachable-machine-extjs /Users/fabio/sencha-sdks/ext-7.4.0/ is where your Ext JS folder is. TeachableMachine is the name of our application and the namespace for our classes. ./teachable-machine-extjs is the path for our project structure and the necessary files. modern is the toolkit for our application. Make sure when you run this command there is no error on the output. If there is no error, and everything runs correctly, you have successfully created your project structure. To be sure, however, let’s run our application with the initial structure. To do this, first navigate to your project folder: $ cd teachable-machine-extjs/ Then, run the command to open the server on a specific port: The output of this command will return the URL where your app is available. In this case, it is running on http://localhost:1841/. When you open it on your browser you will see a screen like this: How can I clean up the Sencha project? Once you have your basic project running, you can clean it up by removing the files and components that you don’t need. Use the command shown below to delete your unwanted files. While deleting, keep another terminal open and have the Sencha app running because it will update the application automatically: $ rm app/model/* app/store/* app/view/main/List.* With that done, let’s clean up our classes in app/view/main. Make sure your three classes look like this: Main.js: /** * This class is the main view for the application. It is specified in app.js as the * “mainView” property. That setting causes an instance of this class to be created and * added to the Viewport container. */ Ext.define(‘TeachableMachine.view.main.Main’, { extend: ‘Ext.Panel’, xtype: ‘app-main’, controller: ‘main’, viewModel: ‘main’ }); MainController.js: /** * This class is the controller for the main view for the application. It is specified as * the “controller” of the Main view class. */ Ext.define(‘TeachableMachine.view.main.MainController’, { extend: […]
