Nebula.js and its ecosystem with extensions is growing and is growing fast. In the past, I have covered some of the available charts like bar-chart, funnel-chart, line-chart, mekko-chart, pie-chart, sankey-chart and a simple table.Today I will go over some of the latest editions, a simple Filter, based on a field, a KPI object and a Combo chart.Let's start with the Nebula.js configuration and the connection to our Qlik Sense server.The code is in observablehq, for framework specific, check links at the end of this blog post.nebula = require("@nebula.js/stardust") n = { const { embed } = nebula; const config = { host: 'qlik-sense.your-server.com', appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’, } const enigmaApp = await enigma .create({ schema, url: `wss://${config.host}/app/${config.appId}`, }) .open(); const app = await enigmaApp.openDoc(config.appId); const n = await embed(app, { context: { theme: 'light', language: 'en-US', constraints: { active: false, passive: false, select: false, }, }, types: [ // We will add the charts later on ], }); return n; }Ok we have Nebula.js configured and a Websocket connection to the engine.We start with a simple Filter. All you have to do is get the Field Name from Qlik Sense and then add the following code into your js page. All of these examples are using the default Helpdesk app.const field = await n.field('Case Owner Group'); field.mount(filterElement, { title: 'Department' } );And here is the rendered objectFilterLive example: https://observablehq.com/@yianni-ververis/nebula-js-filterOk, we’ve got the simple filter, lets see how to get a KPI object.In the previous example add the sn-kpi and then render itnebula = require("@nebula.js/stardust") kpi = require("@nebula.js/sn-kpi") … types: [ { name: 'kpi', load: () => Promise.resolve(kpi), } ], … n.render({ element: kpiElement1, type: 'kpi', fields: ["=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )"], });This is what we getKPILive Example: https://observablehq.com/@yianni-ververis/nebula-js-kpi?collection=@yianni-ververis/nebulaThat was easy, right?Now let’s get into a more complicated one, the Combo Chart.In the previous example add the sn-combo-chart and then render it but with a hyperCube this time so we have more fine control over the labels, type bar/line etc.nebula = require("@nebula.js/stardust") comboChart = require("@nebula.js/sn-combo-chart") … types: [ { name: 'comboChart', load: () => Promise.resolve(comboChart), } ], … n.render({ element: chartElement, type: 'comboChart', properties: { qHyperCubeDef: { qDimensions: [ { qDef: { qFieldDefs: ['Date.autoCalendar.Date'], qFieldLabels: ['Date'] }, qNullSuppression: true, }, ], qMeasures: [ { qDef: { qDef: 'Sum([Number of New Cases])', series: { type: "bar", axis: 0 }, qLabel: 'New Cases', // autoSort: false }, qSortBy: { qSortByNumeric: -1 }, }, { qDef: { qDef: 'Sum([Number of Closed Cases])', series: { type: "line", axis: 1 }, qLabel: 'Closed Cases', }, qSortBy: { qSortByNumeric: -1 }, }, ], qInitialDataFetch: [{ qWidth: 3, qHeight: 1000 }], qAlwaysFullyExpanded: true, qSuppressMissing: true, qSuppressZero: true, }, scrollStartPos: 1, showTitles: true, title: 'Combo-chart', subtitle: 'Sample supernova combochart', footnote: 'Sample supernova combochart', }, });And this is the rendered objectCombo chartSo, what if we want to change this to a stacked bar chart and the x-axis labels underneath? We specify the "type" to be "bar" on the second measure and the "dock" to "near"... series: { type: "bar", axis: 1 }, ... dock: 'near', ...and we should see thisStacked barchartLive example: https://observablehq.com/@yianni-ververis/nebula-js-combo-chart?collection=@yianni-ververis/nebulaThat's it for today! Make sure you check out my previous articles with different framework implementations and some visualizationshttps://community.qlik.com/t5/Qlik-Design-Blog/Using-Nebula-js-with-React-js-or-in-Simple-html-pages/ba-p/1744410https://community.qlik.com/t5/Qlik-Design-Blog/Using-Nebula-js-with-Angular-or-Svelte/ba-p/1764361https://community.qlik.com/t5/Qlik-Design-Blog/Sn-table-Nebula-js-latest-extension/ba-p/1780153Described extensions in the above blogs with live examplesSelectionsSelectionsBarcharthttps://observablehq.com/@yianni-ververis/nebula-js-barchart?collection=@yianni-ververis/nebulaFunnel charthttps://observablehq.com/@yianni-ververis/nebula-js-funnel-chart?collection=@yianni-ververis/nebulaLine charthttps://observablehq.com/@yianni-ververis/nebula-js-line-chart?collection=@yianni-ververis/nebulaMekko charthttps://observablehq.com/@yianni-ververis/nebula-js-mekko-chart?collection=@yianni-ververis/nebulaPie charthttps://observablehq.com/@yianni-ververis/nebula-js-pie-chart?collection=@yianni-ververis/nebulaSankey Charthttps://observablehq.com/@yianni-ververis/nebula-js-sankey-chart?collection=@yianni-ververis/nebulaTablehttps://observablehq.com/@yianni-ververis/nebula-js-table?collection=@yianni-ververis/nebulaSpecific Framework templates:React:https://github.com/yianni-ververis/nebula-reactAngular:https://github.com/yianni-ververis/nebula-angularSvelte:https://github.com/yianni-ververis/nebula-svelteComing up, Grid chart and Bullet chart./Yianni ...View More

In my last post, I discussed the robust capabilities of Qlik Sense(QS) APIs to build out-of-the-box visual metaphors and ways to integrate them within Qlik’s ecosystem. A natural choice for developers while building QS extensions throughout the years has been the Extension APIprimarily using vanilla JavaScript, jQuery and AngularJS.The Extension API consists of methods and properties used to create custom visualization extensions.Enter… Qlik Sense’s Open Source Solution — Nebula.js!Nebula.js is a collection of product and framework agnostic JavaScript libraries and APIs that helps developers integrate visualizations and mashups on top of the Qlik Associative Engine in QS Desktop, QS Enterprise on Windows, and SaaS editions of Qlik Sense. This tutorial specifically applies to the QS SaaS edition. Nebula.js offers developers an alternative to the 'Capability APIs' that have historically been used to create mashups. The tutorial will focus on developing a new visualization based on a user scenario using Nebula.js and the 3rd-party visualization library D3.js. Our target is to understand how we can leverage Nebula.js to build a QS extension object and bring in out-of-the-box visualization capabilities within the SaaS platform. This tutorial does not emphasize the D3.js programming part, but the motivation behind the visualization is discussed.User scenario: An organization using Qlik Sense has a new requirement to develop a visual representation to understand high-dimensional mutlivariate dataset for their organization. Their dataset consists of numerical values, and they want to compare multiple features together to analyze the relationships between them. Based on these requirements, their Data Visualization Engineer presents to them the ‘Parallel Coordinate plot’.So, what is a Parallel coordinate plot?Parallel coordinate plots (PCP) have proved to be efficient in effectively visualizing high-dimensional multivariate datasets. In a parallel coordinate, each feature is represented as vertical bars and the values are plotted as a series of lines connected across each axis. Their advantage is that the vertical bars(features) can have their own scale, as each feature works off a different unit of measurement. PCP provides insights into specific hidden patterns in data like similarities, clusters, etc., and allows for more straightforward comparative analysis.Based on the requirements, lets get started with building a QS extension using Nebula.js.Prerequisites:Node.js(version 10 or newer)A terminal(for example, Git Bash on Windows or Terminal on Mac)An IDE of your choice, for example, VS Code.An existing web integration, or possibility to get one created in your tenant(this specifically applies to QS SaaS edition).A Qlik Sense app with data.Step1: Use nebula.js CLI to import the necessary packages. The command scaffolds a project into the /hello folder with the following structure:/srcindex.js - Main entry point of this visualizationobject-properties.js - Object properties stored in the appdata.js - Data configuration/test - Integration testspackage.jsonCommand:npx @nebula.js/cli create hello --picasso noneStep 2: Start the development server by running:cd hellonpm run startThe command starts a local development server and opens up http://localhost:8080 in your browser. The benefit of having the dev server with Nebula.js is that it provides an interactive way to test and edit your extension without the need to iteratively deploy in QS every time a new change is made.Step 3: Configure the data structure.Visualizations in QS are based on a hypercube definition(qHyperCubeDef ). Therefore, any new visual object we want to bring into the QS ecosystem needs to have the data structure defined. With Nebula.js, we have the object-properties.js file that allows defining the structure of our object.const properties = { showTitles: true, qHyperCubeDef: { qInitialDataFetch: [{ qWidth: 30, qHeight: 200 }], } }We also need to set a data target in the data.js file so we refer to the right hypercube definition(important to note in case you have multiple qHyperCubeDef objects).export default { targets: [ { path:'/qHyperCubeDef', } ], };Step 4: Developing the visualization extension using Nebula.js and D3.js.QS Nebula.js specific code:Now that we have everything ready, we start developing our extension with the custom visualization object using the index.js file from our project.Note that Nebula.js and its primary package @nebula.js/stardust is built on the concept of custom hooks. This might sound familiar to people working with React.js. Hooks is a concept that emphasizes reusable, composable functions rather than classical object-oriented classes and inheritance. The primary hooks that we are dependent on for developing our extension object are described below:The method that helps us in rendering our visualization object is the component()function. The component() function is executed every time something related to the object rendering changes, for example, theme, data model, data selections, component state, etc. This function can be compared to the paint() function in the Extension API.To render our data, we first need to access the layout through the useLayout hook and then use it in combination with the useEffect hook. The hypercube’s qDataPages[0].qMatrix contains all the data(dimension and measures) used in the QS environment, and we will need to pass this data to our D3.js-based visualization.component() { const element = useElement(); const layout = useLayout(); useEffect(() => { var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix; } }To see the data values and understand the structure of the qHyperCube, it is always a good idea to do a console.log(layout). A snippet shows values specific to our use case. Every time a new dimension or measure is added to our extension object, qDataPages[0].qMatrix is updated with those values.The required dimension values for our chart are then extracted from the hypercube using the qText property from qDataPages[0].qMatrix like below.var data = qMatrix.map(function (d) { return { PetalLength: d[0].qText, PetalWidth: d[1].qText, SepalLength: d[2].qText, SepalWidth: d[3].qText, Species: d[4].qText, }; });Our next step is to define the width and height of the visualization object, and capture its id. We will use this id to bind it to our element object from the useLayout hook as shown below:var width = 1000; var height = 400; var id = "container_" + layout.qInfo.qId; const elem_new = `<div id=${id}></div>`; element.innerHTML = elem_new;Finally, we make a call to the D3.js function from within the useEffect hook.viz(data, width, height, id);D3.js specific code:The viz() function contains all of our D3.js code that allows us to draw a Parallel coordinate plot. First, we would need to append the SVG to the <div> that contains the id of our QS object, like below.var svg = d3 .select("#" + id) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr( "transform", "translate(" + margin.left + "," + margin.top + ")" );We then get all of the dimensions except Species to build our x and y axes.var dimensions = Object.keys(data[0]).filter(function (d) { return d != "Species"; }); var y = {}; for (var i in dimensions) { var name_new = dimensions[i]; y[name_new] = d3.scaleLinear().domain([0, 8]).range([height, 0]); } var x = d3.scalePoint().range([0, width]).domain(dimensions);To draw the lines for our Parallel coordinate plot, we will need to build the path function that would take a row from our qHyperCube and return the x and y coordinates of the line.function path(d) { return d3.line()( dimensions.map(function (p) { return [x(p), y[p](d[p])]; }) ); }And finally, we bind everything with our SVG like below:svg .selectAll("myPath") .data(data) .enter() .append("path") .attr("class", function (d) { return "line " + d.Species; }) .attr("d", path) .style("fill", "none") .style("stroke", function (d) { return color(d.Species); }) .style("opacity", 0.5);Step 5: Deploying the extension.To build our project, we use the below command below to generates all QS readable files and puts them in a folder /hello-ext. This folder can then be compressed(.zip) and uploaded to the Extension section of SaaS console to be used within the QS environment.npm run senseDashboard:If you are just getting started with Nebula.js, https://qlik.dev is a great place to review the basics and drill-down on related functions.This project’s source code is made available at: https://github.com/dipankarqlik/Nebula ...View More

Say goodbye to capability API.

...View More

For many companies, the full cloud promise is still a work in progress. Many systems are still generating local data, business units or departments have on-premises legacy data that cannot be left behind. With Qlik DataTransfer you can securely push your on-prem data and local files into the cloud.What is Qlik DataTransfer?Qlik DataTransfer is a simple (and free) app that brings on-prem data to the Qlik Sense. It will let you securely upload multiple on-premises data such as, Qlik apps (QVF and QVW), data files (XLS, CSV, TXT, and QVD) stored in folders in a file system, and any data stored in on-prem DBMS and so. The new data will be available for use under DataFile space in the Qlik Sense tenant or your preference.Data Connections.Inspect and selectQlik DataTransfer lets you look into the existing tables from your on-premises data sources using a familiar and easy-to-use UI. It allows you to select the fields that contain the data you want to transfer to the desired space in Qlik Sense on a set schedule.At the time of writing this post, the supported data storage systems are:Amazon Redshift, Apache Drill, Apache Hive, Apache Phoenix, Apache Spark, Azure SQL, Cloudera Impala, MS SQL Server, MongoDB, MySQL, Oracle, PostgreSQL, Presto, Snowflake, Teradata, REST, and ODBC.Note: You can add Qlik Connectors, for example SAP NetWeaver, to expand the available data connections in Qlik DataTransferWatch a FolderFor those of us that have valuable data on the file system stored in files, Qlik DataTransfer offers the ability to watch a folder for new or updated files, and as the files come in or change, it will automatically make the files available in Qlik Sense SaaS.Additionally, users can select the app(s) they want to be reloaded when new data comes in. So, if there's new data in a folder somewhere in one of your company's darkest on-premise server, then not only the new data will be pushed to Qlik Sense, but any app using that data could automatically be reloaded. Fresh data guaranteed.Qlik DataTransfer will look for data files in the folder on the file system with the following formats XLS, CSV, TXT, and QVDReload = transform + combineQlik DataTransfer includes the Qlik Engine, that means that it is capable of reloading a Qlik Sense app, so picture this.You could normally create a Qlik Sense app with the tool of your choice, or a QlikView app for that matter. You could pull data from multiple data sources. You could create really intricate data transformations and data normalizationprocesses in your app. You could work with Qlik visual data prep and/or with Qlik scripting, just as you do on a regular basis when creating Qlik apps.This time, though, your app won't need any sheets or visualizations. Your app will be used by Qlik DataTransfer to automatically generate and push QVDs to the cloud.Refresh data on a set scheduleQlik DataTransfer offers data upload on a set schedule for Qlik apps and for Data Connections, your data will update whenever you need it. Remember that the Data folders will be monitored for changes, so no need to schedule anything.Additional resources:Check out the Qlik DataTransfer quick demo by@Michael_TaralloProduct PageHelp PageI hope you enjoy Qlik DataTransfer.Arturo ...View More

In today's blog....as promised, Qlik Solution ArchitectTomilayo Komolafe (Tomi) is back providing real in-the-trenches solutions to real customer problems. ( If you missed Tomi's introduction to the Qlik Design Blog and our last post / video, you can visit this link -Contact Tracing with Qlik Sense SaaS - and Active Intelligence Solution.)When working with a Qlik customer, Tomi stumbled upon a particular problem of not being able to iterate over, or loop through, file data stored in a cloud-based platform. Tomi recorded a video of the particular solution, which I embedded below along with some sample data and a sample Qlik Sense App.(attached below) - I would like to mention that Tomi borrowed some Qlik script for this solution from Qlik MVP and Luminary@stevedarkof Quick Intelligence fame. I would like to also thank Steve for his valuable contributions, not only to help make this solution easy and possible but also for all the help he provides to our Qlik Community members (reference material links below).👍 - Thanks Steve and Tomi for demonstrating teamwork for results a Qlik core value to help our customers.Before we get started - a word from our sponsor😁Don't forget to sign up for our next Do More with Qlik - next week 4/8@ 2PM - where Jeff Goldberg and I will cover Qlik Sense SaaS and our new Webhooks integration.Register here:The ProblemThe problem was observed when recently working with a customer who needed to bring in 800+ csv files stored in his company’s OneDrive shared folder location into Qlik. If the files were stored in his local directory, he could use Qlik’s wildcard character to ingest many of these files. Something as simple as “*.csv” for example would have returned all files that are CSVs in his lib file path. Unfortunately, many of these cloud vendor options such as Google Drive, OneDrive, Dropbox, etc, don’t allow for use of special characters in their environment. Obviously, he would’ve needed to load all 800 CSV files individually right? 😉Luckily, there’s a solution that automates this process in Qlik and still provides enough flexibility for the end user. Watch this video to learn how and note the links and reference materials below - including sample solution and data attached.Can't see the video? YouTube blocked by your region or organization? Download LoopFiles.zip for a copy of the .mp4 file that you can download and watch on your computer or mobile device.Reference: (Steve Dark solutions)How to load multiple Excel Files from OneDrive FolderLooping through cloud files - other vendorsFiles:sample_data_and_app.zipExtract .xls files to cloud-based storage location of your choice (OneDrive in this example)Import .QVF fileAdd / Edit Metadata / cloud data source connections appropriatelyQlik Help:One Drive Connector ...View More

The NCAA Men's basketball tournament is a phenomenon in the United States. Each year millions of people complete tournament brackets to show off their knowledge of college basketball (and to win a little money). Don't go at it alone. Let Qlik Sense and the Bracket Mania app give you the inside scoop on any tournament match-up. 

...View More

Let’s take a look at how the visualization lifecycles (creating/updating/destroying visualizations) in the Visualization API and nebula.js currently compare to each other.

...View More

Hey guys - we started a new series of succinct videos to keep you up to date on what's new in Qlik Sense SaaS on a weekly basis.Subscribe to the new YouTube Qlik Sense SaaS in 60 Playlistandstay informed as it happens.This week we introduce our new Databricks connector and the ability to Binary Load Qlik Sense apps directly from Personal and Shared spaces using their APP ID:Can't see the video? YouTube blocked by your region or organization? Download the attached .mp4 to watch on your computer or mobile device.Note:The BINARY statement must be the first statement at the top of the script in the Qlik Sense App. If you have access to the app (personal / shared space) - it will automatically find the app it needs. There isn't a need to specify the specific space location. Simply us the Binary statement and the APP ID.BINARY [APP ID]Example: -BINARY [a5df6cd3-71ce-411be-9368-5236cca78729]The APP ID can be found in the URL of the browser when accessing the app you want to use for binary loading.Transcript:Hey guys this is Mike Tarallo with Qlik and welcome to SaaS in 60. This week we have added a new connector for Databricks and the ability to perform binary loading of Qlik Sense apps that reside in Shared and Personal Spaces. To support the growing popularity of Databricks, a Qlik strategic partner, Qlik Sense now includes a pre-configured connector for Databricks, including the new Spark 3.0 engine. Utilizing the Databricks SQL Analytics service, the Databricks connector enables Qlik Sense users to easily include data from Databricks to gain a comprehensive view of their business as well as generate new insights and data-driven actions. Binary loading is the process of loading a data model directly from a Qlik Sense app instead of a traditional data connector. You can now easily reuse data models from Qlik Sense apps that reside in personal and shared spaces. Note the source and target app must be in the same space. This is in addition to the existing capability to binary load from third party file share such as S3 or Google Drive....and that is your SaaS in 60. ...View More

In this detailed demonstration video, you will see how Qlik Sense SaaS, offers a true Active Intelligence solution to contact tracing. (Active Intelligence is a new paradigm, creating in-the-moment awareness about every aspect of your business. It delivers a state of continuous intelligence from real-time, up-to-date information designed to trigger immediate actions.)

...View More

Let's face it - it usually takes a bit longer for features and capabilities of any product to gain traction in an organization. We released On Demand App Generation in 2018 with our Qlik Sense client-managed edition. Frankly I don't have much insight into whom has or has not implemented it. BUT, I can tell you from those that I have spoken with over the years, many were surprised to even see this awesome feature in the product when I brought it up.However, in older versions, in order to enable it - there were a number of requirements which involved copying data load script along with inserting bindings and variables - which at first glance could be perceived as cumbersome. Even the first time I worked with it, I was a bit overwhelmed. This was true for others as well, so much so, that some Qlik enthusiast even developed web app add-ons and extensions to simplify the process and generate the template for you.BUT....... since the release of ODAG, just like anything else, it has evolved and is now extremely simple to enable and implement. I show you this process in my latest Do More with Qlik(archive link below) session and summarize the ODAG concept in the latest Qlik Sense in 60 video embedded in this post - so please be sure to check them out. Let me know what you think in the comments below. Stay tuned to my next post where I build on what we learned about ODAG to introduce you to Dynamic Views!On Demand App Generation - (ODAG - concept)In summary, ODAG was originally developed to meet the need of analysis of very large data sets. The concept is quite simple:One Qlik Sense app displays summarized data with filters from the big data source.You select the filter values and reduce your answer set to meet a defined row count constraint.You click the app navigation link along the bottom to open the ODAG panelYou click a button and a new more detailed app, dynamically built from a template, is generated directly from the source data with applied filters and defined metrics at a much more detailed level. That's it!ODAG Requirements SummarizedQlik Sense base app (contains summarized measures as KPIS and desired dimension values as filters)Summarized dataApp Navigation link - linked to 2nd Qlik Sense template appDefined row count constraintApp retention settingQlik Sense template app (contains detail KPIs and detailed analysis metrics)Activation script with binding syntaxWHERE conditions with odag_ binding variables added to queryQlik Sense in 60 - On Demand App Generation (video)(Video transcript attached)Help Topicshttps://help.qlik.com/en-US/sense/February2021/Subsystems/Hub/Content/Sense_Hub/LoadData/using-OnDemand-apps.htmSource data:https://www1.nyc.gov/site/tlc/about/tlc-trip-record-data.pageSample Apps attached -ODAG - Apps - Taxi Trips.zip - (Note you need to add your data connection and access SQL etc to your data sources)Do More Archive - On Demand App Generation session:https://go.qlik.com/Do_More_with_Qlik_Webinar_Series_Target_Registration-LP.html?sourceID1=mtoComm224Sign up for the next Do More with Qlik session:https://go.qlik.com/Do-More-with-Qlik-Webinar-Series.html?sourceID1=mtoComm0224Can't see the video? YouTube blocked by your region or organization? Download the .mp4 attached in this post to view this on your computer or mobile device. ...View More