Custom Visualization Rendering issues

mason_taylor-16 · 05-19-2022 11:31 AM

I’m trying to convert the funnelarea plot here for use in Looker.

When I use this JS, I am able to render the “Ready to render!” text, but I can’t seem to get the funnel plot to actually render. For now, I’m not even trying to pass data through, I’m sure I can figure that out easily enough. But I’m just testing to get the visuals displayed with static data for now.

Does anyone have any suggestions?

looker.plugins.visualizations.add({
    id: "blank_funnel",
    label: "Blank Funnel",
    options: {
      font_size: {
        type: "string",
        label: "Font Size",
        values: [
          {"Large": "large"},
          {"Small": "small"}
        ],
        display: "radio",
        default: "large"
      }
    },

	create: function(element, config){
		element.innerHTML = `<h1>Ready to render!</h1>`;
	},
	updateAsync: function(data, element, config, queryResponse, details, doneRendering){
		var html = `        
            <head>
                <!-- Load plotly.js into the DOM -->
                <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
            </head>
            <body>
	            <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
            </body>`;

        var gd = element.innerHTML.document.getElementById('myDiv');
        var df = [{type: 'funnelarea', values: [5, 4, 3, 2, 1], text: ["The 1st", "The 2nd", "The 3rd", "The 4th", "The 5th"],
        marker: {colors: ["59D4E8", "DDB6C6", "A696C8", "67EACA", "94D2E6"],
                line: {color: ["3E4E88", "606470", "3E4E88", "606470", "3E4E88"], width: [2, 1, 5, 0, 3]}},
        textfont: {family: "Old Standard TT", size: 13, color: "black"}, opacity: 0.65}];

        var layout = {margin: {l: 200 , r: 200}, funnelmode: "stack", showlegend: 'True'}

        html += Plotly.newPlot(element.innerHTML, df, layout);

		element.innerHTML = html;
		doneRendering()
	}
});