JSON time series example

example.jts.json

{
    "docType": "jts",
    "version": "1.0",
    "header": {
        "startTime": "2014-08-16T02:00:00.000Z",
        "endTime": "2014-08-16T02:20:43.000Z",
        "recordCount": 5,
        "columns": {
            "0": {
                "id": "541a5a129bc9b4035f906d70",
                "name": "Temperature",
                "dataType": "NUMBER",
                "renderType": "VALUE",
                "format": "0.###",
                "aggregate": "NONE"
            }
        }
    },
    "data": [
        {
            "ts": "2014-08-16T02:00:39.000Z",
            "f": { "0": {"v": 28.21, "q": 100 } }
        },
        {
            "ts": "2014-08-16T02:05:40.000Z",
            "f": { "0": {"v": 28.22 } }
        },
        {
            "ts": "2014-08-16T02:10:41.000Z",
            "f": { "0": {"v": 28.7 } }
        },
        {
            "ts": "2014-08-16T02:15:42.000Z",
            "f": { "0": {"v": 29.2, "q": 100 } }
        },
        {
            "ts": "2014-08-16T02:20:43.000Z",
            "f": { "0": {"v": 29.18 } }
        }
    ]
}

index.html

<!-- Target element to draw the chart. -->
<div id="chart" style="height: 50vh"></div>

<!-- Load the Plotly library from CDN. -->
<script src="https://cdn.plot.ly/plotly-2.4.2.min.js"></script>

<script>
// Load example data from the GitHub gist:
// https://gist.github.com/pbuk-uk/8bb21ab0f7f1bffa75f188617c68f0fe
const url = 'https://gist.githubusercontent.com/pbuk-uk/8bb21ab0f7f1bffa75f188617c68f0fe/raw/example.jts.json';

(async () => {
  try {
    // Fetch the data.
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.statusText);

    // Parse the response body as JSON.
    const obj = await response.json();

    // Extract data for the series in the right format for Plotly.
    const seriesData = { x: [], y: [] };
    // The data we are interested in are in the `data` property with `data.ts` as
    // the timestamp and `data.f['0'].v` as the value.
    obj.data.forEach(({ ts, f }) => {
      seriesData.x.push(new Date(ts));
      seriesData.y.push(f['0'].v);
    });

    // Create the plot using plotly defaults.
    Plotly.newPlot(document.getElementById('chart'), [seriesData]);
  } catch (err) {
    // Deal with any errors.
    console.error(err);
    document.getElementById('chart').innerText = err;
  }
})();
</script>