chart events milliseconds

[iGRID]

Hello;

We need to display a chart which shows the data we have from the backend. Each event has a date record that includes the milliseconds. It is very possible that we need to show several events that are only a few milliseconds apart.

I have managed to show the events per second, with this configuration only the last event we received for that second is shown, losing data in the chart.

If I configure the ChartCategoryAxisItem with baseUnit milliseconds, the web crashes and closes, it seems that it starts to calculate something and causes an error.

I attach the current development, it is quite simple.

Could you recommend the configuration of the components or tell us which components are recommended to use when working with dates that have milliseconds?

The idea is to show a series of events with dates with milliseconds in a chart.

Thanks in advance.

 

Event Example

{
    "idEvent": 551,
    "seqNumber": 0,
    "eventTime": "2024-05-16T23:59:48.200Z",
    "eventTimeQ": 1,
    "eventTimeLocal": 1,
    "quality": "1",
    "value": 30,
    "COT": null,
    "points_idPoint": 3,
    "DynamicTexts_idDynamicTexts": null
}

 

<Chart ref={chartRef} style={{ height: "100%" }}>
<ChartLegend position="top" visible />
<ChartTooltip
render={({ point }) => `${point.series.name}: ${point.value}`}
/>
<ChartCategoryAxis>
<ChartCategoryAxisItem
baseUnit="milliseconds"
baseUnitStep={100} 
min={new Date(startDate)}
max={new Date(endDate)}
majorGridLines={{ visible: true }}
title={{ text: "Event Time" }}
majorTicks={{ step: 5 }} // Muestra una etiqueta cada 5 puntos
labels={{ step: 5, rotation: "auto" }}
/>
</ChartCategoryAxis>
<ChartValueAxis>
<ChartValueAxisItem
name="digitalAxis"
title={{ text: "Digital" }}
min={0}
max={1}
labels={{ format: "{value}" }}
/>
<ChartValueAxisItem
name="analogAxis"
title={{ text: "Analog" }}
labels={{ format: "{value}" }}
/>
</ChartValueAxis>
<ChartSeries>
{signals
.filter((s) => s.visible)
.map((signal) => {
const events = chartData[signal.idPoint] || [];
return (
<ChartSeriesItem
key={signal.idPoint}
type="line"
data={events.map((event) => ({
value:
signal.idPointType <= 1
? event.state === "On"
? 1
: 0
: event.value || 0,
category: event.eventTime,
}))}
color={signal.color}
name={signal.tag}
axis={signal.idPointType <= 1 ? "digitalAxis" : "analogAxis"}
/>
);
})}
</ChartSeries>

</Chart>

[Ina]

Hello,

I have already answered your support thread on the matter and will advise that we continue our communication there ( ticket: 1669527).

Feel free to share the solution here, when it is available.

Regards,
Ina
Progress Telerik

[iGRID]

We have prepared the data in the backend in the correct format and we have used the ScatterLine graphic which is appropriate.