Programmatic dashboard examples

With Vizzly, we can build dashboards using the UI or programmatically. When you build a dashboard programmatically, you will need to initialize the SDK.

Use cases

You might want to build dashboards programmatically in these situations;

A desire to source control and version changes to dashboards.
Building dashboards for users that have unique fields in their data sets.
Programmatic PDF reports.
Building an initial set of multiple, custom-reporting dashboards for each user.

Initializing

To start, we need to initialize the SDK.

Initializing the Vizzly SDK

Ensure you have loaded the Vizzly package by following the prerequisite steps in our initializing guide.

If needed, you will also then be able to fetch the Vizzly instance using the following code.

const vizzly = Vizzly.use();

Basic example

In this example, we will create a function that builds a new dashboard, adds two rows with a bar chart and a table on.

export const buildMyDashboard = () => {
  // ID of the data set, defined either in your Query Engine or in your `dataSets` function.
  const payrollDataSetId = 'vizzly_data_set_xaubuas';
 
  // Provide a parent dashboard ID if you're building a programmatic parent dashboard
  // or leave it empty if you're creating a child dashboard.
  const dashboard = new Vizzly.Dashboard('dsh_123');
 
  // Prepare a new header to add to the dashboard.
  const header = new Vizzly.Header('My Dashboard');
 
  // Prepare a bar chart and a table to add to the dashboard.
  const barChart = new Vizzly.BarChart({ dataSetId: payrollDataSetId, displayTitle: 'My bar chart' });
  const table = new Vizzly.BasicTable({ dataSetId: payrollDataSetId, displayTitle: 'Chart Breakdown' });
 
  // Create the cells of the dashboard
  const cellWithBarChart =  new Vizzly.Cell({ component: barChart, colSpan: 6 });
  const emptyCell = new Vizzly.Cell({ colSpan: 6 });
  const cellThree = new Vizzly.Cell({ component: table, colSpan: 12 });
 
  // Add the cells to rows for the dashboard.
  const firstRow = new Vizzly.Row([cellWithBarChart, emptyCell]);
 
  const secondRowHeightInPixels = 750;
  const secondRow = new Vizzly.Row([cellThree], secondRowHeightInPixels);
 
  // Add the header and two rows to the dashboard
  dashboard.setDisplay([header, firstRow, secondRow]);
 
 
  // Prepare an area chart to add to the library
    const areaChart = new Vizzly.AreaChart({
    dataSetId: payrollDataSetId,
    displayTitle: 'Area Chart Two',
  });
 
  // Create a library for the dashboard.
  const library = new Vizzly.Library({
    components: [{ component: areaChart, uniqueViewId: 'areaChartTwo' }],
  });
 
  // Add the library to the dashboard.
  dashboard.setLibrary(library);
 
  return dashboard;
};