extflot

Extended flot by Ext JS

日本語版は ProjectSummaryJa にあります (Japanese edition is ProjectSummaryJa)

About Ext Flot

Ext Flot is an extension of flot on Ext JS. It's a pure javascript implementation.

Ext Flot depends on the following library.

Forum

Ext.ux.Flot has a thread in Ext JS User Extensions and Plugins * Ext JS Forums

Example

Use examples are on the followings...

Document

Powered by ext-doc

Basic Usage

Please see Tutorial.

Browser Support

The operation of Ext Flot is cheked by the following browsers.

  • Firefox 2: OK
  • Firefox 3: OK
  • IE 6: almost OK (Cannot click legends)
  • IE 7: almost OK (Cannot click legends)
  • IE 8: In flot 0.5 Excanvas is not supported. In latest version r156, it is available.
  • Opera: OK
  • Safari: OK
  • Chrome: OK

Source Code

Ext Flot consists of following source codes.

Source Code Selection

From ver.0.8, I recommend the latest module set.

  • latest

    • Ext JS 3.0 rc1.1 or Ext JS 2.2.1
    • Flot.js (Ext.ux.Flot 0.8)
    • Flot.css (css for Ext.ux.Flot)
    • jquery.flot.trunk.pie.js (Flot r156 with pie chart)
    • excanvas.r60.js (Explorer Canvas r60)
    • excanvas.silverlight.r60.js (Explorer Canvas SilverLight implementation)

  • old stable (IE8 is not supported)

    • Ext JS 2.2.1
    • Flot.js (Ext.ux.Flot 0.8)
    • Flot.css (css for Ext.ux.Flot)
    • jquery.flot.js/jquery.flot.pack.js (Flot 0.5)
    • excanvas.js/excanvas.pack.js (Explorer Canvas within Flot 0.5)

  • with localization

    • GetText.js (Locale module)
    • Flot.ja.js (Japanese localization)

Ext Flot Features

Ext Flot adds the following extension to flot.

  • Register with xtype
    • flot Ext.ux.Flot
    • pieflot Ext.ux.PieFlot (latest flot is required (not 0.5))
    • barflot Ext.ux.BarFlot
    • csvflot Ext.ux.CsvFlot
  • Form series.data from data.
    • In this case, baseSeries is done Ext.apply() as the basic setting.
  • The operation system of graph (clickable hoverable) becomes effective by default.
  • Select the point with a click. (series.clickable series.selectable)
    • Additional select to select with clicking shift (this.appendKey).
    • Cancel the selection of the point to re-click the selected point.
    • Cancel the selection to click the position without the point.
  • The context menu of default. (Invalid with contextMenu: false.)
    • Select mode
    • Zoom mode
    • Move (palm) mode
    • Return to 100%
    • Select all
    • Cancele the selection
    • Property
  • The context menu at the time of selecting the point. (Invalid with datapointContextMenu: false.)
    • Select all
    • Cancel the selection
    • Display the system
    • Hide the system
  • Specify the operation at the time of selecting. (selection.action)
    • select Select the range of a point.
    • zoom Extension
    • move The transfer of the range.
    • Specify the cursor in each mode with selection.cursor.
  • In zoom move, return to 100% by double click..
  • Select the range of a point.
    • Additional select to drag with clicking shift (this.appendKey).
  • Zoom
    • Zoom-in or zoom-out to the direction of operating selection.zoomDirection.
    • Zoom-in with 'tb' up and zoom-out with 'tb' down on default.
  • Move
    • Move to the direction of the operation.
    • To the left: The range is to the right.
    • To the right: The range is to the bottom.
    • To the top: The range is to the bottom.
    • To the bottom: The range is to the top.
  • Property
    • Display a property dialogue from the context menu.
    • Now display a simple grid which is generated from series.
    • createPropertyGridConfig
  • Compatible to tool tip display.
    • Select the event to display with tooltipEvent. (plothover plotclick)
    • Change the tool tip to display with tooltip option.
    • Change the timing to display the tool tip with tooltipEvent.
  • Acquire the selected point as an array of datapoint (x, y) with getSelected() method.
  • Example
    • Display and non-display of the series of single click. (series.hidable)
  • Compatible to the multilingualization by GetText.

Features only with flot latest (r156)

  • threshold option
  • crosshair option
  • plotselecting event

Above features are just available when Ext.ux.Flot binding with flot latest (r156).

The latest flot is not stable. It does not work well in IE6, etc...

Pie chart support (only r156)

Pie chart support of Flot is not still merged into Flot trunk. Now, I maintenance it as jquery.flot.trunk.pie.js.

About pie chart support of flot, please see the following site. http://code.google.com/p/flot/issues/detail?id=5

TODO

  • Binding with Ext.data.Store
  • Animated moving in dragging
  • Support QuickTips.
  • The preservation of the state and the reflection to Ext.state.Manager.
  • legend.container is not compatible.
  • excanvas does not work on IE 8.

License

Ext Flot is offered by two following licenses.

And also, the used fugue icon is offered with

Developer

Ext Flot is developed by K.Suzuki at Nippon Control System, co. Please report bugs to suzuki@nippon-control-system.co.jp.

Project Information

Labels:
javascript jquery plot chart graph visualization canvas extjs