docs/guides/drawing_and_charting/README.md

   1 # Drawing and Charting
   2 ______________________________________________
   3
   4 This document is intended to guide you through the overall design and implementation details
   5 of the Drawing and Charting packages. The drawing and charting packages enable you to create
   6 cross browser and cross device graphics in a versatile way.
   7
   8 The structure of this document will cover three main topics:
   9
  10 - Section I: "Draw" a versatile cross-browser/device package to draw general purpose
  11 graphics and animations.
  12 - Section II: "Chart" A high level presentation of the charting package and how classes are
  13 organized in it.
  14 - Section III: "Series" A presentation of the available series and their use.
  15
  16
  17 ## I. The Draw Package
  18 ______________________
  19
  20 The design choices in the graphics team concerning drawing were not just contrained to charting:
  21 we needed a versatile tool that would enable us to create custom graphics in a cross-browser/device manner and also perform rich animations with them.
  22
  23 The Draw package contains a Surface class that abstracts the underlying graphics implementation
  24 and enables the developer to create arbitrarily shaped Sprites or SpriteGroups that respond to
  25 interactions like mouse events and also provide rich animations on all attributes like shape, color, size,
  26 etc.
  27
  28 The underlying/concrete implementations for the Surface class are SVG (for SVG capable browsers) and
  29 VML (for the Internet Explorer family - < 9). Surface can be considered as an interface for
  30 the SVG and VML rendering engines. Surface is agnostic to its underlying implementations. Most of the methods and ways
  31 to create sprites are heavily inspired by the [SVG standard](http://www.w3.org/TR/SVG/).
  32
  33 ### Creating a Drawing Surface
  34
  35 You can create a simple drawing surface without loading the Charting package at all. This can be useful
  36 to create arbitrary graphics that work on all browsers/devices and animate well. For example, you could
  37 create an interactive map of the United States where each state is a sprite, or also an infographic where
  38 each element is also a sprite. What's interesting about making sprites and not images is that the document
  39 acquires a new level of interactivity but also that being VML and SVG based the images will never loose quality
  40 and can be printed correctly.
  41
  42 In order to use the Draw package directly you can create a Draw Component and (for example) append it to an `Ext.Window`:
  43
  44     @example
  45     var drawComponent = Ext.create('Ext.draw.Component', {
  46         viewBox: false,
  47         items: [{
  48             type: 'circle',
  49             fill: '#ffc',
  50             radius: 100,
  51             x: 100,
  52             y: 100
  53         }]
  54     });
  55
  56     Ext.create('Ext.Window', {
  57         width: 230,
  58         height: 230,
  59         layout: 'fit',
  60         items: [drawComponent]
  61     }).show();
  62
  63 In this case we created a draw component and added a sprite to it. The *type* of the sprite is *circle* so if you run this code
  64 you'll see a yellow-ish circle in a Window. When setting `viewBox` to `false` we are responsible for setting the object's position and
  65 dimensions accordingly.
  66
  67 Sprites can have different types. Some of them are:
  68
  69  - *circle* - To draw circles. You can set the radius by using the *radius* parameter in the sprite configuration.
  70  - *rect* - To render rectangles. You can set the width and height of the rectangle by using the *width* and *height* parameters
  71  in the sprite configuration.
  72  - *text* - To render text as a sprite. You can set the font/font-size by using the *font* parameter.
  73  - *path* - The most powerful sprite type. With it you can create arbitrary shapes by using the [SVG path syntax](http://www.w3.org/TR/SVG/paths.html).
  74 You can find a quick tutorial on to how to get started with
  75 the path syntax [here](https://developer.mozilla.org/en/SVG/Tutorial/Paths).
  76
  77 A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
  78 The configuration of a Sprite is an object with the following properties:
  79
  80 - **type** - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'.
  81 - **width** - (Number) Used in rectangle sprites, the width of the rectangle.
  82 - **height** - (Number) Used in rectangle sprites, the height of the rectangle.
  83 - **size** - (Number) Used in square sprites, the dimension of the square.
  84 - **radius** - (Number) Used in circle sprites, the radius of the circle.
  85 - **x** - (Number) The position along the x-axis.
  86 - **y** - (Number) The position along the y-axis.
  87 - **path** - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
  88 - **opacity** - (Number) The opacity of the sprite.
  89 - **fill** - (String) The fill color.
  90 - **stroke** - (String) The stroke color.
  91 - **stroke-width** - (Number) The width of the stroke.
  92 - **font** - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS `font` parameter.
  93 - **text** - (String) Used with text type sprites. The text itself.
  94
  95 Additionally there are three transform objects that can be set with `setAttributes` which are `translate`, `rotate` and
  96 `scale`.
  97
  98 For translate, the configuration object contains x and y attributes for the translation. For example:
  99
 100     sprite.setAttributes({
 101       translate: {
 102        x: 10,
 103        y: 10
 104       }
 105     }, true);
 106
 107 For rotate, the configuration object contains x and y attributes for the center of the rotation (which are optional),
 108 and a degrees attribute that specifies the rotation in degrees. For example:
 109
 110     sprite.setAttributes({
 111       rotate: {
 112        degrees: 90
 113       }
 114     }, true);
 115
 116 For scale, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:
 117
 118     sprite.setAttributes({
 119       scale: {
 120        x: 10,
 121        y: 3
 122       }
 123     }, true);
 124
 125 ### Interacting with a Sprite
 126
 127 Now that we've created a draw surface with a sprite in it, let's dive into how to interact with the sprite.
 128 We can get a handle to the sprite we want to modify by adding that sprite imperatively to the surface:
 129
 130     @example
 131     // Create a draw component
 132     var drawComponent = Ext.create('Ext.draw.Component', {
 133         viewBox: false
 134     });
 135
 136     // Create a window to place the draw component in
 137     Ext.create('Ext.Window', {
 138         width: 220,
 139         height: 230,
 140         layout: 'fit',
 141         items: [drawComponent]
 142     }).show();
 143
 144     // Add a circle sprite
 145     var myCircle = drawComponent.surface.add({
 146         type: 'circle',
 147         x: 100,
 148         y: 100,
 149         radius: 100,
 150         fill: '#cc5'
 151     });
 152
 153     // Now do stuff with the sprite, like changing its properties:
 154     myCircle.setAttributes({
 155         fill: '#ccc'
 156     }, true);
 157
 158     // or animate an attribute on the sprite
 159     myCircle.animate({
 160         to: {
 161             fill: '#555'
 162         },
 163         duration: 2000
 164     });
 165
 166     // Add a mouseup listener to the sprite
 167     myCircle.addListener('mouseup', function() {
 168         alert('mouse upped!');
 169     });
 170
 171 In this example we've seen how we can add events, set sprite attributes and animate these attributes using the
 172 draw package. As you can see this package is a versatile abstraction layer over the graphics we can do. What's
 173 most interesting about this class is that we aren't tied to a specific shape or structure; also all elements
 174 support events, setting attributes and creating animations. Most important of all, all of this is compatible in all browsers and
 175 devices.
 176
 177 ## II. Charts
 178
 179 So now that we learnt about the expressive power of the draw package, let's dive into charts. The chart
 180 package consists of a hierarchy of classes that define a chart container (something like a surface but more specific for
 181 handling charts); axes, legends, series, labels, callouts, tips, cartesian and radial coordinates, and specific series
 182 like Pie, Area, Bar, etc.
 183
 184 In this section we will cover how these classes are tied together and what bits of functionality go into each of these
 185 classes. We won't cover each particular series, since that is done in the next section.
 186
 187 ### Chart
 188
 189 The Chart class is the main drawing surface for series. It manages the rendering of each series and also how axes are
 190 drawn and defined. Chart also delegates mouse events over to different areas of the Chart like Series, Axes, etc.
 191 The Chart class extends Draw Component.
 192
 193 A Chart instance has access to:
 194
 195  - axes - Accessed through `chart.axes`. All the axes being defined and drawn for this visualization. This is a mixed collection.
 196  - series - Accessed through `chart.series`. All the series being drawn for the chart. This could be line, bar, scatter, etc. This is also a mixed collection.
 197  - legend - The legend box object and its legend items.
 198
 199 The chart instance supports custom events that can be triggered right before and during the rendering of the visualization.
 200 We can add handlers for these events by using:
 201
 202     chart.on({
 203       'refresh': function() {
 204         alert('(re)drawing the chart');
 205       }
 206     });
 207
 208 Chart also delegates events like `itemmousedown` and `itemmouseup` to the series so that we can append
 209 listeners to those objects and get the target sprite of the event.
 210
 211 ### Legend
 212
 213 The chart configuration object accepts a `legend` parameter to enable legend items for each series and
 214 to set the position of the legend. These options are passed into the constructor of the chart. For example:
 215
 216     var chart = Ext.create('Ext.chart.Chart', {
 217         width: 200,
 218         height: 200,
 219
 220         // Set a legend
 221         legend: {
 222             position: 'left'
 223         },
 224
 225         // Define axes
 226         axes: [/*set an axis configuration*/],
 227
 228         // Define series
 229         series: [/*set series configuration*/]
 230     });
 231
 232 Each series object needs to have the `showInLegend` parameter set to `true` in order to be in the legend list.
 233
 234 ### Axis
 235
 236 The `axis` package contains an `Abstract` axis class that is extended by `Axis` and `Radial` axes. `Axis` represents
 237 a `Cartesian` axis and `Radial` uses polar coordinates to represent the information for polar based visualizations like
 238 Pie and Radar series. Axes are bound to the type of data we're trying to represent. There are axes for categorical
 239 information (called `Category` axis) and also axis for quantitative information like `Numeric`. For time-based information
 240 we have the `Time` axis that enables us to render information over a specific period of time, and to update that period of time
 241 with smooth animations. If you'd like to know more about each axis please go to the axis package documentation. Also, you will find
 242 configuration examples for axis in the bottom series examples.
 243
 244 An axis contains divisions and subdivisions of values, represented by major and minor ticks. These can be adjusted automatically
 245 or manually to some specified interval, maximum and minimum values. The configuration options `maximum`, `minimum`, `majorTickSteps` and
 246 `minorTickSteps` in the `Numeric` axis are used to change the configuration and placement of the major and minor ticks. For example, by
 247 using:
 248
 249             axes: [{
 250                 type: 'Numeric',
 251                 position: 'left',
 252                 fields: ['data1'],
 253                 title: 'Number of Hits',
 254                 minimum: 0,
 255                 //one minor tick between two major ticks
 256                 minorTickSteps: 1
 257             }, {
 258                 type: 'Category',
 259                 position: 'bottom',
 260                 fields: ['name'],
 261                 title: 'Month of the Year'
 262             }]
 263
 264 The following configuration will produce minor ticks in the left axis
 265 for the line series:
 266
 267 {@img Ticks.jpg Series Image}
 268
 269
 270 ### Gradients
 271
 272 The drawing and charting package has also the power to create
 273 linear gradients. The gradients can be defined in the Chart configuration
 274 object as an array of gradient configurations. For each gradient configuration
 275 the following parameters are specified:
 276
 277  * **id** - string - The unique name of the gradient.
 278  * **angle** - number, optional - The angle of the gradient in degrees.
 279  * **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values.
 280
 281 Each key in the stops object represents the percentage of the fill on the specified color for
 282 the gradient.
 283
 284 For example:
 285
 286         gradients: [{
 287             id: 'gradientId',
 288             angle: 45,
 289             stops: {
 290                 0: {
 291                     color: '#555'
 292                 },
 293                 100: {
 294                     color: '#ddd'
 295                 }
 296             }
 297         },  {
 298             id: 'gradientId2',
 299             angle: 0,
 300             stops: {
 301                 0: {
 302                     color: '#590'
 303                 },
 304                 20: {
 305                     color: '#599'
 306                 },
 307                 100: {
 308                     color: '#ddd'
 309                 }
 310             }
 311         }]
 312
 313 You can apply a gradient to a sprite by setting a reference to a gradient **id** in
 314 the fill property. This reference is done via a url syntax. For example:
 315
 316         sprite.setAttributes({
 317             fill: 'url(#gradientId)'
 318         }, true);
 319
 320
 321 ### Series
 322
 323 A `Series` is an abstract class extended by concrete visualizations like
 324 `Line` or `Scatter`. The `Series` class contains code that is common to all of these series, like event handling, animation
 325 handling, shadows, gradients, common offsets, etc. The `Series` class is enhanced with a set of *mixins* that provide functionality
 326 like highlighting, callouts, tips, etc. A `Series` will contain an array of `items` where each item contains information about the
 327 positioning of each element, its associated `sprite` and a `storeItem`. The series also share the `drawSeries` method that updates
 328 all positions for the series and then renders the series.
 329
 330 ### Theming
 331
 332 The Chart configuration object may have a `theme` property with a string value that references a builtin theme name.
 333
 334     var chart = Ext.create('Ext.chart.Chart', {
 335         theme: 'Blue',
 336         /* Other options... */
 337     });
 338
 339 A Theme defines the style of the shapes, color, font, axes and background
 340 of a chart. The theming configuration can be very rich and complex:
 341
 342
 343     {
 344         axis: {
 345             fill: '#000',
 346             'stroke-width': 1
 347         },
 348         axisLabelTop: {
 349             fill: '#000',
 350             font: '11px Arial'
 351         },
 352         axisLabelLeft: {
 353             fill: '#000',
 354             font: '11px Arial'
 355         },
 356         axisLabelRight: {
 357             fill: '#000',
 358             font: '11px Arial'
 359         },
 360         axisLabelBottom: {
 361             fill: '#000',
 362             font: '11px Arial'
 363         },
 364         axisTitleTop: {
 365             fill: '#000',
 366             font: '11px Arial'
 367         },
 368         axisTitleLeft: {
 369             fill: '#000',
 370             font: '11px Arial'
 371         },
 372         axisTitleRight: {
 373             fill: '#000',
 374             font: '11px Arial'
 375         },
 376         axisTitleBottom: {
 377             fill: '#000',
 378             font: '11px Arial'
 379         },
 380         series: {
 381             'stroke-width': 1
 382         },
 383         seriesLabel: {
 384             font: '12px Arial',
 385             fill: '#333'
 386         },
 387         marker: {
 388             stroke: '#555',
 389             fill: '#000',
 390             radius: 3,
 391             size: 3
 392         },
 393         seriesThemes: [{
 394             fill: '#C6DBEF'
 395         }, {
 396             fill: '#9ECAE1'
 397         }, {
 398             fill: '#6BAED6'
 399         }, {
 400             fill: '#4292C6'
 401         }, {
 402             fill: '#2171B5'
 403         }, {
 404             fill: '#084594'
 405         }],
 406         markerThemes: [{
 407             fill: '#084594',
 408             type: 'circle'
 409         }, {
 410             fill: '#2171B5',
 411             type: 'cross'
 412         }, {
 413             fill: '#4292C6',
 414             type: 'plus'
 415         }]
 416     }
 417
 418 We can also create a seed of colors that will be the base for the entire theme just by creating
 419 a simple array of colors in the configuration object like:
 420
 421     {
 422       colors: ['#aaa', '#bcd', '#eee']
 423     }
 424
 425 When setting a base color the theme will generate an array of colors that match the base color:
 426
 427     {
 428       baseColor: '#bce'
 429     }
 430
 431 You can create a custom theme by extending from the base theme. For example, to create a custom `Fancy` theme we can do:
 432
 433     var colors = ['#555',
 434                   '#666',
 435                   '#777',
 436                   '#888',
 437                   '#999'];
 438
 439     var baseColor = '#eee';
 440
 441     Ext.define('Ext.chart.theme.Fancy', {
 442         extend: 'Ext.chart.theme.Base',
 443
 444         constructor: function(config) {
 445             this.callParent([Ext.apply({
 446                 axis: {
 447                     fill: baseColor,
 448                     stroke: baseColor
 449                 },
 450                 axisLabelLeft: {
 451                     fill: baseColor
 452                 },
 453                 axisLabelBottom: {
 454                     fill: baseColor
 455                 },
 456                 axisTitleLeft: {
 457                     fill: baseColor
 458                 },
 459                 axisTitleBottom: {
 460                     fill: baseColor
 461                 },
 462                 colors: colors
 463             }, config)]);
 464         }
 465     });
 466
 467     var chart = Ext.create('Ext.chart.Chart', {
 468         theme: 'Fancy',
 469
 470         /* Other options here... */
 471     });
 472
 473
 474 ## III. Series
 475
 476 The following section will go through our available series/visualizations, introduce each
 477 one of them and show a complete configuration example of the series. The example will include the `Chart`,
 478 `Axis` and `Series` configuration options.
 479
 480 ### Area
 481
 482 Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information.
 483 As with all other series, the Area Series must be appended in the *series* Chart array configuration.
 484
 485
 486 {@img Area.jpg Series Image}
 487
 488
 489 A typical configuration object for the area series could be:
 490
 491     var chart = Ext.create('Ext.chart.Chart', {
 492         renderTo: Ext.getBody(),
 493         width: 800,
 494         height: 600,
 495         animate: true,
 496         store: store,
 497         legend: {
 498             position: 'bottom'
 499         },
 500
 501         // Add Numeric and Category axis
 502         axes: [{
 503             type: 'Numeric',
 504             grid: true,
 505             position: 'left',
 506             fields: ['data1', 'data2', 'data3'],
 507             title: 'Number of Hits',
 508             grid: {
 509                 odd: {
 510                     opacity: 1,
 511                     fill: '#ddd',
 512                     stroke: '#bbb',
 513                     'stroke-width': 1
 514                 }
 515             },
 516             minimum: 0,
 517             adjustMinimumByMajorUnit: 0
 518         }, {
 519             type: 'Category',
 520             position: 'bottom',
 521             fields: ['name'],
 522             title: 'Month of the Year',
 523             grid: true,
 524             label: {
 525                 rotate: {
 526                     degrees: 315
 527                 }
 528             }
 529         }],
 530
 531         // Add the Area Series
 532         series: [{
 533             type: 'area',
 534             highlight: true,
 535             axis: 'left',
 536             xField: 'name',
 537             yField: ['data1', 'data2', 'data3'],
 538             style: {
 539                 opacity: 0.93
 540             }
 541         }]
 542     });
 543
 544
 545 ### Bar
 546
 547 Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for different
 548 categories that can show some progression (or regression) in the dataset.
 549 As with all other series, the Bar Series must be appended in the *series* Chart array configuration. See the Chart
 550 documentation for more information.
 551
 552
 553 {@img Bar.jpg Series Image}
 554
 555
 556 A typical configuration object for the bar series could be:
 557
 558     var chart = Ext.create('Ext.chart.Chart', {
 559         renderTo: Ext.getBody(),
 560         width: 800,
 561         height: 600,
 562         animate: true,
 563         store: store,
 564         theme: 'White',
 565         axes: [{
 566             type: 'Numeric',
 567             position: 'bottom',
 568             fields: ['data1'],
 569             title: 'Number of Hits'
 570         }, {
 571             type: 'Category',
 572             position: 'left',
 573             fields: ['name'],
 574             title: 'Month of the Year'
 575         }],
 576         //Add Bar series.
 577         series: [{
 578             type: 'bar',
 579             axis: 'bottom',
 580             xField: 'name',
 581             yField: 'data1',
 582             highlight: true,
 583             label: {
 584                 display: 'insideEnd',
 585                 field: 'data1',
 586                 renderer: Ext.util.Format.numberRenderer('0'),
 587                 orientation: 'horizontal',
 588                 color: '#333',
 589                'text-anchor': 'middle'
 590             }
 591         }]
 592     });
 593
 594
 595 ### Line
 596
 597 Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different
 598 categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.
 599 As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart
 600 documentation for more information.
 601
 602
 603 {@img Line.jpg Series Image}
 604
 605
 606 A typical configuration object for the line series could be:
 607
 608     var chart = Ext.create('Ext.chart.Chart', {
 609         renderTo: Ext.getBody(),
 610         width: 800,
 611         height: 600,
 612         animate: true,
 613         store: store,
 614         shadow: true,
 615         theme: 'Category1',
 616         axes: [{
 617             type: 'Numeric',
 618             minimum: 0,
 619             position: 'left',
 620             fields: ['data1', 'data2', 'data3'],
 621             title: 'Number of Hits'
 622         }, {
 623             type: 'Category',
 624             position: 'bottom',
 625             fields: ['name'],
 626             title: 'Month of the Year'
 627         }],
 628
 629         // Add two line series
 630         series: [{
 631             type: 'line',
 632             axis: 'left',
 633             xField: 'name',
 634             yField: 'data1',
 635             markerConfig: {
 636                 type: 'cross',
 637                 size: 4,
 638                 radius: 4,
 639                 'stroke-width': 0
 640             }
 641         }, {
 642             type: 'line',
 643             axis: 'left',
 644             fill: true,
 645             xField: 'name',
 646             yField: 'data3',
 647             markerConfig: {
 648                 type: 'circle',
 649                 size: 4,
 650                 radius: 4,
 651                 'stroke-width': 0
 652             }
 653         }]
 654     });
 655
 656 A marker configuration object contains the same properties used to create a Sprite.
 657 You can find the properties used to create a Sprite in the Sprite section above.
 658
 659
 660 ### Pie
 661
 662 Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different
 663 categories that also have a meaning as a whole.
 664 As with all other series, the Pie Series must be appended in the *series* Chart array configuration. See the Chart
 665 documentation for more information. A typical configuration object for the pie series could be:
 666
 667
 668 {@img Pie.jpg Series Image}
 669
 670
 671 A typical configuration object for the pie series could be:
 672
 673     var chart = Ext.create('Ext.chart.Chart', {
 674         width: 800,
 675         height: 600,
 676         animate: true,
 677         shadow: true,
 678         store: store,
 679         renderTo: Ext.getBody(),
 680         legend: {
 681             position: 'right'
 682         },
 683         insetPadding: 25,
 684         theme: 'Base:gradients',
 685         series: [{
 686             type: 'pie',
 687             field: 'data1',
 688             showInLegend: true,
 689             highlight: {
 690               segment: {
 691                 margin: 20
 692               }
 693             },
 694             label: {
 695                 field: 'name',
 696                 display: 'rotate',
 697                 contrast: true,
 698                 font: '18px Arial'
 699             }
 700         }]
 701     });
 702
 703
 704 ### Radar
 705
 706 Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for
 707 a constrained number of categories.
 708 As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart
 709 documentation for more information.
 710
 711 {@img Radar.jpg Series Image}
 712
 713 A typical configuration object for the radar series could be:
 714
 715     var chart = Ext.create('Ext.chart.Chart', {
 716         width: 800,
 717         height: 600,
 718         animate: true,
 719         store: store,
 720         renderTo: Ext.getBody(),
 721         insetPadding: 20,
 722         theme: 'Category2',
 723         axes: [{
 724             type: 'Radial',
 725             position: 'radial',
 726             label: {
 727                 display: true
 728             }
 729         }],
 730
 731         // Add two series for radar.
 732         series: [{
 733             type: 'radar',
 734             xField: 'name',
 735             yField: 'data1',
 736             showMarkers: true,
 737             markerConfig: {
 738                 radius: 5,
 739                 size: 5
 740             },
 741             style: {
 742                 'stroke-width': 2,
 743                 fill: 'none'
 744             }
 745         },{
 746             type: 'radar',
 747             xField: 'name',
 748             yField: 'data3',
 749             showMarkers: true,
 750             markerConfig: {
 751                 radius: 5,
 752                 size: 5
 753             },
 754             style: {
 755                 'stroke-width': 2,
 756                 fill: 'none'
 757             }
 758         }]
 759     });
 760
 761
 762 ### Scatter
 763
 764 Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization.
 765 These variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc.
 766 As with all other series, the Scatter Series must be appended in the *series* Chart array configuration. See the Chart
 767 documentation for more information on creating charts.
 768
 769 {@img Scatter.jpg Series Image}
 770
 771 A typical configuration object for the scatter series could be:
 772
 773     var chart = Ext.create('Ext.chart.Chart', {
 774         width: 800,
 775         height: 600,
 776         animate: true,
 777         store: store,
 778         renderTo: Ext.getBody(),
 779         axes: [{
 780             type: 'Numeric',
 781             position: 'left',
 782             fields: ['data1', 'data2', 'data3'],
 783             title: 'Number of Hits'
 784         }],
 785         series: [{
 786             type: 'scatter',
 787             markerConfig: {
 788                 radius: 5,
 789                 size: 5
 790             },
 791             axis: 'left',
 792             xField: 'name',
 793             yField: 'data1',
 794             color: '#a00'
 795         }, {
 796             type: 'scatter',
 797             markerConfig: {
 798                 radius: 5,
 799                 size: 5
 800             },
 801             axis: 'left',
 802             xField: 'name',
 803             yField: 'data2'
 804         }, {
 805             type: 'scatter',
 806             markerConfig: {
 807                 radius: 5,
 808                 size: 5
 809             },
 810             axis: 'left',
 811             xField: 'name',
 812             yField: 'data3'
 813         }]
 814     });
 815
 816
 817 ### Gauge
 818
 819 Creates a Gauge Chart. Gauge Charts are used to show progress in a certain variable. There are two ways of using the Gauge chart.
 820 One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instantiating the
 821  visualization and using the `setValue` method to adjust the value you want.
 822
 823 {@img Gauge.jpg Series Image}
 824
 825 A chart/series configuration for the Gauge visualization could look like this:
 826
 827     {
 828         xtype: 'chart',
 829         store: store,
 830         axes: [{
 831             type: 'gauge',
 832             position: 'gauge',
 833             minimum: 0,
 834             maximum: 100,
 835             steps: 10,
 836             margin: -10
 837         }],
 838         series: [{
 839             type: 'gauge',
 840             field: 'data1',
 841             donut: false,
 842             colorSet: ['#F49D10', '#ddd']
 843         }]
 844     }
 845
 846
 847 In this configuration we create a special Gauge axis to be used with the gauge visualization (describing half-circle markers), and also we're
 848 setting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to
 849 the visual display and the color set to be used with the visualization.
 850