[TIP 65] Highlighting the Currently Selected Data Point of your Line Charts

#1

Depending on your line charts trend variability, it may be helpful to help the users better understand which data point they are looking at on the line chart by turning on the markers visibility when a user hovers over a certain data point within the trend.


For example, if the change between 2 period of times isn’t dramatic enough, it may be hard to tell if you are looking at the current period or the previous period value. Sure, the user can always read the tooltip but supporting the user readability of the chart with the markers can improve that experience even further.


To turn on those markers simply open the series properties and go to the “Look” tab -> “Selected Data Styles” -> “Selected Points Style”. Then you can check “Show Marker” property and maybe also change the Marker Height and Width to 10. Now when you go to view mode, you will see the markers appearing on your line chart as you hover over the different data points.


For example like this:


Image title


--


***DUNDAS BI 5 - TIP UPDATE***


Starting from Dundas BI 5, all you need to do in order to show the values of all the series in your trend chart at once, is to check one property.


Click on this link to see a gif demonstrating how to accomplish this:



#2

These tips are so useful, because I find myself sometimes just exploring around to see what can be done.

Being shown something neat is much better because there are so many neat things to explore sometimes you miss something.

#3

Jordan,
I just used this tip.

I still wanted a Marker on each point and use this tip as well so I did Diamond for each point and a slightly bigger Ellipse for the selected data point marker.

A nice combination of best of both worlds.



Thanks again for the tip.




Suggestion for next Tip (and hope it comes soon cause I need to do it now), I have a Period over Period on this line graph it shows the entire current year (and of course previous year) the previous has data for all 12 months but this year only up to past month. I currently have data labels, but we only want it to show on the last month of the current year and the matching month for the previous year.

I tried Series Label and that works for current but the label go to December for previous.

(Sorry its wordy, picture would be better but it has company data on it that I cannot share.)

The Tip Title would be "How to Show/Hide Data Labels based on a Hierarchy setting".


This should help:

https://www.dundas.com/support/developer/script-library/controls/chart/setting-series-label-settings

Not what I need but maybe I can loop through the text values and set all but the one I want shown to empty string ("") or something.


The key to this is finding the connection between the data point on the series and the data point label, AND I cannot find that. I think I found the list of data labels, but I cannot see a way to control if they display (show/hide).



#4


Interesting case - I'm guessing there should be a way to maybe create a formula that will help you detect which row of data is the last one and then create states based on that to show the labels just for the last month we data for in the current year.


Another related technique to help the user visualize the 2 values of the different series can be using the crosshair property and a small script on the mouse move. With the crosshair, you can help the user see where the value aligns across both series. To turn it on, simply open the chart "Selection Cursor" properties and check the "Show Crosshairs" and then just the "Select Horizontally" one at the top. Now you can add this script to the chart "Mouse Move" action and get the crosshair to move with your cursor:


var args = dundas.Utility.getAdapterHitTestArguments(e.originalEvent, chart1);
chart1.control.selectionCursor.startXValue = chart1.control.pixelToValue(chart1.control.xAxes[0], args.offsetX);


Then to actually show the corrosponding values (of both series) that your mouse is currently on, you can add the following script to the mouse move (note this example is showing the results of both series in a seperate label compoenent on the dashboard:


var row = e.relatedData.rows[0];

var xValue = "";

chart1.metricSetBindings[0].dataResult.cellset.cells.forEach(function(measure){xValue += "/"+ parseFloat(measure[row].value);});

label1.labelText = xValue;



This script is taken from the May 17 discussion with Toufik (you may need to click on "show more" to see the full discussion)


I believe this script should get you that connection you are talking about between the series. Here is an example of how it looks like when using both scripts:



Image title






Please do share your final result (or script) if you follow these steps.



#5

Really good tip

#6

Here is a script that we used to only display a label for the last point each a line.

We put it on the data change script of a chart that doesn't have any other labels set in the properties.


//create the label settings
var chartDataLabelSettings = new dundas.controls.ChartDataLabelSettings();
chartDataLabelSettings.text = "[Dynamic Measure:N0]%"; //replace with what the text should be
chartDataLabelSettings.placement = dundas.controls.AutoLabelPlacement.OUTSIDE;
chartDataLabelSettings.outsideAlignment = dundas.controls.AutoLabelAlignment.RIGHT;
chartDataLabelSettings.rotation = dundas.controls.AutoLabelRotation.NONE;
chartDataLabelSettings.outsideCanOverlapLabels = false;
chartDataLabelSettings.outsideCanOverlapData = true;

//put in an array (chart label settings need to be an array)

cdls = [];

cdls.push(chartDataLabelSettings)


//put into the chart


//loop through all the data points in the chart

chart1.control.series[0].getPoints().forEach(function (dp)

{

//if a point’s x value matches the very last point’s x value, it is the end of a series grouping line

if (dp.xValues[0][0] === chart1.control.series[0].getPoints()[chart1.control.series[0].getPoints().length - 1].xValues[0][0])

{

//apply label settings to that point

dp.labels = cdls;

}

}

)


//update the chart

chart1.control.invalidate();