20,39 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 175
Veröffentlichungsjahr: 2015
Ähnliche
Table of Contents
Sencha Charts Essentials
Sencha Charts Essentials
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: May 2015
Production reference: 1260515
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78528-976-7
www.packtpub.com
Credits
Author
Ajit Kumar
Reviewers
Anurag Bhandari
Peter M. Corcoran
Matt Goldspink
Shinobu Kawano
Michael McCurrey
Commissioning Editor
Veena Pagare
Acquisition Editor
Sam Wood
Content Development Editor
Anish Sukumaran
Technical Editors
Manal Pednekar
Chinmay S. Puranik
Copy Editor
Pranjali Chury
Project Coordinator
Izzat Contractor
Proofreaders
Stephen Copestake
Safis Editing
Indexer
Mariammal Chettiyar
Graphics
Disha Haria
Production Coordinator
Nilesh R. Mohite
Cover Work
Nilesh R. Mohite
About the Author
Ajit Kumar has over 16 years of experience in technology areas ranging from embedded systems to large enterprise applications. He worked with various multinational corporations such as Honeywell, Hughes, Virtusa, and Convergys, before starting his own company—Walking Tree—which specializes in Sencha frameworks.
Ajit has authored books on open source frameworks, including Sencha Touch Cookbook, Sencha Touch Cookbook Second Edition, Sencha MVC Architecture, and ADempiere 3.6 Cookbook, all by Packt Publishing, which he considers his way of thanking the awesome open source community!
I would like to thank my wife, Priti, for her untiring support and the great team at Packt Publishing for the wonderful authoring experience!
About the Reviewers
Anurag Bhandari is a web programmer and an open source evangelist. He has extensive experience in developing web applications, real-time web apps, and mobile apps. He's well-versed with several computer languages, such as C#, Java, PHP, Python, and JavaScript. Also, when it comes to languages, he speaks Hindi, Punjabi, and French. Being a technology enthusiast, he keeps meddling with trending technologies and trying out new frameworks and platforms. He has been heavily involved with open source Linux projects, OpenMandriva and Granular. He is also a bookworm, sports fan, gadget freak, philatelist, and movie buff. When not following any of his hobbies, he finds peace playing video games.
He hasn't technically reviewed any book before this one. However, he once wrote a general review of Instant Meteor JavaScript Framework Starter, Packt Publishing, on his blog.
I'd like to congratulate Ajit Kumar on producing a comprehensive guide to creating beautiful charts and infographics using Sencha Charts. Ajit has put in great effort and hardwork to painstakingly cover even the minutest details of the framework. He has spent quality time on building both practical and aesthetically pleasing examples that you are bound to love and use in your own work.
Peter M. Corcoran has over 15 years of experience in innovative solution development, relationship building, and process and project management. In addition, he has a proven track record of analytical, technical, conceptual, and creative thinking skills, along with a strong commitment to customer service and support. He is currently working on an electrical engineering degree at the University of Alabama, Birmingham (his estimated graduation date is May 2016), and is a team leader of mobile application development at Regions Bank.
Peter started working with Sencha products in 2008 while working as a continuous service improvement analyst at the Southern Company. He built powerful web applications that helped facilitate support activities within information technology. As each version of Sencha's products was released, Peter implemented new applications and built the company's first mobile app using Sencha Touch. His most compelling and highly-used application was a work review tool that combined big data technology with the power and flexibility of Sencha Ext JS and Sencha Charts.
I would like to thank my wife, Jennifer, and my children, Jonathan, Lucas, Zachary, and Lilyanna, for their patience and understanding while I reviewed this book and went to class and work. It has been a long road to where we are, and their love and dedication is what keeps me moving every day. I would like to acknowledge my brothers, family, and friends, who are a constant encouragement in my life. Finally, I would like to thank God for blessing me with all He has, and for the strength when I didn't think there was any left.
Matt Goldspink is currently the lead engineer at Vlocity, Inc., based in San Francisco, working on their mobile and web platform. Prior to this, he held various roles at start-ups, banks, and also spent time as a technology trainer. Matt was the lead developer and architect for an award-winning mobile web platform for one of the world's leading investment banks. He has been a user of the Sencha framework for 5 years and was a speaker at their annual conference.
I'd like to thank my partner, Mary, for supporting and encouraging me in all I do.
Shinobu Kawano is a JavaScript programmer based in Tokyo. Earlier, he was working for Canon IT Solutions Inc., as a solutions consultant of Sencha-featured system development. Currently, he is working as a sales engineer of Sencha-featured system development in the same company. His Twitter handle is @kawanoshinobu.
He has been addicted to Sencha frameworks since 2011, and he is the author of Sencha Touch Perfect Guide—HTML5 mobile web application framework, ASCII MEDIA WORKS Inc., which was published in 2013 in Japanese.
Michael McCurrey is the software development manager for Ping Golf, a leader in the golf industry. His primary responsibility is designing and implementing solutions that use cutting-edge enterprise technologies to fit the company's varied needs across the globe. He has held a number of positions in the past, including software engineer, development team leader, and a C# trainer. Michael earned his bachelor's and master's degree from Ottawa University, and is currently pursuing a doctoral in information technology.
I would like to thank my wife, Sunni McCurrey, for her unwavering support while I used my personal time to review this book. I would also like to thank my children, Mickie, Zachary, and Daimon.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
Sencha Charts is a new and powerful library used to create rich and beautiful charts for your Sencha Touch and Ext JS applications. Built in HTML5, Sencha Charts is optimized for performance and fully supportive of gestures and touch devices to make visualizing data effortless.
What this book covers
Chapter 1, Fundamentals of Sencha Charts, covers the basic drawing constructs, such as line, circle, path, text, which are the fundamental building blocks of any charting library. It is using these drawing constructs that bar charts, pie charts, and so on, are created. This chapter explains how these building blocks are drawn on a screen using SVG and HTML5 Canvas APIs. It ends the discussion by showing how Sencha Charts uses these different APIs to abstract the device-specific and API-specific differences.
Chapter 2, Working with Out-of-the-box Charts, takes you through the different types of charts—cartesian, polar, and spacefilling—that come along with Sencha Charts, and demonstrates how they can be used in your application for data visualization. This chapter also offers the opportunity to understand the different concepts involved in creating charts using Sencha Charts, such as axis, legend, series, sprite, and so on.
Chapter 3, Sencha Charts Architecture, goes inside the framework and shows how the framework implements the architecture, internally. This chapter describes the overall architecture of Sencha Charts and sets the foundation for the subsequent topics where you will create custom charts.
Chapter 4, Creating a Custom Cartesian Chart, describes the detailed steps involved in creating a custom cartesian chart and provides the practical implementation of a stock chart—William %R—to apply the steps.
Chapter 5, Creating a Custom Polar Chart, describes the detailed steps involved in creating a custom polar chart and provides a practical implementation of a Market Clock to apply the steps.
Chapter 6, Creating a Custom Spacefilling Chart, describes the detailed steps involved in creating a custom spacefilling chart and provides the practical implementation of a periodic table to apply the steps.
Chapter 7, Theming, describes how theming—axis styling, legend styling, series colors, and so on—is supported in Sencha Charts and how you can leverage it to theme your charts. It also explains the theming-related considerations that you must have when you are implementing your own custom charts.
Chapter 8, Working with Touch Gestures, describes the different touch gestures that Sencha Charts supports and how some of the existing charts use them to engage users. It describes the configurations specific to different interactions and how to set them up on a chart. This chapter also explains how we can create custom interactions on a custom chart using touch gestures.
Chapter 9, Comparison with Other JavaScript Charting Libraries, compares Sencha Charts with other popular charting libraries, such as HighCharts, FusionCharts, amCharts, and Google Charts, to present a comparative study of different frameworks and their capabilities. It will describe, briefly, how the same task, for example, creating a custom cartesian chart, can be implemented in different libraries.
What you need for this book
You will need Sencha Cmd 5.0.2.270+, Ruby 2.0, Compass 1.0.1+, Oracle JDK 1.7+, Chrome browser (latest), a web server—XAMPP v3.2.1+ with Apache and a Windows, Linux, or Mac OS.
Who this book is for
This book is for Ext JS or Sencha Touch developer, designer, or architect who wants to build enterprise-scale data visualization capabilities using Sencha.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/9767OS_ColorImage.pdf.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. Fundamentals of Sencha Charts
Data visualization has always been an integral part of an application, because of its power to quickly disseminate information. It is no different for an application developed using Sencha Ext JS or Sencha Touch frameworks. Recently, with the launch of Ext JS 5, Sencha has created a separate charting package—Sencha Charts—to add charting capability to an application. The beauty is that the same Sencha Charts library works inside desktop applications that run Ext JS, as well as in touch- or mobile-based applications that run Sencha Touch.
There are two ways to draw in a browser—Scalable Vector Graphics (SVG) and Canvas API. Though VML also exists for older IE browsers, we have excluded it for brevity. All the JavaScript charting libraries use SVG and Canvas API to offer charting capability to their users—for rendering as well as interactions. Understanding them will provide the foundation that is needed to understand Sencha Charts and its capabilities, and more importantly, reasons to use it.
SVG and Canvas are supported by browsers to render graphics. SVG was introduced in 1999 to render vector graphics, which can scale up or down, based on the screen resolution, without any visual distortion, as compared to raster one. SVG works similar to XML where you work with elements, attributes, and styles. SVG is a retained mode graphics model that is persisted in browser memory and we can manipulate it through code. This manipulation leads to automatic re-rendering where the user sees the updated drawing.
Canvas was a new specification brought to us by Apple in 2004. It follows an immediate mode graphics model, where it renders the drawing and forgets it. It does not have a built-in scene graph that SVG has, where it retains the graphics in memory and allows its manipulation. So, to recreate the same drawing, you will have to call the APIs to redraw it on the canvas.
In this chapter, we will do the following:
Introducing the sample chart
For demonstration and comparison, we will create a chart using Canvas API and SVG, and then we will create the same using Sencha Charts APIs.
Our sample chart, as shown in the following figure, will have:
