src/examples/kitchensink/app/view/LineChartWithMarker.js

   1 /**
   2  * Demonstrates how to use Ext.chart.series.Line with Markers
   3  */
   4 //<feature charts>
   5 Ext.define('Kitchensink.view.LineChartWithMarker', {
   6     extend: 'Ext.Panel',
   7     requires: ['Ext.chart.Chart', 'Ext.chart.series.Line', 'Ext.chart.axis.Numeric', 'Ext.draw.modifier.Highlight',
   8                'Ext.chart.axis.Time', 'Ext.chart.interactions.ItemHighlight'],
   9     config: {
  10         cls: 'card1',
  11         layout: 'fit',
  12         items: [
  13             {
  14                 xtype: 'toolbar',
  15                 cls: 'charttoolbar',
  16                 top: 0,
  17                 right: 0,
  18                 zIndex: 50,
  19                 style: {
  20                     background: 'none'
  21                 },
  22                 items: [
  23                     {
  24                         xtype: 'spacer'
  25                     },
  26                     {
  27                         iconCls: 'refresh',
  28                         text: 'Refresh',
  29                         handler: function (a, b, c, d, e) {
  30                             Ext.getStore('Pie').generateData(10);
  31                         }
  32                     },
  33                     {
  34                         text: 'Reset',
  35                         handler: function () {
  36                             //ensure the query gets the chart for this kitchensink example
  37                             var chart = Ext.ComponentQuery.query('chart', this.getParent().getParent())[0];
  38
  39                             //reset the axis
  40                             Ext.ComponentQuery.query('axis', chart)[0].setVisibleRange([0, 1]);
  41                             Ext.ComponentQuery.query('axis', chart)[1].setVisibleRange([0, 0.5]);
  42                             chart.redraw();
  43
  44                             //reset the legend
  45                             chart.resetLegendStore();
  46                         }
  47                     }
  48                 ]
  49             },
  50             {
  51                 xtype: 'chart',
  52                 store: 'Pie',
  53                 background: 'white',
  54                 interactions: [
  55                     {
  56                         type: 'panzoom',
  57                         zoomOnPanGesture: false
  58                     },
  59                     'itemhighlight'
  60                 ],
  61                 legend: {
  62                     position: 'bottom'
  63                 },
  64                 series: [
  65                     {
  66                         type: 'line',
  67                         xField: 'name',
  68                         yField: 'g1',
  69                         style: {
  70                             smooth: true,
  71                             stroke: 'rgb(143,203,203)',
  72                             fill: 'rgba(143,203,203,0.3)',
  73                             miterLimit: 3,
  74                             lineCap: 'miter',
  75                             lineWidth: 2
  76                         },
  77                         title: 'Square',
  78
  79                         highlightCfg: {
  80                             scale: 0.7
  81                         },
  82
  83                         marker: {
  84                             type: 'image',
  85                             src: 'glyphicons_094_vector_path_square.png',
  86                             width: 46,
  87                             height: 46,
  88                             x: -23,
  89                             y: -23,
  90                             scale: 0.5,
  91                             fx: {
  92                                 duration: 200
  93                             }
  94                         }
  95                     },
  96                     {
  97                         type: 'line',
  98                         xField: 'name',
  99                         yField: 'g2',
 100                         style: {
 101                             stroke: 'rgb(143,203,203)',
 102                             lineWidth: 2
 103                         },
 104                         title: 'Circle',
 105
 106
 107                         highlightCfg: {
 108                             scale: 0.7
 109                         },
 110
 111                         marker: {
 112                             type: 'image',
 113                             src: 'glyphicons_095_vector_path_circle.png',
 114                             width: 46,
 115                             height: 46,
 116                             x: -23,
 117                             y: -23,
 118                             scale: 0.5,
 119                             fx: {
 120                                 duration: 200
 121                             }
 122                         }
 123                     },
 124                     {
 125                         type: 'line',
 126                         xField: 'name',
 127                         yField: 'g3',
 128                         style: {
 129                             stroke: 'rgb(143,203,203)',
 130                             lineWidth: 2
 131                         },
 132                         title: 'Polygon',
 133
 134                         highlightCfg: {
 135                             scale: 0.7
 136                         },
 137
 138                         marker: {
 139                             type: 'image',
 140                             src: 'glyphicons_096_vector_path_polygon.png',
 141                             width: 48,
 142                             height: 48,
 143                             x: -24,
 144                             y: -24,
 145                             scale: 0.5,
 146                             fx: {
 147                                 duration: 200
 148                             }
 149                         }
 150                     }
 151                 ],
 152                 axes: [
 153                     {
 154                         type: 'numeric',
 155                         position: 'left',
 156                         fields: ['g1', 'g2', 'g3'],
 157                         minimum: 0
 158                     },
 159                     {
 160                         type: 'category',
 161                         position: 'bottom',
 162                         visibleRange: [0, 0.5],
 163                         fields: 'name'
 164                     }
 165                 ]
 166             }
 167         ]
 168     },
 169     initialize: function () {
 170         this.callParent();
 171         Ext.getStore('Pie').generateData(10);
 172         var toolbar = Ext.ComponentQuery.query('toolbar', this)[0],
 173             interaction = Ext.ComponentQuery.query('interaction', this)[0];
 174         if (toolbar && interaction && !interaction.isMultiTouch()) {
 175             toolbar.add(interaction.getModeToggleButton());
 176         }
 177     }
 178 });
 179 //</feature>