Lollipop chart how-to

Years ago I was looking for help creating a Lollipop chart and found it on this post which works great when you can take advantage of a "break-by". However, this isn't always the case. We have devised a workaround and I wanted to share that here.

To create this chart, we combined a stacked bar chart with 4 values. We decreased the bar width of 2 values and then converted the other 2 values to dots.

Here is how the widget is set up. On Metric 1 Bar, we subtracted Metric 2 Bar from the amount since these are stacked. This allows the dots and bars to match up.

Here is the script (and where I need help).

widget.on('render', function(sender, se){
    var seriesArray = [0, 2];

    seriesArray.forEach(function(index) {
        var s = sender.queryResult.series[index];
        
        // Change series to a line, enable the marker and hide the line
        s.type = "line";
        s.lineWidth = 0.01;
        s.marker = {
            enabled: true,
            radius: 10
        };
        
        // When hovered state to disabled and lineWidth to 0
        sender.queryResult.plotOptions.series.states.hover.lineWidth = 0;
        sender.queryResult.plotOptions.series.states.hover.lineWidthPlus = 0;
        // Change the hover fillColor
        sender.queryResult.plotOptions.series.marker.states.hover.fillColor = 'white';
    });
});


widget.on('processresult',function(se,ev){
	ev.result.plotOptions.series.pointWidth = 10 //width of bar
});

Right now I have hard-coded the dot radius in the first block and hard-coded the bar width in the second block. I would like these to be dynamic based on how many category values there are. It is something that counts the number of rows and then uses that as a multiplier so that when there are a bunch of rows the dots aren't overlapping.

Let me know if you have any questions!

Garrett Wolfe

Posted 1 year ago·Last reply 1 year ago

1 comment

RAPID BI Support

·1 year ago

Hi gwolfe

I know you can set point radius on the line chart by data point, but i'm not sure that this is true with the bar width, as this is set on a per series level.

The following widget script is for a line series (assuming series 0) and changes radius of the marker based on the value of the data point:

widget.on('processresult', (w, args) => {
	let l = args.result.series[0].data.length
	for (let i = 0; i < l; i++) {
		let datum = args.result.series[0].data[i]
		if (datum.y === undefined) { continue }
		datum.marker.radius = datum.y
	}
})

Resulting in:

If you do discover more on the barwidth by datapoint, i'd love to hear more.

Let me know how you go?

Thanks,

Daniel

RAPID BI

daniel.ranisavljevic@rapidbi.com.au

RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons