Ext Flot Tutorial

• Ext Flot Tutorial
• Basic
• Setting Options

Basic

• html: http://extflot.googlecode.com/svn/trunk/basic.html
• js: http://extflot.googlecode.com/svn/trunk/basic.js

Creation of Ext Flot intance is very simple. Required configurations only 'series'. And I suppose to set 'width' and 'height' properties.

 items: [{
   xtype: 'flot',
   width: 600,
   height: 480,
   series: data
 }]

Here, series data just contains datapoints.

  var d1 = [];
  for (var i = 0; i < 14; i += 0.5) { d1.push([i, Math.sin(i)]); }
  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
  var data = [d1, d2, d3];

Setting Options

• html: http://extflot.googlecode.com/svn/trunk/setting_options.html
• js: http://extflot.googlecode.com/svn/trunk/setting_options.js

Advanced flot settings can mix into the Ext configurations.

 items: [{
   xtype: 'flot',
   width: 600,
   height: 480,
   series: series,
   lines: { show: true },
   points: { show: true },
   xaxis: {
     ticks: [0, [Math.PI * 0.5, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 * 0.5, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
   },
   yaxis: {
     ticks: 10,
     min: -2,
     max: 2
   },
   grid: {
     backgroundColor: "#fffaff"
   },
   // Default DD Mode set to 'zoom'
   selection: {
     action: 'zoom'
   },
   tooltip: false,   // disable tooltip
   // Base series which is applied to all series
   baseSeries: {
     selectable: false
   }
 }]

Ext Flot configurations can accept all original flot options.

 lines: { show: true },
 points: { show: true },
 xaxis: {
   ticks: [0, [Math.PI * 0.5, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 * 0.5, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
 },
 yaxis: {
   ticks: 10,
   min: -2,
   max: 2
 },
 grid: {
   backgroundColor: "#fffaff"
 },

There are some Ext Flot extended configurations.

 // Default DD Mode set to 'zoom'
 selection: {
   action: 'zoom'
 },
 tooltip: false,   // disable tooltip
 // Base series which is applied to all series
 baseSeries: {
   selectable: false
 }

Series contains additional configurations and data.

  var i, d1 = [];
  for (i = 0; i < Math.PI * 2; i += 0.25)
      d1.push([i, Math.sin(i)]);
  
  var d2 = [];
  for (i = 0; i < Math.PI * 2; i += 0.25)
      d2.push([i, Math.cos(i)]);

  var d3 = [];
  for (i = 0; i < Math.PI * 2; i += 0.1)
      d3.push([i, Math.tan(i)]);

  var series = [
    { label: "sin(x)",  data: d1},
    { label: "cos(x)",  data: d2},
    { label: "tan(x)",  data: d3}
  ];

Property window can be replaced into your original window after instance created. You can set Ext.Component to 'propertyCmp' property.

  flot.propertyCmp = new Ext.Window({
    title: 'Replaced Property Window',
    closeAction: 'hide',
    html: '<h1 style="padding: 24px">Property is currently disabled!</h1>'
  });

You can edit or replace context menu list after instance created.

  flot.contextMenu = [{
    text: 'Replaced Context Menu'
  },'-',{
    text: 'Property',
    handler: function() {
      this.showProperty();
    },
    scope: flot
  }];