views

a module for working with 'above-cell' content

object views;

Example

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

Related samples

Details

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');
  • data (string, array) - data for the view, namely:
    • range of cells, like "B3:C7" or a named range;
    • data in a JSArray format;
    • (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);
    • 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;
    • 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 chart only);
    • pieInnerText (boolean) - adds pie inner labels (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) - the id of the view.

get()

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

  • id (string) - the id of the view.

The method returns the view instance.

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).
See also
Back to top