Integration of anycharts treemap using looker custom visualization

[piyush-dhasmana]

Hi Team,

I am reaching out to inquire about the process for integrating our custom visualization into Looker. Below are some specific queries for which I am seeking guidance:

1. I am currently utilizing AnyChart treemap and aim to incorporate this chart into our Looker dashboard. Could you please provide the necessary steps to achieve this integration effectively?
2. I am currently managing three distinct files for various purposes:
   • manifest.json: This file defines the visualization metadata and configuration. It includes references to external libraries (such as AnyChart, for example: "Main": "https://cdn.anychart.com/releases/8.12.0/js/anychart-treemap.min.js") and specifies the main HTML file path.
   • manifest.lkml: Specific to Looker's internal development environment.
   • anychart.html: This HTML page contains the code for the visualization.
     Upon reviewing the repository at https://github.com/looker-open-source/custom_visualizations_v2, I noticed that there is no need to create an HTML page. Instead, we can directly pass the JavaScript code, and Looker will handle the rest and looker workspace is also not allowing to save the html file.

Given the above points, could you kindly advise me on the recommended approach to proceed further along with some kind of example that uses external libraries for visualization?

[luka_google]

How are you writing your custom viz code? Will you use a Javascript Framework OR just vanilla Javascript?

In my experience the steps typically follow this:

• Use either a local server or the custom viz builder to prototype integrating a Javascript Charting library with Looker's custom viz API. Mostly the API is used for mapping Looker data to the chart, managing updates when filters data or settings change, and adding this to the DOM.
• If you are developing in a Javascript framework or across multiple files, bundle the code with something like Webpack into a single executable javascript file.
• Save that javascript file to a CDN (like Githack) or a public storage bucket for hosting the javascript file. I find this easier than creating a new lookml project to manage the source code.
• Finally follow these steps to create, upload and save the new custom viz to your Looker instance (https://cloud.google.com/looker/docs/admin-panel-platform-visualizations). To note, if you are managing dependencies with NPM you do not need to fill in the dependencies input in Looker, as they will be bundled in your Javascript file.

The repo you had shared has examples available here which showcase integrating a few different charting libraries like d3 & chartjs.