0

I've been trying to figure out how to achieve the timeline for x-axis for NGX chart like in documentation demo page: https://swimlane.github.io/ngx-charts/#/ngx-charts/timeline-filter-bar-chart-demo

But there isn't anywhere code how it was achieved, like in other ngx charts.

I got the JSON and basics all working:

name: 'Temperature',
      series: [
        { value: 22, name: '2021-06-01 10:45:00+00' },
        { value: 33, name: '2021-06-01 11:14:44+00' },
        { value: 11, name: '2021-06-01 13:45:00+00' }, ... ]

But I don't seem to get anywhere without stackblitz code example like with other chart types and features.

Hopeless
  • 23
  • 9

2 Answers2

1

To my best of knowledge I think the data must be in a JSON format

data = [
    {
      name: 'Temperature',
      series: [{
          value: 22,
          name: '2021-06-01 10:45:00+00'
        },
        {
          value: 33,
          name: '2021-06-01 11:14:44+00'
        },
        {
          value: 11,
          name: '2021-06-01 13:45:00+00'
        }
      }]

 <div *ngFor="let arr of data ">
   <ngx-charts-bar-vertical
    [view]="view"
    [scheme]="colorScheme"
    [results]="arr.series"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    (select)="onSelect($event)">
  </ngx-charts-bar-vertical> 
  </div>
Awabil George
  • 310
  • 6
  • 12
  • I got the JSON and basics all working. Charts are running without errors, but the x axis bottom timeline is shown timestamps for each value there, where I was wondering how to implement timeline-filter-bar-chart with fewer timestamps. That code provided doesn't have the x axis time info limited like in above link. If I have data with 100 entries and it will show all those timestamps in x axis. I appreciate the help though, thank you. – Hopeless Jun 05 '21 at 09:26
  • 1
    Ok xAxisTickFormatting = value => `X ${value.toLocaleString()}`; yAxisTickFormatting = value => `Y ${value.toLocaleString()}`; read more here https://github.com/swimlane/ngx-charts/issues/51 – Awabil George Jun 05 '21 at 11:28
1

Custom Demo Charts

The "timeline-filter-bar-chart" is an example for custom chart components that you can create on your own with the help of the library.

You can find the source code in the framewok's repo.

Tino
  • 646
  • 2
  • 9
  • 15
  • Thank you. Seems a bit overwhelming to implement this with library as go to guide. I did how ever stumbled over there when I was trying to find solution for this problem. I guess I need to study this approach even though it requires a lot of learning on my part. Stackblitz demo would been hand delivered the answer on a golden plate, but that was a bit too much wishful thinking. Thank you and I'll try my best with that. Appreciate the help! – Hopeless Jun 05 '21 at 09:40
  • 1
    Yes, in understand it's a lot to start with, but I'm sure the learning experience is far greater when you try to implement it yourself based on a working example like this one. Have fun with it :) – Tino Jun 05 '21 at 10:12