Qdt-components - Embed Single Object (Capability API)Qdt-components - Embed Objects from 2 different Apps (Capability API)Qdt-components - Create a Session Object chart (Capability API)Qdt-components - Create a TableQdt-components - Filters and Selections ToolbarQdt-components - Creating a MapQdt-components - Map with 3D barsQdt-components - Create KPIsQdt-components - Horizontal BarchartQdt-components - Line chartQdt-components - Combo ChartQdt-components - ScatterplotQdt-components - Scatterplot with imagesQdt-components - PiechartQdt-components - Stacked BarchartQdt-components - Range AreachartQdt-components - Grouped BarchartQdt-components - MerimekkoQdt-components - TreemapQdt-components - custom chart
Qdt-components - Use the Sequencer
{
const { qdtCompose, QdtSelections, QdtSequencer, QdtTable } = QdtComponents;
qdtCompose({
element: selectionsToolbarElement,
component: QdtSelections,
app,
options: {},
properties: {
qSelectionObjectDef: {},
}
});
qdtCompose({
element: sequencerElement,
component: QdtSequencer,
app,
options: {
keyCode: 32,
delay: 1,
wheel: true,
},
properties: {
qListObjectDef: {
qDef: {
qFieldDefs: ['Date'],
},
qInitialDataFetch: [{
qWidth: 1,
qHeight: 1000,
}],
},
}
});
qdtCompose({
element: tableElement,
component: QdtTable,
app,
options: { multiple: false },
properties: {
qHyperCubeDef: {
qDimensions: [
{
qDef: { qLabel: 'Case Number', qFieldDefs: ['CaseNumber'] },
},
{
qDef: {
qLabel: 'Date',
qFieldDefs: ['Date'],
qSortCriterias: [{ qSortByAscii: 1 }],
},
},
{
qDef: { qLabel: 'Subject', qFieldDefs: ['Subject'] },
},
{
qDef: { qLabel: 'Case Owner', qFieldDefs: ['Case Owner'] },
},
{
qDef: { qLabel: 'Status', qFieldDefs: ['Status'] },
},
{
qDef: { qLabel: 'Case Created Date', qFieldDefs: ['Case Created Date'] },
},
{
qDef: { qLabel: 'Case Closed Date', qFieldDefs: ['Case Closed Date'] },
},
],
qMeasures: [
{
qDef: {
qLabel: 'Case Duration (dd hh:mm)',
qDef: "If(Count({$<[Case Is Closed]={'True'} >} %CaseId)>0, Avg ([Case Duration Time]),0)+ If(Count({$<[Case Is Closed]={'False'} >} %CaseId)>0, Avg([Case Aging]), 0)",
qNumFormat: { qType: 'D', qFmt: 'dd hh:mm' },
},
qSortBy: { qSortByNumeric: -1 },
},
],
},
}
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
