topic App engine : how to visualize the proper data type in a timeseries chart in Developer Q&A Forum

App engine : how to visualize the proper data type in a timeseries chart

Tommaso_Fin — Thu, 16 Oct 2025 07:50:15 GMT

Hi, I'm following this guide:

Query and visualize Grail data | Dynatrace Developer

But it seems that the TimeseriesChart doesn't show the proper metric type. If for example I run this simple DQL:

timeseries avg(dt.service.request.response_time)

then put the result in a timeserieschart with the code below, the metrics appear as a double and not as a duration:

{result.data && (
<DQLResultConverter queryResult={result.data} convertTo="timeseries">
{(data) => <TimeseriesChart variant="line" data={data}></TimeseriesChart>}
</DQLResultConverter>
)}

Could you please help me to obtain the same resul I have by putting that DQL in a normal dashboard?

I've also tryed the alternative approach with a convertToTimeseries function, but still the same result

<TimeseriesChart.Line pointsDisplay="never" data={convertToTimeseries(result.data.records, result.data.types)[0]} />

Re: App engine : how to visualize the proper data type in a timeseries chart

haris — Thu, 16 Oct 2025 08:53:11 GMT

Hi Tommaso!

The simplest way would be to use our Formatter in such a way, let me know if this works for you now:

import React from "react"; import { useDql } from "@dynatrace-sdk/react-hooks"; import { DQLResultConverter } from "@dynatrace/strato-components-preview/conversion-utilities"; import { TimeseriesChart } from "@dynatrace/strato-components-preview/charts"; import { format, units } from "@dynatrace-sdk/units"; export const Data = () => { const query = "timeseries avg(dt.service.request.response_time)"; const result = useDql({ query, }); return ( <> {result.data && ( <DQLResultConverter queryResult={result.data} convertTo="timeseries"> {(data) => ( <TimeseriesChart data={data} variant="line"> <TimeseriesChart.YAxis formatter={(value) => format(value, {input: units.time.microsecond, maximumFractionDigits: 0 })} /> </TimeseriesChart> )} </DQLResultConverter> )} </> ); };

Re: App engine : how to visualize the proper data type in a timeseries chart

Tommaso_Fin — Thu, 16 Oct 2025 08:54:37 GMT

Thanks Haris,

your code works well but what I need something that works also in cases of two timeseries returned by DQL, each of them with different data types. For example a DQL like this:

timeseries response_time = avg(dt.service.request.response_time) | append [timeseries request_count=count(dt.service.request.count)]

In this case I need a chart with 2 Y-Axis with different types. I see that this is done automatically if the DQL result has the proper type, just like is happening if I insert this DQL in a normal Dashboard. Could you pease help me to obtain something like this?

Re: App engine : how to visualize the proper data type in a timeseries chart

haris — Thu, 16 Oct 2025 09:49:38 GMT

Of course, that is also possible; we just have to individually assign data to different YAxis, and in that case you wouldn't have to use append either, but simply you can use single query to fetch two different metrics, but this should work in both cases, take a look:

import React from "react"; import { useDql } from "@dynatrace-sdk/react-hooks"; import { TimeseriesChart } from "@dynatrace/strato-components-preview/charts"; import { Flex } from "@dynatrace/strato-components/layouts"; import { ProgressBar } from "@dynatrace/strato-components/content"; import { convertToTimeseries } from "@dynatrace/strato-components-preview/conversion-utilities"; import { format, units } from "@dynatrace-sdk/units"; export const Data = () => { // Option 1: Your suggested append syntax const query = `timeseries response_time = avg(dt.service.request.response_time) | append [timeseries request_count=count(dt.service.request.count)]`; // Option 2: Alternative multi-metric syntax // const query = `timeseries avg(dt.service.request.response_time), count(dt.service.request.count)`; const result = useDql({ query, }); if (result.data === undefined) { return <ProgressBar />; } const [responseTimeTimeseries, requestCountTimeseries] = convertToTimeseries( result.data.records, result.data.types ); // Set proper units - this helps with the automatic formatting responseTimeTimeseries.unit = "microseconds"; // Keep original unit info return ( <Flex flexDirection="column"> <TimeseriesChart style={{ padding: "8px", boxSizing: "border-box" }}> <TimeseriesChart.YAxis position="left" label="Response Time" formatter={(value) => format(value, { input: units.time.microsecond, maximumFractionDigits: 0, }) } /> <TimeseriesChart.YAxis position="right" label="Request Count" /> <TimeseriesChart.Line data={responseTimeTimeseries} /> <TimeseriesChart.Line data={requestCountTimeseries} /> </TimeseriesChart> </Flex> ); };

Let me know if that's your wanted result 🙂