QdtViz.md

QdtViz: Get a Visualization from Qlik Sense

• This component can be used to create or get a native Qlik Sense vizualization. There are two primary ways to do this:
  • Get Existing: If you define the id prop, then it will get that Qlik Sense vizualization.
  • Create New: If you define the type, cols, and options props it will create a new vizualization.
• The width and height props are both optional, and default to '100%'.
• The QdtViz Component uses the Capability Api - getObject method

Properties

prop	type	description
id	String	Id for an existing visualization
type	String	see here
cols	Array	see here
options	Object	see here
width	String	Sets width of viz
height	String	Sets height of viz
exportData	Boolean	Show button for export in CSV
exportDataTitle	String	Optional. Set the button title. Defaults to Export Data
exportDataOptions	Object	see here. Defaults to { format: 'CSV_T', state: 'P' }
exportImg	Boolean	Show button for export in JPG
exportImgTitle	String	Optional. Set the button title. Defaults to Export Image
exportImgOptions	Object	see here. Defaults to { width: 300, height: 400, format: 'JPG' }
exportPdf	Boolean	Show button for export in PDF
exportPdfTitle	String	Optional. Set the button title. Defaults to Export Pdf
exportPdfOptions	Object	see here. Defaults to { documentSize: 'A4', orientation: 'landscape', aspectRatio: 2 }

Code

Vanilla JavaScript

• See the HTML Template for the basic page setup.

var options = {
  config: { /* host, port, appid, etc. */ },
  connections: { /* vizApi, engineAPI */}
}

var qdtComponents = new QdtComponents(options.config, options.connections);

var element = document.getElementById('qdt1');

qdtComponents.render(
  "QdtViz", 
  {
    type: 'barchart',
    id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398',
    height: '300px',
    exportData: true,
    exportImg: true,
    exportImgOptions: { width: 600, height: 400, format: 'JPG' },
    exportPdf: true,
    exportPdfOptions: { documentSize: { width: 300, height: 150 } },
  }, 
  element
);

React

<QdtComponent
  type="QdtViz"
  props={{
    type: 'barchart',
    id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398',
    height: '300px',
    exportData: true,
    exportImg: true,
    exportImgOptions: { width: 600, height: 400, format: 'JPG' },
    exportPdf: true,
    exportPdfOptions: { documentSize: { width: 300, height: 150 } },
  }}
/>

Angular

// qdt-viz.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'qdt-viz',
  templateUrl: './qdt-viz.component.html',
})
export class QdtVizComponent implements OnInit {

  constructor(private el: ElementRef) { }

  chart_options = {
    type: 'QdtViz',
    props: {
      type: 'barchart',
      id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398',
      height: '300px',
      exportData: true,
      exportImg: true,
      exportImgOptions: { width: 600, height: 400, format: 'JPG' },
      exportPdf: true,
      exportPdfOptions: { documentSize: { width: 300, height: 150 } },
    },
  };

  ngOnInit() {

  }

}

<!-- html -->
<qdt-viz [Component]="chart_options.type" [props]="chart_options.props"></qdt-viz>

Examples

• Embed Object (React)
• Embed Objects from Multiple Apps (React)
• Create a Session Object (React)

---

← Back to All Components