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

points in the scatter chart goes beyond the x-axis to the left #685

Open Muzaffarhssn5 opened 7 years ago

Muzaffarhssn5 commented 7 years ago

screenshot

can anyone please help me with why this is happening... this graph has around 3000 points plotted in it.... could that be a reason....?

I have pasted the code below...

$scope.options4 = {

chart: { type: 'scatterChart',

height: 250,

margin:{
  top:40,
  right:50
},

duration: 300,

pointRange: [10,10],

forceY:[0, 100],

xAxis: {
    tickFormat: function(d){
    return  d3.time.format("%d-%b-%y")(new Date(d));
    }
},

reduceXTicks:true,

yAxis: {
  tickFormat: function(d){
  return d3.format(".0f")(d);
  }
}

} }

$scope.data4 = $scope.scatterGraph(dateId);

$scope.scatterGraph = function(dateId){ var v1 = [], v2 = [], v3 = [];

          var datA = $scope.graphData;

          for(var i = 0; i <= datA.length - 1; i++){
              var val = datA[i];
              if(val.type == "Positive") {
                  var date = val.date.split("-");
                  v1.push({x: new Date(date[0], date[1]-1, date[2]), y: val.sentiment, e: [val.text, val.media_type], size: 1, shape: "circle"});
              } else if (val.type == "Neutral") {
                  var date = val.date.split("-");
                  v2.push({x: new Date(date[0], date[1]-1, date[2]), y: val.sentiment, e: [val.text, val.media_type], size: 1, shape: "circle"});  
              } else if (val.type == "Negative") {
                  var date = val.date.split("-");
                  v3.push({x: new Date(date[0], date[1]-1, date[2]), y: val.sentiment, e: [val.text, val.media_type], size: 1, shape: "circle"});
              }
          }

          return [{
                      key: "Positive",
                      color:"#589442",
                      values:v1,
                  },
                  {
                      key: "Neutral",
                      color:"#FE7B21",
                      values:v2
                  },
                  {
                      key: "Negative",
                      color:"#EC2530",
                      values:v3
                  }];
      };`