Predefined filter for linePlusBarWithFocusChart

Question

I'm trying to use linePlusBarWithFocusChart (angular-nvd3) in my application but i faced with the following problem - I cannot set initial range in the bottom chart (for example, i need to display values for a specific year in the upper chart and set this year range as an initial filter in the below chart) when the chart loaded. Is it possible to implement this feature?

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
  chart: {
    type: 'linePlusBarWithFocusChart',
    //chart settings
};

$scope.data = [
{
    "key" : "Quantity" ,
    "bar": true,
    "values" : [ DATA ]
},
{
     "key" : "Price" ,
     "values" : [   ],
     "remove": true
}
].map(function(series) {
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
    return series;

Here is my code. Please help me.

score 0 · Answer 1 · answered Oct 19 '15 at 12:37

Use brushExtent option (in terms of x-values, i.e. if x is indexes, then [index1, index2]; if x is date, then [date1, date2]):

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'linePlusBarWithFocusChart',
      x: function(d,i) { return i },
      brushExtent: [10, 20], //[i1, i2] - x-values interval  
      //chart settings
    }
  }
};

Predefined filter for linePlusBarWithFocusChart

1 Answers1