Plot

Plot is represented as InteractiveDataDisplay.Plot object which is a prototype for all kinds of plots. Still it can be used as is to group other plots.

Plot maintains a plot transform which is a composition of a data transform and a coordinate transform. Data transform function is applied to a data point (xd,yd) and produces a plot plane point (xp, yp). For instance, if the data transform is xp = log(xd), yp = yd, the x-axis is logarithmic and y-axis is linear.

The coordinate transform then maps a plot plane point to a screen pixel (xs, ys). The coordinate transform also determines a visible region in a plot plane with given screen size.

Plot is hosted in a DIV element (only one plot can be hosted in a single DIV element) which is used as a visual output of the plot. It determines the screen region for the plot. Plot can place canvas or svg element into the DIV and render in it, or it can place any DOM element within the DIV and position it in the plot plane.

Plot can have children plots. Top level plot called a master plot. DIV elements of children plots must belong to the DIV element of their master plot, but may have tree-structure with the constraints:

• Only DIVs included to another DIV (but not any other HTML element) can be considered as children.
• Inner DIV element can be marked as a master plot; in this case it is not considered as a child of the outer plot.

Children plots can be grouped into a DIV element; in this case they can be shown/hidden/animated altogether.

Master plot layouts its children plots so that they all have same output screen region.

Figure plot is a plot with predefined layout which contains children plots and axes with a user-defined placement.

All children plots have same plot transform as their master, but may have different data transforms. Each plot (if needs) should an individual canvas element so that it could be updated separately from others, if only its data changes.

Related topics

Update layout

Properties

• host returns a JQuery of a DIV element hosting the plot.

• name

• instanceId

• isMaster returns true if the plot is a master plot.

• master returns a master plot for the plot. If the plot is master, the property returns the plot itself.

• children returns an array of immediate children of the plot.

• xDataTransform, yDataTransform allow to set or get partial functions which convert a point in a data plane to a point in a plot plane. Structure: { dataToPlot, domain } (see idd.transform.js for details). Domain restricts allowed region of the plot plane so that the visible region for the must belong to this set. If domain is undefined, the functions are total.

• coordinateTransform returns an object with scales and offsets as well as two-way functions converting a point in a plot plane to a point in a screen plane and backwards. Children plots return the function of their master plot. Structure: { scaleX, scaleY, offsetX, offsetY, plotToScreenX, plotToScreenY, screenToPlotX, screenToPlotY }.

• visibleRect

• screenSize

• aspectRatio if defined, makes the SetVisibleRegion to keep the given aspect ratio. When set to a child plot, automatically propagated to the master plot and to all other children.

• isAutoFitEnabled if set to true, asynchronously fits visible range to the data and updates the plot output; following changes will update the visible region automatically. If set to false, the current visible region will not be updated when plot data changes.

• doFitOnDataTransformChanged

• isVisible determines whether the plot (with its children plots) should be rendered or not.

• isInAnimation is true if someone from outside is performing an animation for the plot and will call at least once the Render method soon. This allows to skip rendering and rely on animation requests.

• requestsRender is true if the plot needs to re-draw its output.

• isRendered

• padding allows to specify a padding in pixels which is added to the bounding box of the plot in fit-to-view.

• order (get/set) is an integer value indicating z-order of plots images. Plots with greater order are displayed above plots with less order. Also see Plot.updateOrder method to change the order relatively to other plot.

• tooltipSettings

• isToolTipEnabled

• titles allows set titles for the plot's properties. E.g. { 'color' : 'age' } sets the 'age' title for the color data series. Given titles are displayed in legends and tooltips.

• navigation returns a Navigation object attached to the master plot.

• mapControl

• flatRendering

Events

IDD uses JQuery events.

• appearanceChanged occurs when plot's property that affects its appearance has been changed. It is fired for the host of the plot. It is called asynchronously and thus multiple events of this kind can be potentially accumulated into a single event and corresponding legend update occurs just once. This significantly reduces load caused by legend update in case of intensive data update.

• childrenChanged occurs when new immediate child plot is added or removed. Arguments: {type: "add"|"remove", plot: Plot}.

• isAutoFitChanged

• visibleRectChanged occurs when visibleRect of the master plot has changed. It is fired for the master plot only.

• plotRemoved

• orderChanged

Methods

• getTitle(property) returns a user-readable title for a property of a plot. E.g. can return "age" for property "color". If there is no user-defined title, returns the given property name as it is.

• setTitles(titles)

• destroy() uninitializes the plot.

• remove() logically removes the plot from its master and physically destroys its host element by calling JQuery's remove for the host.

• removeMap()

• getPlotsSequence gets a flat array of all children plots.

• addChild(Plot) logically adds a child to children, fires the event childrenChanged and requests layout update. The given plot's host must be already properly added to the master's host.

• removeChild(plot) logically removes a child plot. It doesn't destroys the child's DOM element.

  • An argument plot is either the plot object or child name. The child may be immediate or not.
  • Returns true if the child plot was found and removed.

• updateLayout() immediately recomputes layout of the plot's master and renders all children plots.

• fitToView() recomputes the visible rectangle so it fits all the plot's visible elements with a padding.

  • If called for a child plot, it is redirected for the plot's master.
  • Stops an ongoing navigation and turns isAutoFitEnabled to false.
  • Works asynchronously, i.e. doesn't perform layout update immediately.

• fitToViewX(), fitToViewY()

• requestNextFrameOrUpdate() If isAutoFitEnabled is true and bounding box has changed, it updates the layout; otherwise, requests next frame for this plot. This method should be called from derived plots to efficiently update output.

• get(p) finds and returns a plot object which belongs to this plot's master. The argument p is either plot name, plot's host id or plot's host element. If plot is not found, returns undefined.

• exportToSvg() renders the plot to new SVG image and returns it as an instance of SVG.

• exportContentToSvg(plotRect, screenSize, svg) renders the plot to the given SVG image.

• exportLegendToSvg(legendDiv) renders legend of the plot to a new SVG image and returns it.

• getLegend()

• updateOrder(targetPlot, isPrev) changes order of the plot relatively to another plot. If isPrev is true, this plot is placed below the target plot; otherwise, it is above.