Clear Up
SharpKit Reference

Ext.chart.series Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Area

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 series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the area series could be:

  
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,
            store: store,
            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
            }
            }]
            });
            

In this configuration we set area as the type for the series, set highlighting options to true for highlighting elements on hover, take the left axis to measure the data in the area series, set as xField (x values) the name field of each element in the store, and as yFields (aggregated layers) seven data fields from the same store. Then we override some theming styles by adding some opacity to the style object.

AreaConfig
AreaEvents
Bar

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 series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the bar series could be:

  
var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
            { 'name': 'metric one',   'data':10 },
            { 'name': 'metric two',   'data': 7 },
            { 'name': 'metric three', 'data': 5 },
            { 'name': 'metric four',  'data': 2 },
            { 'name': 'metric five',  'data':27 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data'],
            label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
            }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Sample Metrics'
            }],
            series: [{
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
            }
            },
            label: {
            display: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
            },
            xField: 'name',
            yField: 'data'
            }]
            });
            

In this configuration we set bar as the series type, bind the values of the bar to the bottom axis and set the xField or category field to the name parameter of the store. We also set highlight to true which enables smooth animations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar, to display the information found in the data1 property of each element store, to render a formated text with the Ext.util.Format we pass in, to have an horizontal orientation (as opposed to a vertical one) and we also set other styles like color, text-anchor, etc.

BarConfig
BarEvents
Cartesian

Common base class for series implementations which plot values using x/y coordinates.

CartesianConfig
CartesianEvents
Column

Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful visualization technique to display quantitative information for different categories that can show some progression (or regression) in the data set. As with all other series, the Column Series must be appended in the series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the column series could be:

  
var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
            { 'name': 'metric one',   'data':10 },
            { 'name': 'metric two',   'data': 7 },
            { 'name': 'metric three', 'data': 5 },
            { 'name': 'metric four',  'data': 2 },
            { 'name': 'metric five',  'data':27 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [
            {
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
            },
            {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
            }
            ],
            series: [
            {
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
            }
            },
            label: {
            display: 'insideEnd',
            'text-anchor': 'middle',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'vertical',
            color: '#333'
            },
            xField: 'name',
            yField: 'data'
            }
            ]
            });
            

In this configuration we set column as the series type, bind the values of the bars to the bottom axis, set highlight to true so that bars are smoothly highlighted when hovered and bind the xField or category field to the data store name property and the yField as the data1 property of a store element.

ColumnConfig
ColumnEvents
Gauge

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 instantiating the visualization and using the setValue method to adjust the value you want.

An example of Gauge visualization:

  
var store = Ext.create('Ext.data.JsonStore', {
            fields: ['data'],
            data: [
            { 'value':80 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            store: store,
            width: 400,
            height: 250,
            animate: true,
            insetPadding: 30,
            axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 10
            }],
            series: [{
            type: 'gauge',
            field: 'value',
            donut: 30,
            colorSet: ['#F49D10', '#ddd']
            }]
            });
            Ext.widget("button", {
            renderTo: Ext.getBody(),
            text: "Refresh",
            handler: function() {
            store.getAt(0).set('value', Math.round(Math.random()*100));
            }
            });
            

In this example 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.

GaugeConfig
GaugeEvents
Line

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 series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the line series could be:

  
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': 4,  'data2': 4,  'data3': 36, 'data4': 13, 'data5': 33 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [
            {
            type: 'Numeric',
            position: 'left',
            fields: ['data1', 'data2'],
            label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
            },
            {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
            }
            ],
            series: [
            {
            type: 'line',
            highlight: {
            size: 7,
            radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'data1',
            markerConfig: {
            type: 'cross',
            size: 4,
            radius: 4,
            'stroke-width': 0
            }
            },
            {
            type: 'line',
            highlight: {
            size: 7,
            radius: 7
            },
            axis: 'left',
            fill: true,
            xField: 'name',
            yField: 'data2',
            markerConfig: {
            type: 'circle',
            size: 4,
            radius: 4,
            'stroke-width': 0
            }
            }
            ]
            });
            

In this configuration we're adding two series (or lines), one bound to the data1 property of the store and the other to data3. The type for both configurations is line. The xField for both series is the same, the name propert of the store. Both line series share the same axis, the left axis. You can set particular marker configuration by adding properties onto the markerConfig object. Both series have an object as highlight so that markers animate smoothly to the properties in highlight when hovered. The second series has fill=true which means that the line will also have an area below it of the same color.

Note: In the series definition remember to explicitly set the axis to bind the values of the line series to. This can be done by using the axis configuration property.

LineConfig
LineEvents
Pie

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 series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the pie series could be:

  
var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
            { 'name': 'metric one',   'data': 10 },
            { 'name': 'metric two',   'data':  7 },
            { 'name': 'metric three', 'data':  5 },
            { 'name': 'metric four',  'data':  2 },
            { 'name': 'metric five',  'data': 27 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: store,
            theme: 'Base:gradients',
            series: [{
            type: 'pie',
            angleField: 'data',
            showInLegend: true,
            tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
            // calculate and display percentage on hover
            var total = 0;
            store.each(function(rec) {
            total += rec.get('data');
            });
            this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
            }
            },
            highlight: {
            segment: {
            margin: 20
            }
            },
            label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
            }
            }]
            });
            

In this configuration we set pie as the type for the series, set an object with specific style properties for highlighting options (triggered when hovering elements). We also set true to showInLegend so all the pie slices can be represented by a legend item.

We set data as the value of the field to determine the angle span for each pie slice. We also set a label configuration object where we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.

We set contrast to true to flip the color of the label if it is to similar to the background color. Finally, we set the font family and size through the font parameter.

PieConfig
PieEvents
Radar

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 series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the radar series could be:

  
var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3'],
            data: [
            { 'name': 'metric one',   'data1': 14, 'data2': 12, 'data3': 13 },
            { 'name': 'metric two',   'data1': 16, 'data2':  8, 'data3':  3 },
            { 'name': 'metric three', 'data1': 14, 'data2':  2, 'data3':  7 },
            { 'name': 'metric four',  'data1':  6, 'data2': 14, 'data3': 23 },
            { 'name': 'metric five',  'data1': 36, 'data2': 38, 'data3': 33 }
            ]
            });
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            theme:'Category2',
            store: store,
            axes: [{
            type: 'Radial',
            position: 'radial',
            label: {
            display: true
            }
            }],
            series: [{
            type: 'radar',
            xField: 'name',
            yField: 'data1',
            showInLegend: true,
            showMarkers: true,
            markerConfig: {
            radius: 5,
            size: 5
            },
            style: {
            'stroke-width': 2,
            fill: 'none'
            }
            },{
            type: 'radar',
            xField: 'name',
            yField: 'data2',
            showMarkers: true,
            showInLegend: true,
            markerConfig: {
            radius: 5,
            size: 5
            },
            style: {
            'stroke-width': 2,
            fill: 'none'
            }
            },{
            type: 'radar',
            xField: 'name',
            yField: 'data3',
            showMarkers: true,
            showInLegend: true,
            markerConfig: {
            radius: 5,
            size: 5
            },
            style: {
            'stroke-width': 2,
            fill: 'none'
            }
            }]
            });
            

In this configuration we add three series to the chart. Each of these series is bound to the same categories field, name but bound to different properties for each category, data1, data2 and data3 respectively. All series display markers by having showMarkers enabled. The configuration for the markers of each series can be set by adding properties onto the markerConfig object. Finally we override some theme styling properties by adding properties to the style object.

RadarConfig
RadarEvents
Scatter

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 series Chart array configuration. See the Chart documentation for more information on creating charts. A typical configuration object for the scatter could be:

  
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,
            theme:'Category2',
            store: store,
            axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data2', 'data3'],
            title: 'Sample Values',
            grid: true,
            minimum: 0
            }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
            }],
            series: [{
            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'
            }]
            });
            

In this configuration we add three different categories of scatter series. Each of them is bound to a different field of the same data store, data1, data2 and data3 respectively. All x-fields for the series must be the same field, in this case name. Each scatter series has a different styling configuration for markers, specified by the markerConfig object. Finally we set the left axis as axis to show the current values of the elements.

ScatterConfig
ScatterEvents
Series

Series is the abstract class containing the common logic to all chart series. Series includes methods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling mouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.

Listeners

The series class supports listeners via the Observable syntax. Some of these listeners are:

  • itemmouseup When the user interacts with a marker.
  • itemmousedown When the user interacts with a marker.
  • itemmousemove When the user iteracts with a marker.
  • afterrender Will be triggered when the animation ends or when the series has been rendered completely.

For example:

  
series: [{
            type: 'column',
            axis: 'left',
            listeners: {
            'afterrender': function() {
            console('afterrender');
            }
            },
            xField: 'category',
            yField: 'data1'
            }]
            
SeriesConfig
SeriesEvents
© Copyright 2005-2011 SharpKit. All rights reserved.