angularjschartsangular-nvd3

Why is my line chart not plotting all of my data?


I am trying to create a line charts which covers points of {x: someX, y: someY}. But, it's not covering all of my points, and maxes out when y is 783.

Here is a picture of what's going on:

There's a big space

The airlines on the bottom should have the line covering them as well, but my line chart is stopping the line at {x: 21, y: 783}.

How could I get this line chart to cover the other coordinates as I intended?

Here is my linechart.component.js:

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"
          }
        ]

      })
    })();

    $scope.options = {
      chart: {
        type: 'lineChart',
        height: 500,
        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) {
            console.log(d)
            var label = $scope.data[0].values[d].label;
            return label;

          }
        },

        yAxis: {
          axisLabel: 'Y Axis',

          axisLabelDistance: 0
        },
        yDomain: [0, 40000]
      }
    };
  }
})

Here is the git repo if you'd like to run it.


Solution

  • I found the issue. All numbers after the y coordinate of 783 were in the thousands, and were coming in from the API as a string with commas. So I had to remove the "," from each number. Then the rest of the line chart was able to plot.