Ecoplot JQuery Plugin

Dynts comes with a fully fledged jQuery plugin for manipulating timeseries and scatter plots directly on the browser. The plugin is located on the media/dynts/ecoplot directory.

Dependencies

There are two dependencies:

• jQuery javascript library.
• Flot javascript plotting library. For convenience, this library is shipped within the media/dynts/flot directory.

The scripts to include are the followings:

<script type="text/javascript" src=".../dynts/flot/excanvas.min.js"></script>
<script type="text/javascript" src=".../dynts/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src=".../dynts/flot/jquery.flot.selection.min.js"></script>
<script type="text/javascript" src=".../dynts/ecoplot/ecoplot.js"></script>

Getting Started

Lets say we have a tag in the HTML we want the plugin to be rendered. It is as easy as this:

<div id="plot"></div>

var eco = $('#plot').ecoplot(options);

where options is an objects containing parameters for the plugin.

Input Options

options.autoload

If True (default) data is loaded when the plugin is created.

options.requestMethod

Type of AJAX request to send to server for obtaining data. Default get.

options.responsetype

Type of response from server. Currently only json is supported.

Output Options

The options object is updated with information useful for data manipulation.

options.canvases

Object containing information regarding canvases and data:

canvases = {
        all: array of canvas,
        current: index of currenct canvas
        height: height of canvas in pixels
}

API

Attributes

$.ecoplot.plugin_class

Default: "econometric-plot"

Css class name to add to plugins div elements.

$.ecoplot.version

Version string.

addEvent

Add a custom event to the plugin. Check the events documentation for further information.

$.ecoplot.addEvent({id:idname, register:reg_handler})

Arguments:

• idname (string) – A unique string to use as key for the event.
• reg_handler – A function called when registering the event with the plugin.

addMenu

Add custom action to the menu bar.

paginate

Render the plugin.

removeEvent

Opposite to $.ecoplot.addEvent(), it removes an event from the registry.

$.ecoplot.removeEvent(id)

Arguments:

• idname (string) – id of event to remove

Toolbar

The toolbar is an array of toolbar items:

var toolbar = [item1,...,itemN];

where a toolbar items is an object, for example:

    item = {
        classname: 'zoomout',
        title: "Zoom Out",
        icon: "ui-icon-zoomout",
        decorate: function(b,el) {...}
}

Events

Registering events with the plugin is also fully supported:

$.ecoplot.addEvent(event_handler);

where event_handler is an object with the following properties:

event_handler = {
    id: "unique_string_id",
    register: function(el) {
    ...
    }
}

where el is the jQuery element holding the plugin. The register function implements the event handling on the el element. By default there are four registered events:

• load for loading data.
• zoom for zooming functionalities.
• datepicker for decorating date inputs with jQuery datepicker plugin.
• tooltip for showing tooltip in the canvas.

Menu Bar

The menu is where we can add more interactive features with your data. To add menu items you need to use the addMenu function:

$.ecoplot.addMenu(menu_handler);

where menu_handler is an object with the following properties:

menu_handler = {
    name: 'unique_string_name',
    classname: 'a css class name',
    create: function(elem) {
    ...
    }
};

Internals

Here we describe the internal functions which are not exposed via the API.

_registerEvents()

called during initalization, it binds all events registered with addEvent API function with the ecoplot element.

_set_new_canavases($this, data)

Called after new data arrives, it updates the current canvases or create new ones. :param object $this: jQuery object holding the plugin :param object $this: list of flot-type objects containg data and plotting options.

_add(options, el_, data_, oldcanvas)

Create a flot canvas for a plugin.

_editpannel()

for creating editing panels