Graphic Visualizations - Something like a tachometer/speedometer/traffic light?

App Building
1

Hi Guys,
Wanted to ask what would be the easiest way to create some cool graphics that update based on the status of our call center (don't worry, we're 100% inbound :wink: )

I've got Retool displaying metrics of the call center queue and individual performance, but would like to add an easy to read gauge that shows how 'full' the call queue is. I'm guessing retool doesn't have a graphic feature that would allow something like a fuel gauge or speedometer that might show something like 'slow', 'calls backing up', 'calls overflowing' or something like that? Something that could also make the tab or title for our retool page flash in the browser might also work well.

If retool doesn't offer something like that - is there a javascript library you guys would recommend?

Thanks for any ideas.

2

There's a bunch of chart types in Plotly that you could look at, e.g.

1 Like
3

@dcartlidge Hey Dave, think I'm finally getting somewhere! It looks like this js query i made works, but I wasn't sure if this was the best way to reference the value property in my data object:

var data = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: KPIs.data.trunk_calls_on_hold[0], <<<<<<
    title: { text: "Calls On Hold" },
    type: "indicator",
    mode: "gauge+number",
    delta: { reference: 300 },
    gauge: { axis: { range: [null, 10] } }
  }
];

var layout = { width: 600, height: 400 };
return {data, layout};
4

I'm guessing the hard-coded indexing w [0] is bugging you? I know it gets me every now and then. If it's always of length 0, I'd suggest a transformer on the KPIs query to return the obj instead of the array w 1 obj:

let newData = data;
newData.trunk_calls_on_hold = data.trunk_calls_on_hold[0];
return newData;

now you don't have to mess w that pesky random 0 index that might confuse you later on down the road

1 Like