drawing line chart fix

1 files changed, 11 insertions, 4 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index b1a759c1f..d87f5ae1b 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -252,13 +252,20 @@ export class LineChart extends React.Component<LineChartProps> {
         xAxisCreator(svg.append('g'), height, xScale);
         yAxisCreator(svg.append('g'), width, yScale);
 
-        // draw the plot line
+        // get valid data points
         const data = dataSet[0];
         const lineGen = createLineGenerator(xScale, yScale);
-        drawLine(svg.append('path'), data, lineGen);
-
+        var validData = data.filter((d => {
+            var valid = true;
+            Object.keys(data[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        }))
+        // draw the plot line
+        drawLine(svg.append('path'), validData, lineGen);
         // draw the datapoint circle
-        this.drawDataPoints(data, 0, xScale, yScale);
+        this.drawDataPoints(validData, 0, xScale, yScale);
 
         const higlightFocusPt = svg.append('g').style('display', 'none');
         higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');