+++ /dev/null
-<!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]>
-<style type="text/css">.head-band { display: none; }
-.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
-.doc-tab .members .member a.more { background-color: #efefef; }
-</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
-</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
-<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">
-
- req = {
- liveURL: '.',
- standAloneMode: true,
- origDocClass: 'undefined',
- docClass: 'undefined',
- docReq: 'undefined',
- version: '4.0',
- baseURL: '.',
- baseDocURL: '.',
- baseProdURL: '.'
- };
-
- clsInfo = {};
-
-
-
-</script>
-
-<script type="text/javascript" src="../search.js"></script>
-<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
-<script type="text/javascript" src="../class_tree.js"></script>
-<script type="text/javascript" src="../class_doc.js"></script>
-<div id="top-block" class="top-block"></div><div id="docContent"><div class="guide"><h1>Drawing and Charting</h1>
-
-<hr></hr>
-
-<p><iframe src="http://player.vimeo.com/video/17673342?byline=0&portrait=0" width="500" height="281" frameborder="0"></iframe></p>
-
-<p>This document is intended to guide you through the overall design and implementation details
-of the Drawing and Charting packages. The drawing and charting packages enable you to create
-cross browser and cross device graphics in a versatile way.</p>
-
-<p>The structure of this document will cover three main topics:</p>
-
-<ul><li>Section I: <a href="drawing_and_charting.html#">"Draw"</a> a versatile cross-browser/device package to draw general purpose
-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
-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>
-
-<h2>I. The Draw Package</h2>
-
-<hr></hr>
-
-<p>The design choices in the graphics team concerning drawing were not just contrained to charting:
-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>
-
-<p>The Draw package contains a <a href="drawing_and_charting.html#">Surface</a> class that abstracts the underlying graphics implementation
-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
-interactions like mouse events and also provide rich animations on all attributes like shape, color, size,
-etc.</p>
-
-<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
-<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
-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
-to create sprites are heavily inspired by the <a href="http://www.w3.org/TR/SVG/">SVG standard</a>. </p>
-
-<h3>Creating a Drawing Surface</h3>
-
-<p>You can create a simple drawing surface without loading the Charting package at all. This can be useful
-to create arbitrary graphics that work on all browsers/devices and animate well. For example, you could
-create an interactive map of the United States where each state is a sprite, or also an infographic where
-each element is also a sprite. What's interesting about making sprites and not images is that the document
-acquires a new level of interactivity but also that being VML and SVG based the images will never loose quality
-and can be printed correctly.</p>
-
-<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>
-
-<pre class="prettyprint"><code>var drawComponent = Ext.create('Ext.draw.Component', {
- viewBox: false,
- items: [{
- type: 'circle',
- fill: '#ffc',
- radius: 100,
- x: 100,
- y: 100
- }]
-});
-
-Ext.create('Ext.Window', {
- width: 230,
- height: 230,
- layout: 'fit',
- items: [drawComponent]
-}).show();</code></pre>
-
-<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
-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
-dimensions accordingly.</p>
-
-<p>Sprites can have different types. Some of them are:</p>
-
-<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
-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>.
-You can find a quick tutorial on to how to get started with
-the path syntax <a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">here</a>.</li></ul>
-
-<p>A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
- The configuration of a Sprite is an object with the following properties:</p>
-
-<p> <ul>
- <li>
- <b>type </b> - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square'.
- </li>
- <li>
- <b>width </b> - (Number) Used in rectangle sprites, the width of the rectangle.
- </li>
- <li>
- <b>height </b> - (Number) Used in rectangle sprites, the height of the rectangle.
- </li>
- <li>
- <b>size </b> - (Number) Used in square sprites, the dimension of the square.
- </li>
- <li>
- <b>radius </b> - (Number) Used in circle sprites, the radius of the circle.
- </li>
- <li>
- <b>x </b> - (Number) The position along the x-axis.
- </li>
- <li>
- <b>y </b> - (Number) The position along the y-axis.
- </li>
- <li>
- <b>path </b> - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax.
- </li>
- <li>
- <b>opacity </b> - (Number) The opacity of the sprite.
- </li>
- <li>
- <b>fill </b> - (String) The fill color.
- </li>
- <li>
- <b>stroke </b> - (String) The stroke color.
- </li>
- <li>
- <b>stroke-width </b> - (Number) The width of the stroke.
- </li>
- <li>
- <b>font </b> - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS <code>font</code> parameter.
- </li>
- <li>
- <b>text </b> - (String) Used with text type sprites. The text itself.
- </li>
- </ul></p>
-
-<p> Additionally there are three transform objects that can be set with <code>setAttributes</code> which are <code>translate</code>, <code>rotate</code> and
- <code>scale</code>.</p>
-
-<p> For translate, the configuration object contains x and y attributes for the translation. For example:</p>
-
-<p> <pre class="prettyprint"><code>
- sprite.setAttributes({
- translate: {
- x: 10,
- y: 10
- }
- }, true);
- </code></pre></p>
-
-<p> For rotate, the configuration object contains x and y attributes for the center of the rotation (which are optional),
- and a degrees attribute that specifies the rotation in degrees. For example:</p>
-
-<p> <pre class="prettyprint"><code>
- sprite.setAttributes({
- rotate: {
- degrees: 90
- }
- }, true);
-</code></pre></p>
-
-<p> For scale, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:</p>
-
-<p> <pre class="prettyprint"><code>
- sprite.setAttributes({
- scale: {
- x: 10,
- y: 3
- }
- }, true);
- </code></pre></p>
-
-<h3>Interacting with a Sprite</h3>
-
-<p>Now that we've created a draw surface with a sprite in it, let's dive into how to interact with the sprite.
-We can get a handle to the sprite we want to modify by adding that sprite imperatively to the surface:</p>
-
-<pre class="prettyprint"><code>// Create a draw component
-var drawComponent = Ext.create('Ext.draw.Component', {
- viewBox: false
-});
-
-// Create a window to place the draw component in
-Ext.create('Ext.Window', {
- width: 220,
- height: 230,
- layout: 'fit',
- items: [drawComponent]
-}).show();
-
-// Add a circle sprite
-var myCircle = drawComponent.surface.add({
- type: 'circle',
- x: 100,
- y: 100,
- radius: 100,
- fill: '#cc5'
-});
-
-// Now do stuff with the sprite, like changing its properties:
-myCircle.setAttributes({
- fill: '#ccc'
-}, true);
-
-// or animate an attribute on the sprite
-myCircle.animate({
- to: {
- fill: '#555'
- },
- duration: 2000
-});
-
-// Add a mouseup listener to the sprite
-myCircle.addListener('mouseup', function() {
- alert('mouse upped!');
-});</code></pre>
-
-<p>In this example we've seen how we can add events, set sprite attributes and animate these attributes using the
-draw package. As you can see this package is a versatile abstraction layer over the graphics we can do. What's
-most interesting about this class is that we aren't tied to a specific shape or structure; also all elements
-support events, setting attributes and creating animations. Most important of all, all of this is compatible in all browsers and
-devices.</p>
-
-<h2>II. Charts</h2>
-
-<p>So now that we learnt about the expressive power of the draw package, let's dive into charts. The chart
-package consists of a hierarchy of classes that define a chart container (something like a surface but more specific for
-handling charts); axes, legends, series, labels, callouts, tips, cartesian and radial coordinates, and specific series
-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>
-
-<p>In this section we will cover how these classes are tied together and what bits of functionality go into each of these
-classes. We won't cover each particular series, since that is done in the next section.</p>
-
-<h3>Chart</h3>
-
-<p>The Chart class is the main drawing surface for series. It manages the rendering of each series and also how axes are
-drawn and defined. Chart also delegates mouse events over to different areas of the Chart like Series, Axes, etc.
-The <a href="drawing_and_charting.html#">Chart class</a> extends <a href="drawing_and_charting.html#">Draw Component</a>.</p>
-
-<p>A Chart instance has access to:</p>
-
-<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>
-
-<p>The chart instance supports custom events that can be triggered right before and during the rendering of the visualization.
-We can add handlers for these events by using:</p>
-
-<pre class="prettyprint"><code>chart.on({
- 'refresh': function() {
- alert('(re)drawing the chart');
- }
-});</code></pre>
-
-<p>Chart also delegates events like <code>itemmousedown</code> and <code>itemmouseup</code> to the series so that we can append
-listeners to those objects and get the target sprite of the event.</p>
-
-<h3>Legend</h3>
-
-<p>The chart configuration object accepts a <code>legend</code> parameter to enable legend items for each series and
-to set the position of the legend. These options are passed into the constructor of the chart. For example:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- width: 200,
- height: 200,
-
- // Set a legend
- legend: {
- position: 'left'
- },
-
- // Define axes
- axes: [/*set an axis configuration*/],
-
- // Define series
- series: [/*set series configuration*/]
-});</code></pre>
-
-<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>
-
-<h3>Axis</h3>
-
-<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
-a <code>Cartesian</code> axis and <code>Radial</code> uses polar coordinates to represent the information for polar based visualizations like
-Pie and Radar series. Axes are bound to the type of data we're trying to represent. There are axes for categorical
-information (called <code>Category</code> axis) and also axis for quantitative information like <code>Numeric</code>. For time-based information
-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
-with smooth animations. If you'd like to know more about each axis please go to the axis package documentation. Also, you will find
-configuration examples for axis in the bottom series examples.</p>
-
-<p>An axis contains divisions and subdivisions of values, represented by major and minor ticks. These can be adjusted automatically
-or manually to some specified interval, maximum and minimum values. The configuration options <code>maximum</code>, <code>minimum</code>, <code>majorTickSteps</code> and
-<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
-using:</p>
-
-<pre class="prettyprint"><code> axes: [{
- type: 'Numeric',
- position: 'left',
- fields: ['data1'],
- title: 'Number of Hits',
- minimum: 0,
- //one minor tick between two major ticks
- minorTickSteps: 1
- }, {
- type: 'Category',
- position: 'bottom',
- fields: ['name'],
- title: 'Month of the Year'
- }]</code></pre>
-
-<p>The following configuration will produce minor ticks in the left axis
-for the line series:</p>
-
-<p><img alt="Series Image" src="../Ticks.jpg"></img></p>
-
-<h3>Gradients</h3>
-
-<p>The drawing and charting package has also the power to create
-linear gradients. The gradients can be defined in the Chart configuration
-object as an array of gradient configurations. For each gradient configuration
-the following parameters are specified:</p>
-
-<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>
-
-<p>Each key in the stops object represents the percentage of the fill on the specified color for
-the gradient.</p>
-
-<p>For example:</p>
-
-<pre class="prettyprint"><code> gradients: [{
- id: 'gradientId',
- angle: 45,
- stops: {
- 0: {
- color: '#555'
- },
- 100: {
- color: '#ddd'
- }
- }
- }, {
- id: 'gradientId2',
- angle: 0,
- stops: {
- 0: {
- color: '#590'
- },
- 20: {
- color: '#599'
- },
- 100: {
- color: '#ddd'
- }
- }
- }]</code></pre>
-
-<p>You can apply a gradient to a sprite by setting a reference to a gradient <strong>id</strong> in
-the fill property. This reference is done via a url syntax. For example:</p>
-
-<pre class="prettyprint"><code> sprite.setAttributes({
- fill: 'url(#gradientId)'
- }, true);</code></pre>
-
-<h3>Series</h3>
-
-<p>A <code>Series</code> is an abstract class extended by concrete visualizations like
-<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
-handling, shadows, gradients, common offsets, etc. The <code>Series</code> class is enhanced with a set of <em>mixins</em> that provide functionality
-like highlighting, callouts, tips, etc. A <code>Series</code> will contain an array of <code>items</code> where each item contains information about the
-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
-all positions for the series and then renders the series.</p>
-
-<h3>Theming</h3>
-
-<p>The Chart configuration object may have a <code>theme</code> property with a string value that references a builtin theme name.</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- theme: 'Blue',
- /* Other options... */
-});</code></pre>
-
-<p>A Theme defines the style of the shapes, color, font, axes and background
-of a chart. The theming configuration can be very rich and complex:</p>
-
-<pre class="prettyprint"><code>{
- axis: {
- fill: '#000',
- 'stroke-width': 1
- },
- axisLabelTop: {
- fill: '#000',
- font: '11px Arial'
- },
- axisLabelLeft: {
- fill: '#000',
- font: '11px Arial'
- },
- axisLabelRight: {
- fill: '#000',
- font: '11px Arial'
- },
- axisLabelBottom: {
- fill: '#000',
- font: '11px Arial'
- },
- axisTitleTop: {
- fill: '#000',
- font: '11px Arial'
- },
- axisTitleLeft: {
- fill: '#000',
- font: '11px Arial'
- },
- axisTitleRight: {
- fill: '#000',
- font: '11px Arial'
- },
- axisTitleBottom: {
- fill: '#000',
- font: '11px Arial'
- },
- series: {
- 'stroke-width': 1
- },
- seriesLabel: {
- font: '12px Arial',
- fill: '#333'
- },
- marker: {
- stroke: '#555',
- fill: '#000',
- radius: 3,
- size: 3
- },
- seriesThemes: [{
- fill: '#C6DBEF'
- }, {
- fill: '#9ECAE1'
- }, {
- fill: '#6BAED6'
- }, {
- fill: '#4292C6'
- }, {
- fill: '#2171B5'
- }, {
- fill: '#084594'
- }],
- markerThemes: [{
- fill: '#084594',
- type: 'circle'
- }, {
- fill: '#2171B5',
- type: 'cross'
- }, {
- fill: '#4292C6',
- type: 'plus'
- }]
-}</code></pre>
-
-<p>We can also create a seed of colors that will be the base for the entire theme just by creating
-a simple array of colors in the configuration object like:</p>
-
-<pre class="prettyprint"><code>{
- colors: ['#aaa', '#bcd', '#eee']
-}</code></pre>
-
-<p>When setting a base color the theme will generate an array of colors that match the base color:</p>
-
-<pre class="prettyprint"><code>{
- baseColor: '#bce'
-}</code></pre>
-
-<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>
-
-<pre class="prettyprint"><code>var colors = ['#555',
- '#666',
- '#777',
- '#888',
- '#999'];
-
-var baseColor = '#eee';
-
-Ext.define('Ext.chart.theme.Fancy', {
- extend: 'Ext.chart.theme.Base',
-
- constructor: function(config) {
- this.callParent([Ext.apply({
- axis: {
- fill: baseColor,
- stroke: baseColor
- },
- axisLabelLeft: {
- fill: baseColor
- },
- axisLabelBottom: {
- fill: baseColor
- },
- axisTitleLeft: {
- fill: baseColor
- },
- axisTitleBottom: {
- fill: baseColor
- },
- colors: colors
- }, config)]);
- }
-});
-
-var chart = Ext.create('Ext.chart.Chart', {
- theme: 'Fancy',
-
- /* Other options here... */
-});</code></pre>
-
-<h2>III. Series</h2>
-
-<p>The following section will go through our available series/visualizations, introduce each
-one of them and show a complete configuration example of the series. The example will include the <code>Chart</code>,
-<code>Axis</code> and <code>Series</code> configuration options.</p>
-
-<h3>Area</h3>
-
-<p>Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information.
-As with all other series, the Area Series must be appended in the <em>series</em> Chart array configuration.</p>
-
-<p><img alt="Series Image" src="../Area.jpg"></img></p>
-
-<p>A typical configuration object for the area series could be:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- renderTo: Ext.getBody(),
- width: 800,
- height: 600,
- animate: true,
- store: store,
- legend: {
- position: 'bottom'
- },
-
- // Add Numeric and Category axis
- axes: [{
- type: 'Numeric',
- grid: true,
- position: 'left',
- fields: ['data1', 'data2', 'data3'],
- title: 'Number of Hits',
- grid: {
- odd: {
- opacity: 1,
- fill: '#ddd',
- stroke: '#bbb',
- 'stroke-width': 1
- }
- },
- minimum: 0,
- adjustMinimumByMajorUnit: 0
- }, {
- type: 'Category',
- position: 'bottom',
- fields: ['name'],
- title: 'Month of the Year',
- grid: true,
- label: {
- rotate: {
- degrees: 315
- }
- }
- }],
-
- // Add the Area Series
- series: [{
- type: 'area',
- highlight: true,
- axis: 'left',
- xField: 'name',
- yField: ['data1', 'data2', 'data3'],
- style: {
- opacity: 0.93
- }
- }]
-}); </code></pre>
-
-<h3>Bar</h3>
-
-<p>Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for different
-categories that can show some progression (or regression) in the dataset.
-As with all other series, the Bar Series must be appended in the <em>series</em> Chart array configuration. See the Chart
-documentation for more information.</p>
-
-<p><img alt="Series Image" src="../Bar.jpg"></img></p>
-
-<p>A typical configuration object for the bar series could be:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- renderTo: Ext.getBody(),
- width: 800,
- height: 600,
- animate: true,
- store: store,
- theme: 'White',
- axes: [{
- type: 'Numeric',
- position: 'bottom',
- fields: ['data1'],
- title: 'Number of Hits'
- }, {
- type: 'Category',
- position: 'left',
- fields: ['name'],
- title: 'Month of the Year'
- }],
- //Add Bar series.
- series: [{
- type: 'bar',
- axis: 'bottom',
- xField: 'name',
- yField: 'data1',
- highlight: true,
- label: {
- display: 'insideEnd',
- field: 'data1',
- renderer: Ext.util.Format.numberRenderer('0'),
- orientation: 'horizontal',
- color: '#333',
- 'text-anchor': 'middle'
- }
- }]
-});</code></pre>
-
-<h3>Line</h3>
-
-<p>Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different
-categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.
-As with all other series, the Line Series must be appended in the <em>series</em> Chart array configuration. See the Chart
-documentation for more information.</p>
-
-<p><img alt="Series Image" src="../Line.jpg"></img></p>
-
-<p>A typical configuration object for the line series could be:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- renderTo: Ext.getBody(),
- width: 800,
- height: 600,
- animate: true,
- store: store,
- shadow: true,
- theme: 'Category1',
- axes: [{
- type: 'Numeric',
- minimum: 0,
- position: 'left',
- fields: ['data1', 'data2', 'data3'],
- title: 'Number of Hits'
- }, {
- type: 'Category',
- position: 'bottom',
- fields: ['name'],
- title: 'Month of the Year'
- }],
-
- // Add two line series
- series: [{
- type: 'line',
- axis: 'left',
- xField: 'name',
- yField: 'data1',
- markerConfig: {
- type: 'cross',
- size: 4,
- radius: 4,
- 'stroke-width': 0
- }
- }, {
- type: 'line',
- axis: 'left',
- fill: true,
- xField: 'name',
- yField: 'data3',
- markerConfig: {
- type: 'circle',
- size: 4,
- radius: 4,
- 'stroke-width': 0
- }
- }]
-});</code></pre>
-
-<p>A marker configuration object contains the same properties used to create a Sprite.
-You can find the properties used to create a Sprite in the Sprite section above.</p>
-
-<h3>Pie</h3>
-
-<p>Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different
-categories that also have a meaning as a whole.
-As with all other series, the Pie Series must be appended in the <em>series</em> Chart array configuration. See the Chart
-documentation for more information. A typical configuration object for the pie series could be:</p>
-
-<p><img alt="Series Image" src="../Pie.jpg"></img></p>
-
-<p>A typical configuration object for the pie series could be:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- width: 800,
- height: 600,
- animate: true,
- shadow: true,
- store: store,
- renderTo: Ext.getBody(),
- legend: {
- position: 'right'
- },
- insetPadding: 25,
- theme: 'Base:gradients',
- series: [{
- type: 'pie',
- field: 'data1',
- showInLegend: true,
- highlight: {
- segment: {
- margin: 20
- }
- },
- label: {
- field: 'name',
- display: 'rotate',
- contrast: true,
- font: '18px Arial'
- }
- }]
-});</code></pre>
-
-<h3>Radar</h3>
-
-<p>Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for
-a constrained number of categories.
-As with all other series, the Radar series must be appended in the <em>series</em> Chart array configuration. See the Chart
-documentation for more information.</p>
-
-<p><img alt="Series Image" src="../Radar.jpg"></img></p>
-
-<p>A typical configuration object for the radar series could be:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- width: 800,
- height: 600,
- animate: true,
- store: store,
- renderTo: Ext.getBody(),
- insetPadding: 20,
- theme: 'Category2',
- axes: [{
- type: 'Radial',
- position: 'radial',
- label: {
- display: true
- }
- }],
-
- // Add two series for radar.
- series: [{
- type: 'radar',
- xField: 'name',
- yField: 'data1',
- showMarkers: true,
- markerConfig: {
- radius: 5,
- size: 5
- },
- style: {
- 'stroke-width': 2,
- fill: 'none'
- }
- },{
- type: 'radar',
- xField: 'name',
- yField: 'data3',
- showMarkers: true,
- markerConfig: {
- radius: 5,
- size: 5
- },
- style: {
- 'stroke-width': 2,
- fill: 'none'
- }
- }]
-}); </code></pre>
-
-<h3>Scatter</h3>
-
-<p>Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization.
-These variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc.
-As with all other series, the Scatter Series must be appended in the <em>series</em> Chart array configuration. See the Chart
-documentation for more information on creating charts.</p>
-
-<p><img alt="Series Image" src="../Scatter.jpg"></img></p>
-
-<p>A typical configuration object for the scatter series could be:</p>
-
-<pre class="prettyprint"><code>var chart = Ext.create('Ext.chart.Chart', {
- width: 800,
- height: 600,
- animate: true,
- store: store,
- renderTo: Ext.getBody(),
- axes: [{
- type: 'Numeric',
- position: 'left',
- fields: ['data1', 'data2', 'data3'],
- title: 'Number of Hits'
- }],
- series: [{
- type: 'scatter',
- markerConfig: {
- radius: 5,
- size: 5
- },
- axis: 'left',
- xField: 'name',
- yField: 'data1',
- color: '#a00'
- }, {
- type: 'scatter',
- markerConfig: {
- radius: 5,
- size: 5
- },
- axis: 'left',
- xField: 'name',
- yField: 'data2'
- }, {
- type: 'scatter',
- markerConfig: {
- radius: 5,
- size: 5
- },
- axis: 'left',
- xField: 'name',
- yField: 'data3'
- }]
-});</code></pre>
-
-<h3>Gauge</h3>
-
-<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.
- One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instanciating the
- visualization and using the <code>setValue</code> method to adjust the value you want.</p>
-
-<p> <img alt="Series Image" src="../Gauge.jpg"></img></p>
-
-<p> A chart/series configuration for the Gauge visualization could look like this:</p>
-
-<p> <pre class="prettyprint"><code>
- {
- xtype: 'chart',
- store: store,
- axes: [{
- type: 'gauge',
- position: 'gauge',
- minimum: 0,
- maximum: 100,
- steps: 10,
- margin: -10
- }],
- series: [{
- type: 'gauge',
- field: 'data1',
- donut: false,
- colorSet: ['#F49D10', '#ddd']
- }]
- }
- </code></pre></p>
-
-<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
- setting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to
- the visual display and the color set to be used with the visualization.
- </p></div></div></div></div></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff