Ngx-charts: Available option for time series

Created on 14 Jun 2017  路  8Comments  路  Source: swimlane/ngx-charts

I'm submitting a request

I would like to know if there is an options in Ngx-Charts to realise some time series with irregular interval combined with rxjs library operators

Current behavior

Expected behavior
Showing datas in a vertical normalized chart for a daily period (24hours) using time series and rxjs observables.

Reproduction of the problem

What is the motivation / use case for changing the behavior?
Normalized Vertical bar chart showing the variation for each day

Please tell us about your environment:
Xubuntu Linux

  • ngx-charts version:
    latest

  • Angular version: 2.x.x
    4

  • 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 ]
    Chrome 59

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

Language:
TypeScript ES6/7

Question

Most helpful comment

Yes, but you need to pass actual javascript Date objects instead of time strings.

Example: https://plnkr.co/edit/07jalA59YkYpBAfcZT4W?p=preview

All 8 comments

Is that possible to set a time in the axis? Because my datas looks like: {"time":"01:02:08","value":100},{"time":"01:04:08","value":100},{"time":"01:06:08","value":100},{"time":"01:08:08","value":100},{"time":"01:10:08","value":100},{"time":"01:12:08","value":100},{"time":"01:14:08","value":100},{"time":"01:16:08","value":100},{"time":"01:18:08","value":100},{"time":"01:20:08","value":100},{"time":"01:22:08","value":100},{"time":"01:24:08","value":100},{"time":"01:26:08","value":100},{"time":"01:28:08","value":100},{"time":"01:30:08","value":100},

I found an exemple of time series using d3 library, is this available in ngx-charts?
Here's what I found : http://c3js.org/samples/timeseries.html

Yes, but you need to pass actual javascript Date objects instead of time strings.

Example: https://plnkr.co/edit/07jalA59YkYpBAfcZT4W?p=preview

Ahright many many thanks mylord !

the given example on plnkr does not work anymore....

@nnworkspace

This is what your data should look like:

export var multi = [
  {
    "name": "Germany",
    "series": [
      {
        "name": new Date("2010-01-01"),
        "value": 7300000
      },
      {
        "name": new Date("2011-01-01"),
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": new Date("2010-01-01"),
        "value": 7870000
      },
      {
        "name": new Date("2011-01-01"),
        "value": 8270000
      }
    ]
  },

  {
    "name": "France",
    "series": [
      {
        "name": new Date("2010-01-01"),
        "value": 5000002
      },
      {
        "name": new Date("2011-01-01"),
        "value": 5800000
      }
    ]
  }
];

Note that the values of the name property are actual Date objects, rather than strings.

An example please

Just copied the original example to stackblitz.

Was this page helpful?
0 / 5 - 0 ratings