Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
Yianni_Ververis
Employee
Employee

Qdt-components is a library that we've build in the Demo Team to help us with our mashups.

We had many requests for custom picasso charts, other than the pre existing ones we already include in the bundle.

Qdt-components is a library that we've build in the Demo Team to help us with our mashups.

We had many requests for custom picasso charts, other than the pre existing ones we already include in the bundle.

So far we have  'comboLineBarchart',  'horizontalBarchart''lineChart''multiLineChart''pie''piechart''scatterplot''verticalBarchart''verticalGroupBarchart''stackedBarchart''verticalGauge''verticalRangeGauge' and 'rangeArea'.

Today I have also added a Gantt chart (https://qdt-apps.qlik.com/qdt-components/react/#/picasso-gantt)
picassoGantt.png

 

So the question is what if I want to create another chart that is not one of the above?

There are two ways of achieving this. Either by getting a preexisting one and adding more components, like a bar chart and add a line to make it a combo or, by including all of the components yourself.

In order to make this possible, we have exported all of these preexisting charts, as well the individual components like axis, boxes, lines, dots, labels, legend, pie, point, range and tooltip. 

Here is an example that describes both ideas.

https://qdt-apps.qlik.com/qdt-components/react/#/picasso-custom-combo-chart

Screen Shot 2019-06-13 at 11.34.45 AM.png

In the first example "custom1", I used an already predefined setting, verticalComboChart and appended 2 lines and 3 points.

In the second example "custom2", I created the entire settings file.

https://github.com/qlik-demo-team/qdt-react-website/blob/master/src/pages/PicassoCustomChart.jsx

https://github.com/qlik-demo-team/qdt-react-website/blob/master/src/components/QdtComponent.jsx

Render in your Template
<QdtComponent type={viz2.type} props={viz2.props} />
Define the props in your code
    // In this page:
    const viz2 = {
        type: 'QdtPicasso',
        props: {
          type: 'custom1',
          cols: [
            "Case Owner Group",
            "=Num(Avg([Case Duration Time]), '##.0')",
            "=Count( {$<Priority={'Low'}, Status -={'Closed'} >} Distinct %CaseId )",
            "=Count( {$<Priority={'Medium'}, Status -={'Closed'} >} Distinct %CaseId )",
            "=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )",
          ],
          outerHeight: 300,
        },
      };
      
      const viz3 = {
        type: 'QdtPicasso',
        props: {
          type: 'custom2',
          cols: [
            'Case Owner Group',
            "=Num(Avg([Case Duration Time]), '##.0')",
            "=Count( {$<Priority={'Low'}, Status -={'Closed'} >} Distinct %CaseId )",
            "=Count( {$<Priority={'Medium'}, Status -={'Closed'} >} Distinct %CaseId )",
            "=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )",
          ],
          outerHeight: 300,
        },
      };

      // in the QdtComponents class:
      componentWillMount() {
        const { props } = this.props;
        const { settings, components, interactions } = QdtComponents.picasso;
        if (props.type === 'custom1') {
          props.type = null;
          props.settings = settings.verticalBarchart;
          props.settings.scales.y = { data: { fields: ['qMeasureInfo/0', 'qMeasureInfo/1', 'qMeasureInfo/2'] }, invert: true, expand: 0.04 };
          props.settings.components.push(components.line({
            displayOrder: 3, y: { field: 'qMeasureInfo/1' }, stroke: '#960000',
          }));
          props.settings.components.push(components.point({ displayOrder: 4, y: { field: 'qMeasureInfo/1' }, fill: '#960000' }));
          props.settings.components.push(components.line({
            displayOrder: 5, y: { field: 'qMeasureInfo/2' }, stroke: '#99cc66',
          }));
          props.settings.components.push(components.point({ displayOrder: 6, y: { field: 'qMeasureInfo/2' }, fill: '#99cc66' }));
          props.settings.components.push(components.point({ displayOrder: 7, y: { field: 'qMeasureInfo/3' }, fill: '#275378' }));
        } else if (props.type === 'custom2') {
          props.type = null;
          props.settings = {
            scales: {
              x: { data: { extract: { field: 'qDimensionInfo/0' } }, padding: 0.3 },
              y: { data: { fields: ['qMeasureInfo/0', 'qMeasureInfo/1'] }, invert: true, expand: 0.2 },
              c: { data: { field: 'qMeasureInfo/0' }, type: 'color' },
            },
            components: [
              { type: 'grid-line', y: 'y' },
              components.axis(),
              components.axis({ scale: 'y' }),
              components.tooltip,
              components.box({ fill: '#3399CC', stroke: '#275378' }),
              components.labels(),
              components.line({
                key: 'line2', displayOrder: 3, y: { field: 'qMeasureInfo/1' }, stroke: '#CC6666',
              }),
              components.point({
                key: 'point2', displayOrder: 4, y: { field: 'qMeasureInfo/1' }, fill: '#CC6666', stroke: '#B35A01',
              }),
              components.range(),
            ],
            interactions: [
              interactions.itooltip,
              interactions.pan(),
            ],
          };
        }
      }

Yianni

8 Comments
Clever_Anjos
Employee
Employee

Hi, https://qdt-apps.qlik.com/ links seems to be broken

0 Likes
2,463 Views
Yianni_Ververis
Employee
Employee

Delete cookies and cache, internal issue...

0 Likes
2,457 Views
Clever_Anjos
Employee
Employee

Great, wizard

0 Likes
2,454 Views
paulcalvet
Partner - Specialist
Partner - Specialist

Hello Yianni,

I want to create a visualisation with more than 10K points (for a datascientist)

We analyze machine sensor data in the industry and graphics cannot display all the data

Is it possible ?

Thanks,

Paul

0 Likes
2,189 Views
Yianni_Ververis
Employee
Employee

Yes but that is the limit for the hypercube so you would need to paginate

 

0 Likes
2,178 Views
jeffersonshibuya
Partner - Contributor
Partner - Contributor

Hello Yianni,

How can I change the settings on vue component? 

const viz2 = {
  type: 'QdtPicasso',
  props: {
    type: 'stackedBarchart',
    cols: ['MyCols...'],
    settings: {
      scales: {
        y: { 
          min: 0,
          max: 100, 
        }
      }
    },
    outerHeight: 200
  }
}

 

I've tried to add settings on props, but no success, is there another way to set for example the max and min scales?

Thanks 

0 Likes
1,310 Views
Yianni_Ververis
Employee
Employee

No, settings are not passed as props. You can modify the settings file before render

 

https://qdt-apps.qlik.com/qdt-components/react/#/picasso-custom-combo-chart

1,051 Views
Yianni_Ververis
Employee
Employee

qdt-components 3.0 beta is out. Check out the examples at
https://observablehq.com/collection/@yianni-ververis/qdt-components 

0 Likes
692 Views