Get started with programmatic dashboards

This guide provides an overview of creating programmatic layouts for dashboards in Vizzly. It will introduce the key components such as Dashboard, Row, and Cell, and demonstrate how to use them for customizing dashboard layouts. The focus is on practical steps to effectively organize and display data on your Vizzly dashboard.

This feature is available for both the React and Web Component.

Prerequisites

@vizzly/dashboard version 0.7.0 or greater.
To create a dashboard programmatically you need to first install and initialize Vizzly Services.
A parent dashboard you've created that's to be used for the programmatic dashboard.

Basic Example in the React Component

<VizzlyDashboard.Dashboard
    ...
    // other properties
    ...
    parentDashboard={async (dataSets) => {
        const dashboard = new Vizzly.Dashboard('<< Parent Dashboard ID >>')
        const header = new Vizzly.Header("My Dashboard");
 
        const barChart = new Vizzly.BarChart(dataSets[0])
        const cellOne =  new Vizzly.Cell({ component: barChart, colSpan: 6 });
 
        const emptyCellTwo = new Vizzly.Cell({ colSpan: 6 });
 
        const table = new Vizzly.BasicTable(dataSets[0], { displayTitle: "Chart Breakdown" })
        const cellThree = new Vizzly.Cell({ component: table, colSpan: 12 });
 
        const firstRow = new Vizzly.Row([cellOne, emptyCellTwo])
        const secondRow = new Vizzly.Row([cellThree])
        dashboard.setDisplay([header, firstRow, secondRow])
 
        return [dashboard.build()];
    }}
/>