extjs/build/examples/kitchensink/classic/samples/view/charts/line/Renderer.js

   1 /**
   2  * This example shows how to create a line chart with a renderer function that changes the
   3  * stroke and fill colors when the line goes down.
   4  *
   5  * Line charts allow to visualize the evolution of a value over time, or the ratio between
   6  * any two values.
   7  */
   8 Ext.define('KitchenSink.view.charts.line.Renderer', {
   9     extend: 'Ext.panel.Panel',
  10     xtype: 'line-renderer',
  11     controller: 'line-renderer',
  12
  13     requires: [
  14         'Ext.chart.CartesianChart',
  15         'Ext.chart.series.Line',
  16         'Ext.chart.axis.Numeric',
  17         'Ext.draw.modifier.Highlight',
  18         'Ext.chart.axis.Time',
  19         'Ext.chart.interactions.ItemHighlight'
  20     ],
  21
  22     layout: 'fit',
  23
  24     width: 650,
  25
  26     tbar: [
  27         '->',
  28         {
  29             text: 'Refresh',
  30             handler: 'onRefresh'
  31         }
  32     ],
  33
  34     items: [{
  35         xtype: 'cartesian',
  36         reference: 'chart',
  37         width: '100%',
  38         height: 500,
  39         store: {
  40             type: 'pie'
  41         },
  42         interactions: {
  43             type: 'panzoom',
  44             zoomOnPanGesture: true
  45         },
  46         series: [
  47             {
  48                 type: 'line',
  49                 xField: 'name',
  50                 yField: 'g1',
  51                 fill: true,
  52                 smooth: true,
  53                 style: {
  54                     lineWidth: 4
  55                 },
  56                 marker: {
  57                     type: 'circle',
  58                     radius: 10,
  59                     lineWidth: 2
  60                 },
  61                 renderer: 'onSeriesRender'
  62             }
  63         ],
  64         axes: [
  65             {
  66                 type: 'numeric',
  67                 position: 'left',
  68                 fields: ['g1'],
  69                 minimum: 0,
  70                 listeners: {
  71                     rangechange: 'onAxisRangeChange'
  72                 }
  73             },
  74             {
  75                 type: 'category',
  76                 position: 'bottom',
  77                 fields: 'name'
  78             }
  79         ]
  80     }]
  81
  82 });