Skip to content

Latest commit

 

History

History

QdtPicasso

readme.md

QdtPicasso

Create a chart in Picasso.js using the Engine API (Nov 2019 docs) in:

Properties

prop type description
type String comboLineBarchart, horizontalBarchart, lineChart, multiLineChart, pie, piechart, pointDistribution, pyramid, rangeArea, scatterplot, stackedBarchart, verticalBarchart, verticalGauge, verticalGroupBarchart, verticalRangeGauge
cols Array [dimension, measure]
options Object color
prio String canvas or svg. If omitted, it defaults to canvas

Examples

Horizontal Barchart Vertical Barchart Pie Chart Scatterplot Line Chart
picassoHorizontalBarchart picassoVerticalBarchart picassoPie picassoScotterplot picassoLinechart
Multi-Line Chart Stacked Bar Chart Gauge Range Area Vertical Group Bar Chart
picassoMultiLinechart picassoStackedBarchart gauge picassoRangeAreaChart picassoVerticalBarchart
Gantt Chart Marimekko Chart Custom Chart Point Distribution Pyramid
Picasso Gantt Chart Picasso Mekko Chart picassoCustomChart Picasso Point Distribution Picasso Pyramid

[↑] Back to top

Code

Vanilla JavaScript

  • See the HTML Template for the basic page setup. The two main items are:
    • qdt-components.js <script> tag in the <head>
    • root HTML element in the <body> with desired id; example: <div id="qdt1"></div>
  • Here is a simple example of the JavaScript required
// main.js

// ============
// configuration options for qdtComponents; see template link above for specifics
var options = {
  config: { /* host, port, appid, etc. */ },
  connections: { /* vizApi, engineAPI */}
}

// ============
// #1: Instantiate new instance of QdtComponents
var qdtComponents = new QdtComponents(options.config, options.connections);

// ============
// #2: select element where you'll be placing the Picasso chart
var element = document.getElementById('qdt1');

// ============
// #3: render the chart
qdtComponents.render(
  "QdtPicasso", 
  {
    type: 'verticalBarchart', 
    cols: [
      'Champion_Full',
      "=Sum(if(Club = [Champion], [Total Compensation]))"
    ], 
    outerHeight: 400,
  }, 
  element
);

[↑] Back to top

React (JSX)

  • All QdtPicasso Components use the <QdtComponent> laid out in the React Template. We recommend creating a QdtComponent.jsx file and copying the QdtComponent class there with your Qlik Sense configuration. This will allow you to effortlessly create any Picasso chart you want.
  • Below is an example creation of a Vertical Bar Chart and then its use:
// horizontalBarChart.js
import React from 'react';
import QdtComponent from './QdtComponent'; // see React Template above for code

const chart_options = {
  type: 'QdtPicasso',
  props: {
      type: 'verticalBarchart', 
      cols: [
        'Champion_Full',
        "=Sum(if(Club = [Champion], [Total Compensation]))"
      ], 
      outerHeight: 400,
  },
};

// Version #1
const PicassoBarChart = () => (
  <div className="picasso-bar">
    <QdtComponent {...chart_options} />
  </div>
)

// Version #2
const PicassoBarChart = () => (
  <div className="picasso-bar">
    <QdtComponent 
      type={chart_options.type} 
      props={chart_options.props}
    />
  </div>
)

export { PicassoBarChart };
// index.js
import React from 'react';
import { render } from 'react-dom';

import { PicassoBarChart} from './horizontalBarChart';

const App = () => {
    return (
        <main>
            <PicassoBarChart />
        </main>
    )
}

render(<App />, document.getElementById('root'));

[↑] Back to top

Angular

[↑] Back to top

← Back to All Components