Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Sencha Charts Essentials
Sencha Charts Essentials

Sencha Charts Essentials: Create stunning charts and visualizations for both web and mobile applications

eBook
€10.99 €16.99
Paperback
€20.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. €18.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Sencha Charts Essentials

Chapter 2. Working with Out-of-the-box Charts

In the previous chapter, we saw how one can create a chart using the Sencha Charts Surface API. The only issue is that Surface is still a very low-level API providing drawing primitives, which can be used to create any drawing, including charts. We will have to write a lot of code to create a chart using these drawing primitives, handling events, resizing charts, data binding, theming, and so on.

In this chapter, we will move up in terms of API abstraction and look at the chart-related API, which we can use for visual presentation. In this chapter, you will learn the following topics:

  • Creating cartesian charts—line, bar, area charts
  • Creating polar charts—pie chart
  • Creating spacefilling charts—gauge chart
  • Theming your charts
  • Engaging users with gestures

Types of charts

Sencha Charts supports the following types of charts:

  • Cartesian charts: These charts are based on a two-dimensional coordinate system or the cartesian coordinate system. This is where the position of a point is determined based on its (x, y) coordinate. Typical examples are area charts, bar charts, and line charts.
  • Polar charts: These charts are based on the polar coordinate system. This is a two-dimensional coordinate system where the position of a point in the plane is determined based on its distance from a fixed point and angle from a fixed direction. Typical examples are Pie and Radar.
  • Spacefilling charts: These charts fill the entire space/area of the chart. For example, Treemap and Gauge.

The following screenshot shows the different types of Sencha Charts:

Types of charts

Anatomy of a chart

A chart has different areas. Each area has its own name. These names will act as the terminology that Sencha Charts will use and they will be used throughout this book. The following diagram depicts a cartesian chart created using Sencha Charts with its different areas:

Anatomy of a chart

Let's take a look at a few of the terminologies highlighted in the preceding figure:

  • Sprite: This is an object that is rendered on a drawing surface—Ext.draw.Surface—which we discussed in the previous chapter. Sencha Charts offers many different types of sprite, such as arc, circle, rectangle, path, and text, all of which are used internally to create different types of chart. They can also be added directly to a chart. In the preceding diagram, a text sprite is used to show the chart title.
  • Series: This class is very specific to the type of chart that we want to draw. For example, Sencha Charts uses area series to draw area charts, whereas bar series draw bar charts. Based on the samples...

Creating a cartesian chart

We will start by making a cartesian chart. A cartesian chart must have axes and a series along with the dataset:

  1. Create a project using Sencha Cmd with SCE as the application name.
  2. Edit the app/view/main/Main.js file and replace its contents with the following code to create a cartesian chart that shows quarterly sales and quarterly orders:
    Ext.define('SCE.view.main.Main', {
       extend: 'Ext.container.Container',
    
           xtype: 'app-main',
       
       layout: {
           type: 'fit'
       },
    
       items: [{
           xtype: 'cartesian',
           title: 'Chart',
           height: 500,
           width: 500,
           insetPadding: 40,
           legend: true,
           store: {
               fields: ['month', 'sales', 'order'],
               data: [
                   { month: 'Q1', sales: 100, order: 20 },
                   { month: 'Q2', sales: 250, order: 120 },
                   { month:...

Creating a polar chart

Pie and Radar are out-of-the-box polar charts provided by Sencha Charts. These charts use the polar coordinate system to draw sprites. Pie series does not require an axes configuration. However, Radar series does require axes configuration, one radial and another angular.

Let's see how we create a polar chart with a pie series.

Create a project using Sencha Cmd with SCE as the application name. Edit the app/view/main/Main.js file and replace its contents with the following code:

Ext.define('SCE.view.main.Main', {
   extend: 'Ext.container.Container',

       xtype: 'app-main',
   
   layout: {
       type: 'fit'
   },

   items: [{
       xtype: 'polar',
       title: 'Chart',
       height: 500,
       width: 500,
       store: {
           fields: ['sample', 'value'],
           data: [
               { sample: '1', value: 100 },
               { sample: '2', value...

Creating a spacefilling chart

A spacefilling chart does not have a coordinate requirement. It occupies the available area with the chart. Treemap, heatmap, and gauge charts are some examples. Treemap and heatmap charts do not come with Sencha Charts. Gauges, however, does come along with it. Let's see how to use it in an application.

Create a project using Sencha Cmd with SCE as the application name. Edit the app/view/main/Main.js file and replace its contents with the following code:

Ext.define('SCE.view.main.Main', {
   extend: 'Ext.container.Container',

       xtype: 'app-main',
   
   layout: {
       type: 'fit'
   },

   items: {
       xtype: 'spacefilling',
       series: {
           type: 'gauge',
           minimum: 100,
           maximum: 800,
           value: 400,
           donut: 30,
           needle: true,
           colors: ['orange', 'blue']

       }
   }
});

The preceding code uses...

Types of charts


Sencha Charts supports the following types of charts:

  • Cartesian charts: These charts are based on a two-dimensional coordinate system or the cartesian coordinate system. This is where the position of a point is determined based on its (x, y) coordinate. Typical examples are area charts, bar charts, and line charts.

  • Polar charts: These charts are based on the polar coordinate system. This is a two-dimensional coordinate system where the position of a point in the plane is determined based on its distance from a fixed point and angle from a fixed direction. Typical examples are Pie and Radar.

  • Spacefilling charts: These charts fill the entire space/area of the chart. For example, Treemap and Gauge.

The following screenshot shows the different types of Sencha Charts:

Anatomy of a chart


A chart has different areas. Each area has its own name. These names will act as the terminology that Sencha Charts will use and they will be used throughout this book. The following diagram depicts a cartesian chart created using Sencha Charts with its different areas:

Let's take a look at a few of the terminologies highlighted in the preceding figure:

  • Sprite: This is an object that is rendered on a drawing surface—Ext.draw.Surface—which we discussed in the previous chapter. Sencha Charts offers many different types of sprite, such as arc, circle, rectangle, path, and text, all of which are used internally to create different types of chart. They can also be added directly to a chart. In the preceding diagram, a text sprite is used to show the chart title.

  • Series: This class is very specific to the type of chart that we want to draw. For example, Sencha Charts uses area series to draw area charts, whereas bar series draw bar charts. Based on the samples/data, the series...

Creating a cartesian chart


We will start by making a cartesian chart. A cartesian chart must have axes and a series along with the dataset:

  1. Create a project using Sencha Cmd with SCE as the application name.

  2. Edit the app/view/main/Main.js file and replace its contents with the following code to create a cartesian chart that shows quarterly sales and quarterly orders:

    Ext.define('SCE.view.main.Main', {
       extend: 'Ext.container.Container',
    
           xtype: 'app-main',
       
       layout: {
           type: 'fit'
       },
    
       items: [{
           xtype: 'cartesian',
           title: 'Chart',
           height: 500,
           width: 500,
           insetPadding: 40,
           legend: true,
           store: {
               fields: ['month', 'sales', 'order'],
               data: [
                   { month: 'Q1', sales: 100, order: 20 },
                   { month: 'Q2', sales: 250, order: 120 },
                   { month: 'Q3', sales: 75, order: 40},
                   { month: 'Q4', sales: 120, order: 25}
               ]
           },
           axes: [{
        ...
Left arrow icon Right arrow icon

Description

If you are an Ext JS or Sencha Touch developer, designer, or architect who wants to build enterprise-scale data visualization capabilities using Sencha, then this book is ideal for you. You should have a knowledge of HTML, JavaScript, CSS, and Sencha Ext JS or Sencha Touch fundamentals, in particular. Some familiarity with SVG and HTML5 Canvas would be preferred, but not required.

Who is this book for?

If you are an Ext JS or Sencha Touch developer, designer, or architect who wants to build enterprise-scale data visualization capabilities using Sencha, then this book is ideal for you. You should have a knowledge of HTML, JavaScript, CSS, and Sencha Ext JS or Sencha Touch fundamentals, in particular. Some familiarity with SVG and HTML5 Canvas would be preferred, but not required.

What you will learn

  • Set up and configure Sencha Charts and understand its extensibility capabilities
  • Create interactive HTML5 charts that are portable across the Web and touch/mobile
  • Deliver rich, professional, and engaging visualizations of complex, customized data including financial data, infographics, and so on
  • Understand the basic building blocks and the overall architecture of Sencha Charts
  • Get to grips with SVG and Canvas APIs to draw basic geometrical shapes
  • Create different types of charts, such as cartesian, polar, and spacefilling, in your application using outofbox charts from Sencha Charts
  • Compare Sencha Charts with other charting libraries/SDKs

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : May 30, 2015
Length: 214 pages
Edition : 1st
Language : English
ISBN-13 : 9781785289767
Category :
Languages :

What do you get with a Packt Subscription?

Free for first 7 days. €18.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : May 30, 2015
Length: 214 pages
Edition : 1st
Language : English
ISBN-13 : 9781785289767
Category :
Languages :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 99.97
Sencha Charts Essentials
€20.99
Ext JS Application Development Blueprints
€36.99
Learning Ext JS_Fourth Edition
€41.99
Total 99.97 Stars icon

Table of Contents

10 Chapters
1. Fundamentals of Sencha Charts Chevron down icon Chevron up icon
2. Working with Out-of-the-box Charts Chevron down icon Chevron up icon
3. Sencha Charts Architecture Chevron down icon Chevron up icon
4. Creating a Custom Cartesian Chart Chevron down icon Chevron up icon
5. Creating a Custom Polar Chart Chevron down icon Chevron up icon
6. Creating a Custom Spacefilling Chart Chevron down icon Chevron up icon
7. Theming Chevron down icon Chevron up icon
8. Working with Touch Gestures Chevron down icon Chevron up icon
9. Comparison with Other JavaScript Charting Libraries Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Philip Arad Sep 02, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
If you are an Ext JS or Sencha Touch developer who wants to build enterprise-scale data visualization using Sencha, this book is ideal for you.Sencha Charts is a new and powerful library used to create rich and beautiful charts for your Mobile Sencha Touch and Ext JS applications. Built in HTML5, Sencha Charts is optimized for performance and fully support gestures and touch devices on mobile, thus making visualizing data effortless.With your knowledge of HTML, JavaScript, CSS, and Sencha Ext JS or Sencha Touch fundamentals, you will be able to upgrade your application on desktop and mobile, to meet enterprise standard.First in the book, you will get familiar with charting fundamentals and then engage with the Sencha Charts architecture. You will then learn how to use out-of-the-box charts, and then create your own custom Cartesian, polar, and space filling charts to visualize your own data.Finally, you will see how Sencha Charts compares with other charting libraries for all your data expression needs.During your studies you will discover out-of-the-box enterprise visualizations, develop your own custom charts and learn to make your charts work on desktop and touch-sensitive devicesYou will create interactive HTML5 charts that are portable across the Web and touch/mobile and deliver rich, professional, and engaging visualizations of complex, customized data including financial data, infographics, and so on.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.