Clear Up
SharpKit Reference

Ext.chart Namespace

Download SDK: SharpKit.ExtJs.zip

Interfaces

Name Description
Callout

A mixin providing callout functionality for Ext.chart.series.Series.

Highlight

A mixin providing highlight functionality for Ext.chart.series.Series.

Label

Labels is a mixin to the Series class. Labels methods are implemented in each of the Series (Pie, Bar, etc) for label creation and placement.

The methods implemented by the Series are:

  • onCreateLabel(storeItem, item, i, display) Called each time a new label is created. The arguments of the method are:

    • storeItem The element of the store that is related to the label sprite.
    • item The item related to the label sprite. An item is an object containing the position of the shape used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
    • i The index of the element created (i.e the first created label, second created label, etc)
    • display The display type. May be false if the label is hidden
  • onPlaceLabel(label, storeItem, item, i, display, animate) Called for updating the position of the label. The arguments of the method are:

    • label The sprite label.
  • storeItem The element of the store that is related to the label sprite
  • item The item related to the label sprite. An item is an object containing the position of the shape used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
  • i The index of the element to be updated (i.e. whether it is the first, second, third from the labelGroup)
  • display The display type. May be false if the label is hidden.
  • animate A boolean value to set or unset animations for the labels.
Mask

Defines a mask for a chart's series. The 'chart' member must be set prior to rendering.

A Mask can be used to select a certain region in a chart. When enabled, the select event will be triggered when a region is selected by the mask, allowing the user to perform other tasks like zooming on that region, etc.

In order to use the mask one has to set the Chart mask option to true, vertical or horizontal. Then a possible configuration for the listener could be:

  
items: {
            xtype: 'chart',
            animate: true,
            store: store1,
            mask: 'horizontal',
            listeners: {
            select: {
            fn: function(me, selection) {
            me.setZoom(selection);
            me.mask.hide();
            }
            }
            }
            }
            

In this example we zoom the chart to that particular region. You can also get a handle to a mask instance from the chart object. The chart.mask element is a Ext.Panel.

Navigation

Handles panning and zooming capabilities.

Used as mixin by Ext.chart.Chart.

Tip

Provides tips for Ext.chart.series.Series.

Classes

Name Description
CalloutConfig
CalloutEvents
Chart

Charts provide a flexible way to achieve a wide range of data visualization capablitities. Each Chart gets its data directly from a Store, and automatically updates its display whenever data in the Store changes. In addition, the look and feel of a Chart can be customized using Themes.

Creating a Simple Chart

Every Chart has three key parts - a Store that contains the data, an array of Axes which define the boundaries of the Chart, and one or more Series to handle the visual rendering of the data points.

1. Creating a Store

The first step is to create a Model that represents the type of data that will be displayed in the Chart. For example the data for a chart that displays a weather forecast could be represented as a series of "WeatherPoint" data points with two fields - "temperature", and "date":

  
    Ext.define('WeatherPoint', {
            extend: 'Ext.data.Model',
            fields: ['temperature', 'date']
            });
            

Next a Store must be created. The store contains a collection of "WeatherPoint" Model instances. The data could be loaded dynamically, but for sake of ease this example uses inline data:

  
var store = Ext.create('Ext.data.Store', {
            model: 'WeatherPoint',
            data: [
            { temperature: 58, date: new Date(2011, 1, 1, 8) },
            { temperature: 63, date: new Date(2011, 1, 1, 9) },
            { temperature: 73, date: new Date(2011, 1, 1, 10) },
            { temperature: 78, date: new Date(2011, 1, 1, 11) },
            { temperature: 81, date: new Date(2011, 1, 1, 12) }
            ]
            });
            

For additional information on Models and Stores please refer to the Data Guide.

2. Creating the Chart object

Now that a Store has been created it can be used in a Chart:

  
    Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 300,
            store: store
            });
            

That's all it takes to create a Chart instance that is backed by a Store. However, if the above code is run in a browser, a blank screen will be displayed. This is because the two pieces that are responsible for the visual display, the Chart's axes and series, have not yet been defined.

3. Configuring the Axes

Axes are the lines that define the boundaries of the data points that a Chart can display. This example uses one of the most common Axes configurations - a horizontal "x" axis, and a vertical "y" axis:

  
    Ext.create('Ext.chart.Chart', {
            ...
            axes: [
            {
            title: 'Temperature',
            type: 'Numeric',
            position: 'left',
            fields: ['temperature'],
            minimum: 0,
            maximum: 100
            },
            {
            title: 'Time',
            type: 'Time',
            position: 'bottom',
            fields: ['date'],
            dateFormat: 'ga'
            }
            ]
            });
            

The "Temperature" axis is a vertical Numeric Axis and is positioned on the left edge of the Chart. It represents the bounds of the data contained in the "WeatherPoint" Model's "temperature" field that was defined above. The minimum value for this axis is "0", and the maximum is "100".

The horizontal axis is a Time Axis and is positioned on the bottom edge of the Chart. It represents the bounds of the data contained in the "WeatherPoint" Model's "date" field. The dateFormat configuration tells the Time Axis how to format it's labels.

Here's what the Chart looks like now that it has its Axes configured:

4. Configuring the Series

The final step in creating a simple Chart is to configure one or more Series. Series are responsible for the visual representation of the data points contained in the Store. This example only has one Series:

  
    Ext.create('Ext.chart.Chart', {
            ...
            axes: [
            ...
            ],
            series: [
            {
            type: 'line',
            xField: 'date',
            yField: 'temperature'
            }
            ]
            });
            

This Series is a Line Series, and it uses the "date" and "temperature" fields from the "WeatherPoint" Models in the Store to plot its data points:

See the Line Charts Example for a live demo.

Themes

The color scheme for a Chart can be easily changed using the theme configuration option:

  
    Ext.create('Ext.chart.Chart', {
            ...
            theme: 'Green',
            ...
            });
            

For more information on Charts please refer to the Drawing and Charting Guide.

ChartConfig
ChartEvents
HighlightConfig
HighlightEvents
LabelConfig
LabelEvents
Legend

Defines a legend for a chart's series. The 'chart' member must be set prior to rendering. The legend class displays a list of legend items each of them related with a series being rendered. In order to render the legend item of the proper series the series configuration object must have showInLegend set to true.

The legend configuration object accepts a position as parameter. The position parameter can be left, righttop or bottom. For example:

  
legend: {
            position: 'right'
            },
            

Example

  
var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
            data: [
            { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
            { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
            { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
            { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
            { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            shadow: true,
            theme: 'Category1',
            legend: {
            position: 'top'
            },
            axes: [
            {
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
            title: 'Sample Values',
            grid: {
            odd: {
            opacity: 1,
            fill: '#ddd',
            stroke: '#bbb',
            'stroke-width': 1
            }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
            },
            {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics',
            grid: true,
            label: {
            rotate: {
            degrees: 315
            }
            }
            }
            ],
            series: [{
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: 'name',
            yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
            style: {
            opacity: 0.93
            }
            }]
            });
            
LegendConfig
LegendEvents
LegendItem

A single item of a legend (marker plus label)

LegendItemConfig
LegendItemEvents
MaskConfig
MaskEvents
MaskLayer

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

MaskLayerConfig
MaskLayerEvents
NavigationConfig
NavigationEvents
Shape

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

ShapeConfig
ShapeEvents
TipConfig
TipEvents
TipSurface

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

TipSurfaceConfig
TipSurfaceEvents
© Copyright 2005-2011 SharpKit. All rights reserved.