Sometimes, in a column or bar widget, it is useful to have a measure that gives us additional information but cannot be plotted as a Bar or Column or a Line since the measure is either on a different scale or because it does not make logical sense to plot them together.
For example, let’s take the case plotting #Visits, #Conversion and the Conversion Rate broken by Geographic Region in one widget.
Problem with plotting the Conversation Rate as a Line
Plotting Conversion Rate as a line will not make sense since there is no trend between Conversion Rates in one region vs another. Lines are typically used to represent change or growth over time.
Problem with plotting the Conversation Rate as a Bar/Column
Since we are already plotting #Visits and #Conversion as a bar/column, adding a ratio as a third bar or column does not differentiate the count and the ratio. The counts and the ratio are also plotted on different axes. Representing both of them as a bar/column does not speak to the difference in the type of measure.
Better way to Plot the Conversation Rate
A better way to represent the Conversion Rate would be to plot it as a point for each geographic region. This contrasts the Bar/Column for the #Visits/#Conversions nicely and lets us immediately know which countries have a high or low Conversion Rate.
The following script (Last Tested in v7.0.1.11006) will allow you to hide a line and show just the markers for a series. Setting the lineWidth to zero hide the legend icon. There is additional code to show the legend icon with the same color as the markers.
widget.on('render', function(sender, se){
var s = sender.queryResult.series[2];
// Change series to a line, enable the marker and hide the line
s.type = "line";
s.lineWidth = 0.01;
s.marker = {
enabled: true,
radius: 6
};
// 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';
})
