Ngx-charts: Line chart with gap in data

[razzeee]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior

I can't get the line chart to draw a graph with a gap in it's data. And it doesn't seem to be documented here https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html
I tried to set my data to both null or undefined. Null results in it being 0 and undefined keeps it from drawing.
For e.g.:

  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      },
      {
        "name": "2012",
        "value": null
      },
      {
        "name": "2013",
        "value": 8940000
      }
    ]
  },

Expected behavior

Not sure about undefined or null as the api here, but I would expect the graph to just stop drawing at the point before and start drawing again on the point after. So that we just get a gap where not data is.

Reproduction of the problem

Just use the plnkr from https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html and replace the data with the above.

What is the motivation / use case for changing the behavior?

The intention is to communicate, that there are no values for that timespan available.

Please tell us about your environment:

Shouldn't matter, I will get back to you if it does.

• ngx-charts version: x.x.x
  
  Shouldn't matter, I will get back to you if it does.

• Angular version: 2.x.x
  
  Shouldn't matter, I will get back to you if it does.

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  Shouldn't matter, I will get back to you if it does.

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Shouldn't matter, I will get back to you if it does.

[mmalyska]

@Razzeee You expect your graph to not to show data, but in my case I would love to see line without holes. So I would expect the graph to carry over previous data as current one.
Maybe we could parametrize this behavior?

[razzeee]

Well either that or make sure to only draw a gap if we have a data point
with a specific value like NaN or NULL. But that might be a breaking change
so probably a no go.

On Sat, 12 May 2018, 10:11 Michał Małyska, [e-mail] wrote:

@Razzeee https://github.com/Razzeee You expect your graph to not to
show data, but in my case I would love to see line without holes. So I
would expect the graph to carry over previous data as current one.
Maybe we could parametrize this behavior?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-charts/issues/799#issuecomment-388538833,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFqyZEH3-443SjAh4-mYpH5yFc5XZIs9ks5txpkWgaJpZM4TTE-5
.

[Moulde]

I have the same issue.
The areachart is visualized correctly ie. no border or point is visible, but the point still exists, and when i mouse over the point it will throw an error when trying to create the tooltip due to the value being null.
Reading null as a 0 is IMO not correct, as 0 is in most cases, a valid value, whereas null or NaN indicates that the point has no value.

It's also not a solution to just skip the points with null values, as that skews the chart, at least in the case of x value being a timestamp.

Would adding a configuration flag, maybe makeNullPointInvisible with a default value of False, and use this to decide if it should visualize the point, be a solution? (ofc the hardest part is what to call the parameter....)
That way the current handling will stay the same, but setting the flag to true, will make it place a invisible point, and not show any tooltips. But the point will still take up room in the chart.

[rutemja]

@marjan-georgiev Is it possible to estimate when this feature will be implemented? It's a really important issue for us.

[razzeee]

Had a look at the line chart and this is all it needs to turn nulls into gaps.
https://github.com/Razzeee/ngx-charts/commit/385bda45b43a1a777e5aa827237dad37998a8b3d

It will not draw for any single point between two nulls, this way: https://github.com/d3/d3-shape#line_defined

[andreabalducci]

@Razzeee thanks. The line has gaps but tooltips are trying to format a null value. As workaround I added two custom tooltip templates

<ng-template #tooltipTemplate let-model="model">
    <span *ngIf="model.value === null">Data not available</span>
    <span *ngIf="model.value !== null">{{model.value}} {{model.series}} @ {{model.name}}</span>
</ng-template>
<ng-template #seriesTooltipTemplate let-model="model">
    <span *ngIf="model[0].value === null">Data not available</span>
    <span *ngIf="model[0].value !== null">{{model[0].value}} {{model[0].series}} @ {{model[0].name}}</span>
</ng-template>

[Moulde]

@Razzeee Awesome! Do you happen to know the easiest way for me to apply the patch in my project? - It seems like there is not much focus on merging pull requests atm.

[razzeee]

No, sorry no idea.

[celsogbj]

Any update on this? This issue is really annoying. The same happens to bar charts.

[sbyzer]

For everyone that wants to hide null values and don't show them as '0' values:
You have to create a component that extends LineChartComponent and just changes the template to not use <svg:g ngx-charts-circle-series .../> but rather your own component, that extends CircleSeriesComponent which overrides the function "getActiveCircle()" the following way...

getActiveCircle(): {} {
    const indexActiveDataPoint = this.data.series.findIndex((d) => {
      const label = d.name;
      return label
              && this.visibleValue
              && label.toString() === this.visibleValue.toString()
              && d.value !== undefined
              && d.value !== null; // <-- THIS IS THE IMPORTANT PART
    });

    if (indexActiveDataPoint === -1) {
      // No valid point is 'active/hovered over' at this moment.
      return undefined;
    }

    return this.mapDataPointToCircle(this.data.series[indexActiveDataPoint],
                 indexActiveDataPoint);
  }

Also don't forget to apply @Razzeee 's changes by creating a third component, that extends LineSeriesComponent and overrides the functions "getLineGenerator()" and "getRangeGenerator()" like he did here https://github.com/Razzeee/ngx-charts/commit/385bda45b43a1a777e5aa827237dad37998a8b3d

I hope that is enough to make it work. I did some additional changes to meet other requirements too, so maybe I forgot something. If so, then let me know.

[End-S]

I have found that if you provide a series with the same name, ngx-charts groups this as a single entry in the legend. This means that you can split the series up every time your data contains a null value and your plotted line will display with gaps. For example:

results: any[] = [
    {
      'name': 'Saint Pierre and Miquelon',
      'series': [
        {
          'value': 6182,
          'name': '2016-09-22T13:44:43.081Z'
        },
        {
          'value': 4938,
          'name': '2016-09-23T00:29:51.341Z'
        },
        {
          'value': 5137,
          'name': '2016-09-17T02:59:36.606Z'
        },
        {
          'value': 2841,
          'name': '2016-09-21T11:01:36.508Z'
        },
        {
          'value': 6347,
          'name': '2016-09-19T21:28:14.801Z'
        },
      ],
    },
    // A null value would have occurred here
    {
      'name': 'Saint Pierre and Miquelon',
      'series': [
        {
          'value': 7347,
          'name': '2016-09-19T23:28:14.801Z'
        },
        {
          'value': 5347,
          'name': '2016-10-19T11:28:14.801Z'
        }
      ]
    }
  ];

I appreciate this is not a complete solution but if you are plotting against time it should be a clean workaround until null values get support.