src/src/chart/series/Scatter.js

   1 /**
   2  * @class Ext.chart.series.Scatter
   3  * @extends Ext.chart.series.Cartesian
   4  *
   5  * Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization.
   6  * These variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc.
   7  * As with all other series, the Scatter Series must be appended in the *series* Chart array configuration. See the Chart
   8  * documentation for more information on creating charts. A typical configuration object for the scatter could be:
   9  *
  10  *     @example preview
  11  *     var chart = new Ext.chart.CartesianChart({
  12  *         animate: true,
  13  *         store: {
  14  *           fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  15  *           data: [
  16  *               {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  17  *               {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  18  *               {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  19  *               {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  20  *               {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  21  *           ]
  22  *         },
  23  *         axes: [{
  24  *             type: 'numeric',
  25  *             position: 'left',
  26  *             fields: ['data1'],
  27  *             title: {
  28  *                 text: 'Sample Values',
  29  *                 fontSize: 15
  30  *             },
  31  *             grid: true,
  32  *             minimum: 0
  33  *         }, {
  34  *             type: 'category',
  35  *             position: 'bottom',
  36  *             fields: ['name'],
  37  *             title: {
  38  *                 text: 'Sample Values',
  39  *                 fontSize: 15
  40  *             }
  41  *         }],
  42  *         series: [{
  43  *             type: 'scatter',
  44  *             highlight: {
  45  *                 size: 7,
  46  *                 radius: 7
  47  *             },
  48  *             fill: true,
  49  *             xField: 'name',
  50  *             yField: 'data3',
  51  *             marker: {
  52  *                 type: 'circle',
  53  *                 fillStyle: 'blue',
  54  *                 radius: 10,
  55  *                 lineWidth: 0
  56  *             }
  57  *         }]
  58  *     });
  59  *     Ext.Viewport.setLayout('fit');
  60  *     Ext.Viewport.add(chart);
  61  *
  62  * 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,
  63  * `data1`, `data2` and `data3` respectively. All x-fields for the series must be the same field, in this case `name`.
  64  * Each scatter series has a different styling configuration for markers, specified by the `marker` object. Finally we set the left axis as
  65  * axis to show the current values of the elements.
  66  *
  67  */
  68 Ext.define('Ext.chart.series.Scatter', {
  69
  70     extend: 'Ext.chart.series.Cartesian',
  71
  72     alias: 'series.scatter',
  73
  74     type: 'scatter',
  75     seriesType: 'scatterSeries',
  76
  77     requires: [
  78         'Ext.chart.series.sprite.Scatter'
  79     ],
  80
  81     config: {
  82         itemInstancing: {
  83             fx: {
  84                 customDuration: {
  85                     translationX: 0,
  86                     translationY: 0
  87                 }
  88             }
  89         }
  90     },
  91
  92     applyMarker: function (marker) {
  93         this.getItemInstancing();
  94         this.setItemInstancing(marker);
  95     },
  96
  97     provideLegendInfo: function (target) {
  98         var style = this.config.marker;
  99         target.push({
 100             name: this.getTitle() || this.getYField() || this.getId(),
 101             mark: style.fill || style.stroke || 'black',
 102             disabled: false,
 103             series: this.getId(),
 104             index: 0
 105         });
 106     }
 107 });
 108