Skip to content

Instantly share code, notes, and snippets.

@rjriel

rjriel/main.html

Last active September 18, 2017 21:12
Show Gist options
  • Save rjriel/9f6faa08655c6017c8b6fd9630e5f4a9 to your computer and use it in GitHub Desktop.
Save rjriel/9f6faa08655c6017c8b6fd9630e5f4a9 to your computer and use it in GitHub Desktop.
Download ZIP
Functions for API Training
Raw
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="https://playground.qlik.com/playground/resources/autogenerated/qlik-styles.css">
</head>
<body>
<script type="text/javascript" src="https://playground.qlik.com/playground/resources/assets/external/requirejs/require.js"></script>
<script type="text/javascript" src="/node_modules/playground-js-api/dist/playground-js-api.min.js"></script>
<script type="text/javascript" src="/resources/script.js"></script>
<script type="text/javascript">
main();
</script>
<style>
.chart {
height: 50%;
width: 100%;
margin-top: 50px;
}
</style>
<button onclick="clearState()">Clear Selections</button>
<button onclick="clearState(alteredState)">Clear Second Selections</button>
<select id="classesSelection" onchange="selectField()">
</select>
<div id="firstChart" class="chart">
</div>
<div id="secondChart" class="chart"></div>
</body>
</html>
Raw
script.js
// Input your config
var config = { }
var app
var alteredState = "SecondState"
var selectionField = "Recorded Class"
function authenticate() {
Playground.authenticate(config)
}
function main() {
require.config({
baseUrl: (config.isSecure ? "https://" : "http://") + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
})
/**
* Load the entry point for the Capabilities API family
* See full documention: http://help.qlik.com/en-US/sense-developer/Subsystems/APIs/Content/MashupAPI/qlik-interface-interface.htm
*/
// @ts-ignore
require(['js/qlik'], function (qlik) {
// We're now connected
// Suppress Qlik error dialogs and handle errors how you like.
qlik.setOnError(function (error) {
console.log(error)
})
// Open a dataset on the server.
console.log("Connecting to appname: " + config.appname)
app = qlik.openApp(config.appname, config)
console.log(app)
// createBarChart() // Create a bar chart in the normal state
// createBasicHyperCube() // Create a one dimensional hypercube
// createMultiDimensionalHyperCube() // Create a HyperCube with multiple dimensions
// getFieldData() // Get The Data For A Field
// addAlternateState() // add a new state
// createBarChartDifferentState() // Create a bar chart in a state separate from the normal state
// createHyperCubeDifferentState() // Create a Hypercube in a state separate from the normal state
})
}
function addAlternateState() {
app.addAlternateState(alteredState)
console.log("State Added:", alteredState)
}
function clearState(state) {
state = state || "$"
app.clearAll(false, state)
if(state === "$") {
document.getElementById("classesSelection").value = ""
}
console.log("State Cleared:", state)
}
function createBarChart() {
var barChartColumns = [
{ qDef: { qFieldDefs: ["Decade"], qSortCriterias: [{ qSortByNumeric: 1 }] } },
"=Count(id)"
]
app.visualization.create('barchart', barChartColumns).then(function (bar) {
bar.show('firstChart')
})
}
function createBarChartDifferentState() {
var barChartColumns = [
{ qDef: { qFieldDefs: ["Decade"], qSortCriterias: [{ qSortByNumeric: 1 }] } },
"=Count(id)"
]
app.visualization.create('barchart', barChartColumns, { qHyperCubeDef: { qStateName: alteredState } }).then(function (bar) {
bar.show('secondChart')
})
}
function createBasicHyperCube() {
var hyperCubeDef = {
qDimensions: [
{ qDef: { qFieldDefs: ["Decade"], qSortCriterias: [{ qSortByNumeric: 1 }] } }
],
qMeasures: [
{ qDef: { qDef: "=Count(id)" } }
],
qInitialDataFetch: [{
qTop: 0,
qLeft: 0,
qHeight: 3333,
qWidth: 3
}]
}
app.createCube(hyperCubeDef, function (hypercube) {
console.log("Basic Hypercube", hypercube.qHyperCube.qDataPages[0])
})
}
function createMultiDimensionalHyperCube() {
var hyperCubeDef = {
qDimensions: [
{ qDef: { qFieldDefs: ["Decade"], qSortCriterias: [{ qSortByNumeric: 1 }] } },
{ qDef: { qFieldDefs: ["Fall Status"] } }
],
qMeasures: [
{ qDef: { qDef: "=Count(id)" } }
],
qInitialDataFetch: [{
qTop: 0,
qLeft: 0,
qHeight: 3333,
qWidth: 3
}]
}
app.createCube(hyperCubeDef, function (hypercube) {
console.log("Multi-Dimensional Hypercube", hypercube.qHyperCube.qDataPages[0])
})
}
function createHyperCubeDifferentState() {
var hyperCubeDef = {
qStateName: alteredState,
qDimensions: [
{ qDef: { qFieldDefs: ["Decade"], qSortCriterias: [{ qSortByNumeric: 1 }] } }
],
qMeasures: [
{ qDef: { qDef: "=Count(id)" } }
],
qInitialDataFetch: [{
qTop: 0,
qLeft: 0,
qHeight: 600,
qWidth: 2
}]
}
app.createCube(hyperCubeDef, function (hypercube) {
console.log("Hypercube for", alteredState, hypercube.qHyperCube.qDataPages[0])
})
}
function selectField() {
var select = document.getElementById("classesSelection")
if(select.value !== "") {
app.field(selectionField).selectValues([select.value], false, true)
}
}
function getFieldData() {
var myField = app.field(selectionField);
var listener = function () {
console.log("Data for Field:", myField)
var select = document.getElementById("classesSelection")
select.appendChild(createOption("","--Select--"))
myField.rows.forEach(function (row) {
select.appendChild(createOption(row.qText))
});
myField.OnData.unbind(listener)
}
myField.OnData.bind(listener)
myField.getData()
}
function createOption(value, text) {
var option = document.createElement("option")
var name = document.createTextNode(text || value)
option.setAttribute("value", value)
option.appendChild(name)
return option
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment