Querying Data


To query for data, 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();


Once the SDK has been initiated, you can start querying the data.


export type QueryAttributes[],
export type QueryAttributes = {
  filter: QueryAttributes.Filter[][];
  measure: QueryAttributes.Measure[];
  dimension: QueryAttributes.Dimension[];
  timeDimension: QueryAttributes.TimeDimension | null;
  dataSetId: string;
  order: QueryAttributes.Order[];
  limit: number;
export type QueryResponse = {
  results: (Result | null)[] | (any[][] | null)[] | null;
export type Result = {
  content: any[][];
  fields: Result.Field[];


const doSomething = async () => {
  const query: QueryAttributes[] = [
      filter: [],
      measure: [
          field: 'fie_1',
          function: 'sum',
      dimension: [
          field: 'fie_1',
          function: 'none',
          pivot: 'x',
      timeDimension: null,
      dataSetId: 'data_set_1',
      order: [],
      limit: 5000,
  const response: QueryResponse = await vizzly.query();

Full Example

You can see an example of how it can be implemented in the Custom Component page.

Optional parameters


export type QueryParams = {
  abortController?: AbortController;
  instanceId?: string;
  runQueries?: CustomDriver['runQueries'];
  data?: loadDataCallback;
  queryEngineEndpoint?: QueryEngineEndpoint;
  dateFilterOptions?: DateTimeFilterOptions;
  // The filters that have been applied a data set.
  dashboardFilters: DataSetDashboardFilters;
await vizzly.query(<< QUERY >>, { << QUERY PARAMS >> });