Lollipop Chart How-to

[gwolfe]

Lollipop Chart How-to
(Help needed on script iteration)

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 2 other 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!