Embedding with Javascript API

Use the Knowi JavaScript API to integrate Knowi visualizations into your own web applications. The Javascript API provides better functionality to match the intended look and feel for your end-users.

Some of the things that you can do with the JavaScript API:

• Display visualizations from Knowi's cloud or On-Premise installation in web pages.
• Dynamically load and resize visualizations.
• Control functionality of embedded elements with personalized branding
• Filter the data displayed in visualizations with HTML controls on the page.
• Enable self-service analytics on embedded views
• Export visualizations to an image or PDF file.

Getting Started:

1. Create a web page and include the Knowi JavaScript API file in your HTML script tag

<script src="https://www.knowi.com/minify/knowi-api.min.js"></script>

2. Create a div element in the page body where you want to insert the Knowi visualization:

<div id="knowi-div"></div>

3. Write a function in a Javascript file or script tag to display the visualization:

function loadChart() {
    Knowi.render('#knowi-div', {
        type: 'share',
        dashboard: 'BYhXXCeu0Ego8zA1FqtLOOM4BDWot5AYBLI7PWrQTbsie',
        url: "https://www.knowi.com/",
        view: {
            title: true,
            header: true
        }
    }, function () {
    });
}

Note: The complete Javascript API Reference to customize your embed is here.

4. Call the function when the page is done loading:

loadChart();

The full code sample from the above example can be found here.

Javascript API Resources:

• Javascript API samples created and maintained by Knowi | link
• Javascript API reference | link
• Working demo with Covid-19 dashboards | link