text: /**
   * This example shows how to create a Plot chart with floating axes linked to each other
   * at the origin. Floating axes can track a value on another axis running in the oppsosite
   * direction. This is handy for visualizing mathematical functions. Try zooming and panning
   * the chart to see the effect.
   *
   * To zoom the chart, use the pinch-in/pinch-out gestures, if you are on a mobile device.
   * Or click and drag, if you are using a desktop browser. Click and drag also acts as a
   * panning gesture on desktops. You can use the Pan/Zoom toggle in the upper-left corner
   * of the chart to switch modes.
   */
  Ext.define('KitchenSink.view.charts.line.Plot', {
      extend: 'Ext.panel.Panel',
      xtype: 'line-plot',
      controller: 'line-plot',
  
      requires: [
          'Ext.chart.CartesianChart',
          'Ext.chart.interactions.PanZoom',
          'Ext.chart.series.Bar',
          'Ext.chart.axis.Numeric',
          'Ext.chart.axis.Category'
      ],
  
      // <example>
      // Content between example tags is omitted from code preview.
      otherContent: [{
          type: 'Controller',
          path: 'classic/samples/view/charts/line/PlotController.js'
      }, {
          type: 'Store',
          path: 'classic/samples/store/Plot.js'
      }],
      // </example>
      layout: 'fit',
      width: 650,
  
      tbar: {
          reference: 'toolbar',
          items: [
              '->',
              {
                  text: 'Next function',
                  handler: 'onRefresh'
              },
              {
                  text: 'Preview',
                  handler: 'onPreview'
              },
              {
                  text: 'Reset pan/zoom',
                  handler: 'onPanZoomReset'
              }
          ]
      },
  
      items: [{
          xtype: 'cartesian',
          reference: 'chart',
          height: 500,
          store: {
              type: 'plot'
          },
          padding: 10,
          insetPadding: 0,
          interactions: {
              type: 'panzoom',
              zoomOnPanGesture: true
          },
          // <example>
          // TODO: must be able to control how series are displayed
          // TODO: for undefined data points (apply fillStyle to the series
          // TODO: to see the issue)
          // </example>
          series: [
              {
                  type: 'line',
                  xField: 'x',
                  yField: 'y1',
                  style: {
                      lineWidth: 2,
                      strokeStyle: 'rgb(0, 119, 204)'
                  }
              }
              // <example>
  // TODO: The second line series does not render correctly, it should look the same
  // TODO: as the blue series will look on next refresh button tap, but doesn't,
  // TODO: even though the data looks alright.
  // TODO: add 'me.fn[(me.fnIndex + 1) % me.fn.length]' to Plot store's traverseFunctions
  // TODO: as a third parameter to test this.
  // TODO:               {
  // TODO:                   type: 'line',
  // TODO:                   xField: 'x',
  // TODO:                   yField: 'y2',
  // TODO:                   style: {
  // TODO:                       lineWidth: 2,
  // TODO:                       lineDash: [3, 3],
  // TODO:                       strokeStyle: 'rgb(230, 119, 204)'
  // TODO:                   }
  // TODO:               }
              // </example>
          ],
          axes: [
              {
                  type: 'numeric',
                  position: 'left',
                  fields: ['y1'],
                  titleMargin: 20,
                  title: {
                      text: 'f(x)',
                      fillStyle: 'rgb(255, 0, 136)'
                  },
                  minimum: -4,
                  maximum: 4,
                  minorTickSteps: 3,
                  style: {
                      minorTicks: true,
                      minorTickSize: 4,
                      majorTickSize: 7
                  },
                  floating: {
                      value: 0,
                      alongAxis: 1
                  },
                  grid: true
              },
              {
                  type: 'numeric',
                  position: 'bottom',
                  fields: ['x'],
                  titleMargin: 6,
                  minorTickSteps: 3,
                  style: {
                      minorTicks: true,
                      minorTickSize: 4,
                      majorTickSize: 7
                  },
                  title: {
                      text: 'x',
                      fillStyle: 'rgb(255, 0, 136)'
                  },
                  floating: {
                      value: 0,
                      alongAxis: 0
                  },
                  grid: true
              }
          ]
      }],
  
      listeners: {
          afterrender: 'onAfterRender'
      }
  
  });
  