Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (111 sloc) 5.23 KB

QdtViz: Get a Visualization from Qlik Sense

QdtViz

  • 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

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


← Back to All Components

You can’t perform that action at this time.