views

a module for working with 'above-cell' content

Example

ssheet.views.add(750,50,"chart","B2:E7",
    {type:"line", legend:1, xAxis:1, width:550, height:400}
);

Related samples

Module allows to add charts, images and other content above Spreadheet cells. Read the main article to get more information.

The views module has several methods to work with 'above-cell' content:

register()

Used for registering custom content types. The method takes the following parameters:

• type (string) - type of the view;
• render (function) - function that is called during view rendering. It has the following parameters:
  • node (object) - Webix window to render the view in;
  • config (object) - object with configuration settings for the view;
  • data (array) - JSON data ready for parse;
• track (function) - function that is called when data is changed in Spreadsheet. It has the following parameters:
  • view (object) - view instance;
  • data (array) - JSON data ready for parse.

add()

Adds available views (built-in or custom) to Spreadsheet. The method takes the following parameters:

• x (number) - a horizontal position
• y (number) - a vertical position
• type (string) - a type of view ("chart" or "image" or custom one)
• data (string) - data for the view, namely:
  • range of cells, like "B3:C7" or a named range
  • (for image) link to an image or a base64 string for it.

• config (object) - an object with the following properties:

  Common settings:

  • width (number) - view width
  • height (height) - view height.

  Chart-specific settings:

  • type (string) - type of charts
  • dataSeries (string) - get data from columns/rows ("columns" by default)
  • series (array) - an array of series objects. Each object represents a series and contains the following fields:
    • tooltip (number, boolean) - defines whether to show a tooltip when a series marker is hovered over.
    • label (number, boolean) - defines whether to show labels above the markers. The parameter does not work for the Spline Area and Area types. Use this property instead of pieInnerText for Pie charts.
    • marker (string) - defines markers type (shape). "triangle", "square", "diamond"; "round" by default. The parameter does not work for the Spline Area, Area, and Bar types.
    • range (string) - defines a data source for the series. For example, "C2:C7"
    • color (string) - defines a color for the series. For example, "#03a1fc".
  • xAxis (boolean|object):
    • boolean - if true, uses left data column as an X axis
    • object - an object with the following fields:
      • fromData (boolean) - if true, uses left data column / top data row (depending on dataFrom) as an X axis
      • title (string) - X axis title
      • range (string) - range of cells, like "C3:C7" as an X axis.
  • yAxis (object) - object with the following fields:
    • title (string) - Y axis title
    • origin (number) - the scale origin on the Y axis
    • start (number) - the minimum value of the scale on the Y axis
    • end (number) - the maximum value of the scale on the Y axis
    • step (number) - the scale step on the Y axis.
  • legend (boolean|object):
    • boolean - if true, uses top data row as a legend
    • object - an object with the follwoing fields:
      • fromData (boolean) - if true, uses top data row / left data column (depending on dataFrom) as a legend
      • align (string) - the horizontal alignment of the block ("right", "left", "center" by default)
      • valign (string) - the vertical alignment of the block ("top", "middle", "bottom" by default)
      • range (string) - uses range of cells, like "C3:C7" as a legend.
  • scale (object) - an object with the following fields:
    • lines (boolean) - if false, scale lines are invisible
    • circle (boolean) - the shape of the outer border of the radar area (radar type only)
    • color (string) - scale lines color.
  • 3D (boolean) - sets 3D chart (pie and donut charts only)
  • stacked (boolean) - sets chart stacked (bar and area charts only).

The method returns the ID of the newly added view.

remove()

Removes views from Spreadsheet. It takes the following parameter:

• id (string) - view ID.

get()

To get a view you can use the get() method. It takes the following parameter:

• id (string) - view ID.

The method returns the view instance.

getConfig()

The method returns the configuration object of the specified view.

• id (string) - view ID.

update()

To update a view you can use the update() method. It takes the following parameters:

• id (number) - the ID of the view;
• data (string, array) - data for the view, cell range or JSarray;
• config (object) - an object with the properties (described in the .add() method).

highlight(id)

The method sets the focus on a specified external view.

• id (string) - view ID.

Back to top