Create a custom visualization without development skills using Generative AI

[gdemontalivet]

Create a new project (or you can use your existing one if you only need a single custom viz) and create a new project manifest:

Then add the following: 

• id should be unique on your looker instance
• Label is what will show up on the explore as your viz name
• File is the name of the file which includes the code of your custom viz that we will be uploading

project_name: "custom_viz"

visualization: {
id: "my_new_vis"
label: "My new vis"
file: "customvis.js"

}

Now let’s start having fun: using your favorite LLM model, ask it to create the custom viz you want:

I want to create a Looker custom bar charts vis using google charts, can you give me code?

make sure you add the custom api reference in your prompt (either url or text itself depending on what your LLM supports)

The response tells me I need some html:

a custom viz always uses a specific library to render graphs, in this case it is just calling the external library for google charts, we can add the link as a dependency in the manifest:
dependencies: [
"https://www.gstatic.com/charts/loader.js"
]

Then create a new text file on your computer, paste the JS code gemini gives you, and save it as customvis.js”

Then drag and drop the js file you just created in your Looker project:

And push your project to production

Then you should be able to select your new vis:

If nothing shows up, open the chrome developer tools and the javascript console:

You should see an error:

Copy the error to gemini and make sure you ask it to give you the full js file code, so you can quickly copy paste it in Looker:

Then you can paste it directly into your js file on Looker, save and push to prod (ignore the red error which seems to show up)

And here we are:

Now lets ask to remove the title:

Paste the code, push to production and now the title is removed!

Now let's make the viz window adjust to the looker frame:

It’s telling me to use a css file, but we cannot upload it on Looker, so I just ask gemini to embed the css into the js file:

And it works perfect:

And so on…


A few prompts tips:

• make sure to ask for the full code so you can quickly copy paste
• you can paste some sample code frorm a custom viz which has the functionality you need (for example drill down) and ask genAI to do something similar in your vis
• if you don’t see any error and the viz doesn’t work, ask genAI to add logs that you can read from the js console to help you troubleshoot the issue
• you can ask to add options in the option menu to change colors, or customize anything
• genai‘s only input is what you send it, so make sure you paste your raw data so that it understands the structure
• If you want specific Looker functionalities to work, copy paste the code of the Looker viz api which is used for these custom viz in your prompt so that it knows how to write proper code
• some examaples of what I have built
  

Use different LLM models if you are stuck

[sam8]

Way cool. I'll also plug the Chart Config Editor here - the HighCharts LLM is really good at providing JSON from plain english requests, and those can be plugged right into Looker to enhance your visualizations!