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

Option defined: is not working #730

Open ranjitkumarpalanisamy opened 6 years ago

ranjitkumarpalanisamy commented 6 years ago

NaN Value is still displaying in the Graph. temperature_nan

Here I attach my code below,

    this.options = {
        chart: {
            type: 'lineChart',
            height: 450,
            margin: {
                top: 100,
                right: 20,
                bottom: 50,
                left: 55
            },
            defined: function(d){
                console.log("******inside graph"+"x: "+d.x+"y: "+ d.y +" "+ !isNaN(d.y) );
                return !isNaN(d.y) && d.y !== null;
            },
            x: function(d) {
                return d.x;
            },
            y: function(d) {
                return d.y;
            },
            showValues: true,
            duration: 500,
            xAxis: {
                axisLabel: 'Time (days)',
                tickFormat: d3.format(',f')
            },
            yAxis: {
                axisLabel: 'Temperature (°C)',
                tickFormat: d3.format(',.1f'),
                axisLabelDistance: -10
            },

            useInteractiveGuideline: false,
            interactive: true,
            tooltips: true,
            tooltip: {
            contentGenerator: function (e) {  
              var series = e.series[0];
              if (series.value === null) return;

              var rows = 
                "<tr>" +
                  "<td class='key'>" + 'Date: ' + "</td>" + 
                  "<td class='x-value'>" +e.value+ "</td>" +
                "</tr>"+
                "<tr>" +
                  "<td class='key'>" + 'Temperature(°C): ' + "</td>" +
                  "<td class='x-value'><strong>" +series.value+ "</strong></td>" +
                "</tr>";

              var header = 
                "<thead>" + 
                  "<tr>" +
                    "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                    "<td class='key'><strong>" + series.key + "</strong></td>" +
                  "</tr>" + 
                "</thead>";

              return "<table>" +
                  header +
                  "<tbody>" + 
                    rows + 
                  "</tbody>" +
                "</table>";
            } 
          }

        }

Input Data : [ {"x":1,"y":21},{"x":2,"y":22},{"x":3,"y":23},{"x":4,"y":null},{"x":5,"y":null},{"x":6,"y":25},{"x":7,"y":null},{"x":8,"y":25},{"x":9,"y":21},{"x":10,"y":23},{"x":11,"y":25.5} ]