Time / Date Axis in line chart Series

0 Answers 9 Views
Charts
Leo
Top achievements
Rank 1
Iron
Leo asked on 08 May 2024, 12:38 PM

Hi,

I have a chart with multiple lines with numerical values. I also have a navigator themed selection pane, which works fine by now.
I would like to have Dates in various formats (depending on the zoom in level of the navigation) on the x axis.

I chose a line chart as suggested (because of the date / time x axis) instead of a scatterLineChart.
Until now I store testing data in an array of Series like so:


    series: Series[] = [
        {
            name: 'Series 1',
            type: 'line',
            data: [
                3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.89, 8.238, 9.552, 6.855,
            ],
            color: '#058dc7',
        },
        {
            type: 'line',
            name: 'Series 3',
            data: [
                4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3,
            ],
            markers: { type: 'square' },
            color: '#50b432',
        },
        {
            name: 'Series 3',
            type: 'line',
            data: [
                5.743, 8.295, 8.175, 7.376, 9.153, 9.535, 6.247, 1.832, 5.3, 5.3,
            ],
            markers: { type: 'roundedRect', visible: false },
            color: '#ed561b',
        },
        {
            name: 'Series 4',
            type: 'line',
            data: [
                0.01, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.69, 2.995,
            ],
            markers: { visible: false },
            color: '#dddf00',
        },
        {
            name: 'Custom',
            type: 'line',
            data: [2, 1.2, 4, 2, 5, 6, -4, -6, -4, -6],
            markers: { visible: false },
            legendItem: {
                type: 'area',
                area: {
                    opacity: 0.5,
                },
                highlight: {
                    visible: false,
                },
            },
            color: '#24cbe5',
        },
    ];

I am not sure how to pinpoint timestamps to the specific values, by now I can only find suitable examples within scatterline charts where the timestamps are given within the data array separately like the following structure as example:


onst data = (): WeatherData[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -10,
    Wind: 8.1,
    Rain: 0
  },
...
];

What would be the correct way to define data in a series consisting of value and timestamp tumples?
Seems simple, but I can't figure it out.

Best Regards,

FirestormHell

Leo
Top achievements
Rank 1
Iron
commented on 08 May 2024, 01:29 PM

I found out that a ScatterLine Chart is probably the better solution to depict value / time pairs of data.
I'll try it this way.
I am excited to see if I can find a way of modifying the xAxis legend (changing from Days to time etc.) depending on the zoom in / out level of the navigator selection.

Best Regards,

FirestormHell

No answers yet. Maybe you can help?

Tags
Charts
Asked by
Leo
Top achievements
Rank 1
Iron
Share this question
or