Clear Up
SharpKit Reference

Chart Class

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.

Namespace: Ext.chart

Constructors

Fields

Name Description
axes Array of Axis instances or config objects. For example:
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'
            }]
            
background The chart background. This can be a gradient object, image, or color. Defaults to false for no background. For example, if background were to be a color we could set the object as
background: {
            //color string
            fill: '#ccc'
            }
            
You can specify an image by using:
background: {
            image: 'http://path.to.image/'
            }
            
Also you can specify a gradient by using the gradient object syntax:
background: {
            gradient: {
            id: 'gradientId',
            angle: 45,
            stops: {
            0: {
            color: '#555'
            }
            100: {
            color: '#ddd'
            }
            }
            }
            }
            
Defaults to: false
insetPadding The amount of inset padding in pixels for the chart. Defaults to 10. Defaults to: 10
legend True for the default legend display or a legend config object. Defaults to false. Defaults to: false
mask Enables selecting a region on chart. True to enable any selection, 'horizontal' or 'vertical' to restrict the selection to X or Y axis. The mask in itself will do nothing but fire 'select' event. See Ext.chart.Mask for example.
series Array of Series instances or config objects. For example:
series: [{
            type: 'column',
            axis: 'left',
            listeners: {
            'afterrender': function() {
            console('afterrender');
            }
            },
            xField: 'category',
            yField: 'data1'
            }]
            
store The store that supplies data to this chart.
theme The name of the theme to be used. A theme defines the colors and other visual displays of tick marks on axis, text, title text, line colors, marker colors and styles, etc. Possible theme values are 'Base', 'Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow' and also six category themes 'Category1' to 'Category6'. Default value is 'Base'.

Methods

Name Description
bindStore(object, object) Binds a store to this instance.
bindStoreListeners(AbstractStore) Binds listeners for this component to the store. By default it will add anything bound by the getStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.
getStore() Gets the current store instance.
getStoreListeners() Gets the listeners to bind to a new store.
onBindStore(AbstractStore, bool) Template method, it is called when a new store is bound to the current instance.
onUnbindStore(AbstractStore, bool) Template method, it is called when an existing store is unbound from the current instance.
redraw(object) Redraws the chart. If animations are set this will animate the chart too.
restoreZoom() Restores the zoom to the original value. This can be used to reset the previous zoom state set by setZoom. For example:
myChart.restoreZoom();
            
save(object) Saves the chart by either triggering a download or returning a string containing the chart data as SVG. The action depends on the export type specified in the passed configuration. The chart will be exported using either the Ext.draw.engine.SvgExporter or the Ext.draw.engine.ImageExporter classes. Possible export types:
  • 'image/png'
  • 'image/jpeg',
  • 'image/svg+xml'
  • If 'image/svg+xml' is specified, the SvgExporter will be used. If 'image/png' or 'image/jpeg' are specified, the ImageExporter will be used. This exporter must post the SVG data to a remote server to have the data processed, see the Ext.draw.engine.ImageExporter for more details. Example usage:
    chart.save({
                type: 'image/png'
                });
                
    setZoom(object) Zooms the chart to the specified selection range. Can be used with a selection mask. For example:
    items: {
                xtype: 'chart',
                animate: true,
                store: store1,
                mask: 'horizontal',
                listeners: {
                select: {
                fn: function(me, selection) {
                me.setZoom(selection);
                me.mask.hide();
                }
                }
                }
                }
                
    unbindStoreListeners(AbstractStore) Unbinds listeners from this component to the store. By default it will remove anything bound by the bindStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.
    © Copyright 2005-2011 SharpKit. All rights reserved.