Book Image

Sencha Charts Essentials

By : Ajit Kumar
Book Image

Sencha Charts Essentials

By: Ajit Kumar

Overview of this book

Table of Contents (16 chapters)
Sencha Charts Essentials
About the Author
About the Reviewers

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: [{