I'm using NVD3 to display of a number of line charts and would like to be able to get the min and max values of the xAxis currently displayed. In this case the xAxis shows time values.
When toggling the visibility of lines in the chart, by clicking the legend label, the date range is changed. I've added an event handler to listen to legendClicks but how do I get my hands on the newly rendered date range?
I ended up using a custom function to find the min/max values of the x axis when clicking the legend. I wrapped the function within a $timeout in order to wait for the digest cycle to be completed to get the proper value, ie:
legend: {
dispatch: {
legendClick: function(e) {
$timeout(function(){
getMinMax();
}, 0);
}
}
},
The getMinMax function is a quick and dirty one and may most likely be done in a more elegantly manner, however it does its job:
var getMinMax = function(){
var maxVal, minVal = null;
for(var i=0;i<$scope.data.length;i++) {
// Only displayed should be considered
if (!$scope.data[i].disabled) {
var tempMinVal = d3.max($scope.data[i].values, function(d) { return d.x;} );
var tempMaxVal = d3.min($scope.data[i].values, function(d) { return d.x;} );
minVal = (!minVal || tempMinVal < minVal) ? tempMinVal : minVal;
maxVal = (!maxVal || tempMaxVal > maxVal) ? tempMaxVal : maxVal;
}
}
return [minVal, maxVal];
};
Will get the min and max from the data in this format:
[
{
"key": "AA",
"values": [
{
"x": 1440712800000,
"y": "6",
"series": 0
},
{
"x": 1440712800000,
"y": "6",
"series": 0
}
]
},
{
"key": "BB",
"values": [
{
"x": 1441144800000,
"y": "3",
"series": 1
},
{
"x": 1443045600000,
"y": "3",
"series": 1
},
{
"x": 1453244400000,
"y": "3",
"series": 1
},
{
"x": 1454022000000,
"y": "3",
"series": 1
}
]
},
{
"key": "CC",
"values": [
{
"x": 1442872800000,
"y": "5",
"series": 2
},
{
"x": 1442872800000,
"y": "5",
"series": 2
}
]
},
{
"key": "DD",
"values": [
{
"x": 1443650400000,
"y": "1",
"series": 3
},
{
"x": 1443650400000,
"y": "1",
"series": 3
}
]
},
{
"key": "EE",
"values": [
{
"x": 1444773600000,
"y": "9",
"series": 4
},
{
"x": 1446073200000,
"y": "9",
"series": 4
}
]
}
]
As I reached this far the client changed mind and didn't want the functionality that required this solution. Hope it may be of use for someone else.
