1

i need to change y axis position that min position is in top and max position in bottom. so the nvd3 chart will move down to the latest value

everything i need is in this link.

http://jsfiddle.net/8fh8qLs0/8/

in this sample the chart go up, because biggest value is in top how to change so the biggest value is in bottom,

here the code

  angular.module('myApp', ['nvd3'])
  .controller('myCtrl', function($scope) {
    $scope.options = {
      chart: {
        type: 'lineChart',
        height: 450,
        margin: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 60
        },
        // x: function(d){ return new Date(d.x).toISOString(); },
        x: function(d) {
          return d.x;
        }, //
        //xScale: d3.time.scale,
        y: function(d) {
          return d.y;
        },
        useInteractiveGuideline: true,
        transitionDuration: 1,
        isArea: false,
        useInteractiveGuideline: true,
        xAxis: {
          tickFormat: function(d) {
            return d3.format('.02f')(d);
          },
        },
        yAxis: {
          axisLabel: 'Time (ms)',
          tickFormat: function(d) {
            return d3.time.format('%H:%M:%S')(new Date(d));
          }
        },
        callback: function(chart) {
          console.log("!!! lineChart callback !!!");
          console.log(chart.yAxis.scale().domain());
        },
        interactiveLayer: {
          tooltip: {
            gravity: 's',
            classes: 'gravity-s'
          }
        },
        x2Axis: {
          showMaxMin: false,

        },
        y2Axis: {
          showMaxMin: false,
          tickFormat: function(d) {
            var date = new Date(new Date().setDate(new Date().getDate() + d));
            return d3.time.format('%b %d')(date);
          }
        },
        legend: {
          margin: {
            top: 8,
            right: 0,
            bottom: 32,
            left: 0
          },
          rightAlign: true
        }
      }
    };

    $scope.data = [{
      values: [],
      key: 'Random Walk'
    }];

    $scope.run = true;

    var x = 0;
    setInterval(function() {
      if (!$scope.run) return;
      $scope.data[0].values.push({
        x: Math.random(),
        y: Date.now(), //* (Math.random() > 0.95) ? 10: 1
      });

      if ($scope.data[0].values.length > 70) {
        $scope.data[0].values.shift();
      }
      x++;
      $scope.$apply();
      //chart.update();
    }, 1000);
  });

Thanks in advance.

Chris
  • 75
  • 11
  • 1
    I can't figure out how to get it to work with angular nvd3 but I reckon what you'd do is reverse the y axis range. Normally you do .range([maxScreenY, minScreenY]) but if you do .range([minScreenY, maxScreenY]), it would render with min at the top and max at the bottom. – jeznag May 25 '17 at 23:49
  • 1
    i have try this work. using range() thanks for solution. – Chris May 29 '17 at 01:57

0 Answers0