# Converting data from API to plot

**URL:** <https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751>\
**Category:** Help\
**Created:** [June 28, 2022, 12:40pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751 "2022-06-28T12:40:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fatman](https://avatars.discourse-cdn.com/v4/letter/f/d2c977/32.png) [@fatman](https://talk.observablehq.com/u/fatman)\
**Post date:** [June 28, 2022, 12:40pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751/1 "2022-06-28T12:40:19Z")

</div>

Hi Everyone,

I am new to Observable and plot. And have collected some data from an API I want to show in a graph.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/b/b07f2a7d64d2e377fc8363ef873db128dccabe68.png)

The data is shown here with an array for each interface and then it contains an object with all the metrics with time stamps.

How do I make a plot.LineY for each of the level 1 arrays with the information in the records array.

Hope it makes sense?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 28, 2022, 1:06pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751/2 "2022-06-28T13:06:54Z")

</div>

I would try something like:

```auto
Plot.plot({
  x: {type: "utc"},
  marks: [
    advInterface1.map(({records}) => Plot.lineY(records, {x: "modificationTime", y: "avgOutputUtil"}))
  ]
})

```

(if it doesn’t work, please share a notebook with some data so we can elaborate “on site”)

---

<div class="post-metadata">

**Author:** ![fatman](https://avatars.discourse-cdn.com/v4/letter/f/d2c977/32.png) [@fatman](https://talk.observablehq.com/u/fatman)\
**Post date:** [June 28, 2022, 1:46pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751/3 "2022-06-28T13:46:30Z")

</div>

Hi Fil

I have make a notebook with the JSON data loaded.

> **[Interface data](https://observablehq.com/@fatman00/interface-data)**

But I am afraid I don’t understand how to manipulate the data. Do we have some good tutorials on it?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 28, 2022, 2:41pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751/4 "2022-06-28T14:41:22Z")

</div>

Here’s a working solution

```auto
Plot.plot({
  x: { type: "utc" },
  y: { type: "linear" },
  marks: [
    myData.map(({ records }, index) =>
      Plot.lineY(records, { x: d => +d.modificationtime, y: "avgOutputUtil", stroke: index })
    )
  ]
})

```

- x: { type: “utc” } coerces the x axis to utc time, and reads in numbers (the dataset has strings)
- y: { type: “linear” } coerces the y axis to a linear scale (and avgOutputUtil from strings to numbers)

---

<div class="post-metadata">

**Author:** ![fatman](https://avatars.discourse-cdn.com/v4/letter/f/d2c977/32.png) [@fatman](https://talk.observablehq.com/u/fatman)\
**Post date:** [June 29, 2022, 12:26pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751/5 "2022-06-29T12:26:51Z")

</div>

Great, it shows the line now. Thank you.

The stroks are not color coded though?

I have updated the shared notebook with you code.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [June 29, 2022, 2:45pm UTC](https://talk.observablehq.com/t/converting-data-from-api-to-plot/6751/6 "2022-06-29T14:45:10Z")

</div>

it is color-coded but the red line doesn’t have much amplitude