Clear Up
SharpKit Reference

Radar Class

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.

Namespace: Ext.chart.series

Constructors

Methods

Name Description
drawSeries() Draws the series for the current chart.

Fields

Name Description
style An object containing styles for overriding series styles from Theming. Defaults to: {}
© Copyright 2005-2011 SharpKit. All rights reserved.