Format top/bottom datapoint

#1

Hi


I want to format the highest and lowest point in a series on a line chart. So the highest point will have a green up arrow and the lowest a red down arrow. This was built in to Dundas Dashboard.


Is this a simple thing in BI, or do I need to do a script to manually check all the values etc.


Thanks

#2

This is relatively simple in Dundas BI, and doesn’t require a script. Follow the example below to show format the top and bottom data points as arrows:


  • Create two Formula measures using the Top and Bottom Formulas from the Subset Functions (for example, TOP($OrderQty$))

The newly created columns will be displayed as straight lines with the Top and Bottom values.


Image title



  • Make these two series invisible by unchecking the Visible property in the series’ Main tab,


Image title



  • On the chart’s properties panel, open the Look tab of the main series and click on States. Create a ‘State’ Group and then add states for the Top and Bottom conditions, as shown below:


Image title



  • In the properties panel of the main series, select one of the states under State Styles on the Look tab and apply the following settings. Repeat for the other state.
  • Delete Fill color
  • Check Show Markers
  • Select a Marker Fill


Image title


  • Set Marker Shape as Arrow Up/Down
  • Set Marker Width and Marker Height in pixels. For example, Height=30 and Width=15


Image title



  • The result will look like this:

Image title



#3

Thanks Azar - that's what I needed.

#4

I now have a load of charts each with multiple measures. I can't be bothered to set up formulas and states for each and every measure so came up with this script to go on chart data change.


Might be of some use to someone. (Is there any way to paste in preformatted code here?)


this.control.series.forEach(function(ds){
//get points
var points = ds.getPoints();

//get max & min
var max = Math.max.apply(Math, points.map(function (i){ return i.yValues[0];}));
var min = Math.min.apply(Math, points.map(function (i){return i.yValues[0];}));

points.forEach(function (dp)
{
if (dp.yValues[0] === min)
{
dp.markerShape = dundas.controls.MarkerShape.TRIANGLEDOWN;
dp.markerWidth = 20;
dp.markerHeight = 20;
dp.markerFill = new dundas.controls.SolidColorBrush("#FFFD7777");
dp.markerStroke = dp.series.fill;
}
else if (dp.yValues[0] === max)
{
dp.markerShape = dundas.controls.MarkerShape.TRIANGLEUP;
dp.markerWidth = 20;
dp.markerHeight = 20;
dp.markerFill = new dundas.controls.SolidColorBrush("#FF00E400");
dp.markerStroke = dp.series.fill;
}
else //just normal
{
dp.markerShape = dundas.controls.MarkerShape.ELLIPSE;
dp.markerWidth = 10;
dp.markerHeight = 10;
dp.markerFill = dp.series.fill;
dp.markerStroke = null;
}
}
);
})




#5

Thanks for sharing! That's a useful script.

Unfortunately, I haven't found a way to use preformated code here yet.

#6

Very nice. And yes, a way to paste in formatted code would be great. Is HTML5 allowed in posts/responses?

#7

Not HTML5 either. However, there is an option for formatted text when you post a reply instead of a comment, so can use this for the time being.