Embedding at a Glance
Embedding allows you to manage your dashboards and widgets directly through your Knowi account and then display the results within your own app or webpage. You might be thinking a simple solution would be to screenshot your chart and paste it in your webpage as a JPEG but doing so you would be sacrificing a variety of features. Embedding allows for the visualization(s) to update automatically in real time as new records are reported in your dataset, this will save you from having to make updates periodically if you were to go the JPEG route. Embedding also allows for drilldowns in your data which allows you to navigate to related visualizations in the same frame at the click of a button. You also have the ability to allow or limit the end user from filtering the data at your discretion. Embedding also allows for your visualization(s) to be interactive for the end user rather than just a static image. As you move your mouse along datapoints, the tooltip will display relevant information about the specific data point, you can click on specific groupings of data to isolate them as seen below.
Embedding Options
iFrame
There are multiple options available when embedding to give you full control over who can interact with your data and how it is presented. The first and simplest method is embedding through iFrame. By going to the share option on a dashboard or visualization you can generate code that can be easily copied and pasted into your webpage HTML or application. This will allow your viewers to see your visualizations or dashboards as if they were viewing it straight from your Knowi account. This option is super easy and requires the least amount of technical skills as your only inputs are the height and width of the iFrame.
Javascript API
If you want more control over functionality and aesthetic you can instead embed with Javascript API to customize the look and feel of the embedded content however you like. Javascript API gives you full control over the output on your web page while Knowi processes all the data on the backend. You have complete control over which elements are visible and which functions are accessible to the end user such as enabling and disabling filters, Ad-hoc analysis, widget settings, etc. The complete Javascript API Reference to customize your embed can be found here and instructions for using the proper HTML script can be found here.
Single Sign-On
In certain instances you may want to embed content that is on a need-to-know basis. Some content might be for certain eyes only, sometimes different people/departments need to see information specific to their roles and responsibilities. This can be accomplished using single sign-on where the data will only be displayed to users who have been authorized. Permissions can also be specific to the user with user filtering. User identity, permissions, access level, and attributes are all constructed within the browser session of the single sign-on user, which is created using a unique customer token. Anyone with access to the customer token may create an SSO user to which that Knowi instance is connected to, as any user, with any permission.
Search Based Analytics
In addition to embedding widgets and dashboards, you can also embed search based analytics. This embeds a search box into your webpage that allows the user to ask questions from a dataset in plain English and results will be produced through natural language processing. You can ask questions such as “What were our total sales” and the query will automatically aggregate the data to count the number of sales recorded in the previous month. You can also ask “Show revenue by quarter for the last 5 years” to query the data and then you can easily turn those results into a nice line chart to visualize it. This type of embedding requires single sign-on in order to protect your queries. To learn more about NLP Search-Based Analytics check out our blog about it here.
Embedding Tutorial from Start to Finish
Now let’s go step by step through a simple use case. You can follow along on your existing Knowi account or if you’re new you can sign up for your free trial at Knowi.com.
Step 1: The first step is connecting to your datasource, for this example we will be connecting to MongoDB Atlas but you can connect to any of your own if you wish. To do so go to the Queries tab on the left hand side then click the orange NEW DATASOURCE+ button in the top right corner. Then select Mongo DB Atlas. The endpoints to connect to Knowi’s Mongo account will already be filled in for you so all you have to do next is hit the save button.
Step 2: Now that we are connected to the datasource the next step is to hit the Start Querying button. Let’s name our first query “Supply Chain Metrics,” then scroll down and select “supply_chain” under Collections. Then for Metrics we will select “assembly_location” and “Order_#” then click on Order_# and select Count for Operation. Now select “assembly_location” for Dimensions/Group by. We should now have a query that shows us the total number of orders for each assembly plant to check your work click Preview at the bottom.
Step 3: Below the query click on the box that says Data Grid and select Donut as your visualization type. Now hit Save & Run Now at the bottom of your screen.
Step 4: Now that you know how to make a query, let’s see if you can make one on your own. For our next query let’s title it “Delayed Shipments”, group by “carrier” and “assembly_location”, and Sum of “shipment_delayed” as a metric, then choose the visualization type as Stacked Column.
Step 5: Add your Supply Chain Metrics widget to your dashboard.
Step 6: Now create a drilldown to Delayed Shipments by going to the widget options in the top right corner of the Supply Chain Metrics widget. Select Drilldowns, in the drilldown builder select widget as the drilldown type and Delayed Shipments for Drill into: and then hit save.
Step 7: Now let’s embed this widget. Go back to the widget options and click share, click to generate a shareable URL and then copy the iFrame code under Embed.
Step 8: Now you can paste that code in any web page or web application, if you do not have one to practice with you can paste it into an HTML editor to see the result.
Now you have a dynamic widget that can be seen by anyone who goes to that page, try filtering it and clicking on the visualization to activate the drilldown. Now that you know how easy it is to embed with Knowi go try it out with your own data!
