Clear Up
SharpKit Reference

Bar Class

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.

Namespace: Ext.chart.series

Derived Types

Constructors

Fields

Name Description
column Whether to set the visualization as column chart or horizontal bar chart. Defaults to: false
groupGutter The gutter space between groups of bars, as a percentage of the bar width Defaults to: 38.2
gutter The gutter space between single bars, as a percentage of the bar width Defaults to: 38.2
style Style properties that will override the theming series styles. Defaults to: {}
xPadding Padding between the left/right axes and the bars Defaults to: 0
yPadding Padding between the top/bottom axes and the bars Defaults to: 10

Methods

Name Description
drawSeries() Draws the series for the current chart.
© Copyright 2005-2011 SharpKit. All rights reserved.