Creating a Dashboard

Initialization

To create a new dashboard, you must first initiate the Vizzly 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();

Usage

Once the SDK has been initiated, you can build and save the dashboard.

const doCreateDashboard = async () => {
  const vizzly = Vizzly.use();
 
  // Build out an empty dashboard.
  // Optionally add any charts tables or maps to
  // your dashboard before saving it!
  // For examples on fleshing out your dashboard, see
  // https://docs.vizzly.co/services/programmatic-dashboard-examples
  const myDashboard = new Vizzly.Dashboard();
 
  // The parent dashboard that this created dashboard should be linked too.
  // Get this value from your project's parent dashboard list on app.vizzly.co
  const parentDashboardId = 'dsh_1234';
 
  await vizzly.createDashboard({
    parentDashboardId: parentDashboardId,
    // Call the build function on the dashboard
    definition: myDashboard.build(),
    // Add any metadata you want to store along with this dashboard
    metadata: {
      name: 'My first programmatic dashboard',
      any: 'key-value pairs that you want to store in here'
    },
  });
};