This example shows a simple dashboard with multiple chart types and LegendBox Panel.
The dashboard allows rendering of multiple scenes in a single view port highly efficiently with minimal memory resources. During the creation of a dashboard instance, the amount of rows and columns will have to be specified. This can not be changed afterwards.
// Create a dashboard with three rows and two columns.const dashboard =lightningChart().Dashboard({
numberOfRows:3,
numberOfColumns:2,})
Charts and Panels can then be added to the dashboard like follows:
// Create a ChartXY that occupies the top row of the dashboard.const chartXY = dashboard.createChartXY({// Row index (starting from bottom).
columnIndex:2,// Column index (starting from left).
rowIndex:0,// Row span (height, basically).
columnSpan:1,// Column span (width, basically).
rowSpan:2,})
Dashboards have separate methods for adding a different kind of Charts or Panels. Dashboard represents a grid with rows & columns. During the creation of the element, the row & column indices and the horizontal & vertical spans should be specified to position it in the correct place and fill the desired amount of cells.
// Create a spider chart and attach to dashboard.// Row 0, Column 0, Rows to fill 2, Columns to fill 1.const spiderChart = dashboard.createSpider(0,0,2,1)// Create a Legend Box Panel and attach to dashboard.// Row 0, Column 1, Rows to fill 2, Columns to fill 1.const legendBox = dashboard.createLegendBoxPanel({
columnIndex:0,
rowIndex:1,
columnSpan:2,
rowSpan:1,})
The dashboard rows and columns can have varying heights and widths respectively - you can resize them by clicking and dragging on the grid line separating the columns and rows from each other, or by using methods to set them programmatically:
// Set height of the first row of a dashboard.// By default each row and column has a size of 1.// The size is always relative to the combined size of each row / column.
dashboard.setRowHeight(0,2)// Set width of the first and the second column of a dashboard.// First column width will be 2/5 of the entire view's width.
dashboard.setColumnWidth(0,2)// Second column width will be 3/5 of the entire view's width.
dashboard.setColumnWidth(1,3)