Question

Custom Visualization Rendering issues

  • 19 May 2022
  • 0 replies
  • 29 views

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()
}
});

 


0 replies

Be the first to reply!

Reply