krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

Why is my line chart not plotting all of my data points? #743

Open capozzic1 opened 6 years ago

capozzic1 commented 6 years ago

Hello,

I am having the issue in this picture: Link

My line plot plots about half of my data points, and I have about 178 objects that contain x and y coordinates for one line on the chart. Here is my component that I'm trying to make the chart with.

Here is the github repo if you'd like to run it: https://github.com/capozzic1/tsa-claims

I also created a stackoverflow question on this: https://stackoverflow.com/questions/49970183/why-is-my-line-chart-not-plotting-all-of-my-data

`app.component('linechart', { templateUrl: 'views/linechart.template.html', controller: function($scope, ClaimService) { $scope.data = []; $scope.getData = (function() {

  ClaimService.getData().then(function(data) {

    var coordinates = [];

    var coords;
    for (var i = 0; i < data.length; i++) {

      coords = {
        x: i,
        y: data[i].monthlyLoss,
        label: data[i].key
      }

      coordinates.push(coords);

    }

    $scope.data = [
      {
        key: "Refer to X axis for airline names",
        values: coordinates,
        color: "blue"
      }
    ]
    console.log(coordinates)
  })
})();

$scope.options = {
  chart: {

    type: 'lineChart',
    height: 2000,
    width: 5000,
    x: function(d) {

      return d.x;

    },
    y: function(d) {
      return d.y

    },

    color: d3.scale.category10().range(),
    duration: 300,
    useInteractiveGuideline: true,
    clipVoronoi: false,

    xAxis: {
      axisLabel: "Monthly loss",
      tickFormat: function(d) {

        var label = $scope.data[0].values[d].label;
        return label;

      }
    },

    yAxis: {
      axisLabel: 'Y Axis',

      axisLabelDistance: 0
    },
    yDomain: [
      0, 50000
    ],
    lines: {
      forceX: 100
    }
  }
};

} })`

capozzic1 commented 6 years ago

I fixed this by removing the commas from my numbers coming from the API. Please close.