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

[Tommaso_Fin]

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]} />

[haris]

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>
      )}
    </>
  );
};

[Tommaso_Fin]

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? 

 

[haris · Accepted solution]

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 🙂