Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
QlikWorld online is next week! REGISTER 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,165 Views
Yianni_Ververis
Employee
Employee

Delete cookies and cache, internal issue...

0 Likes
2,159 Views
Clever_Anjos
Employee
Employee

Great, wizard

0 Likes
2,156 Views
paulcalvet
Partner
Partner

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
1,891 Views
Yianni_Ververis
Employee
Employee

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

 

0 Likes
1,880 Views
jeffersonshibuya

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,012 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

753 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
394 Views