docs/guide/drawing_and_charting.html

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