Creating a navigation minimap with Enigma.js, Picasso.js and qdt-components

We have created many charts with the Engine API and Picasso.js in the past.

Here is a list of all of them so far


What was missing, was the navigation bar with a minimap of the entire chart. 

Engine API has a cool method, GetHyperCubeReducedData. This returns a reduced set of points based on the zoom factor. If you pass ‘-1’ in the options, the engine will decide for you the depth of the returned data. So if you have one million points of data, the method will still return to you 10000 cells like the hypercube but this time it will be every 100th element.

const qDataPages = await qObject.getHyperCubeReducedData('/qHyperCubeDef', [{ ...qPage }], -1, 'D1');


Then with these reduced dataset, you can use the same picasso method to render the minimap

picasso({ renderer: { prio: ['canvas'] } }).chart({
      element: this.element,
      data: [{
        type: 'q',
        key: 'qHyperCube',
        data: data.qHyperCube,
      settings: this.settings,


Here is the documentation


Even though it is work in progress and is missing some functionality like resize and smooth scrolling, here is a live demo



Happy Coding!!!!



Source link

Bla Bla Bla

We use cookies and other tracking technologies to improve your browsing experience on our website. By browsing our website, you consent to our use of cookies and other tracking technologies.

Read our Privacy Policy