Visualize Time Series Data With μPlot Library

Preview:

Description:

μPlot is a lightweight, interactive, scalable, high-performance chart library to visualize any time series data (a series of data points indexed in time order) using Canvas API.

More features:

• Crosshair cursor.
• Configurable x and y-axis.
• Legend with live values.
• Dynamic data fetching.

How to use it:

1. Download and import the μPlot library.

<link rel="stylesheet" href="uPlot.css">
<script src="uPlot.iife.min.js"></script>

2. Prepare the time series data.

const data = [

      // Unix timestamps
      [1566453600, 1566457260, 1566460860, 1566464460], 

      // data set 1  
      [0.54, 0.15, 3.27, 7.51],

      // data set 2
      [12.85, 13.21, 13.65, 14.01],

      // data set 3
      [0.52, 1.25, 0.75, 3.62]

];

3. The example JS to initialize the μPlot Library.

let myChart = new uPlot({

    // width/height in pixels
    width: 960,
    height: 400,

    // shows cursor
    cursor: true,

    // determines how to present your data
    series: {
      x: {
        data: data[0],
      },
      y: [
        {
          label: "CPU",
          data: data[1],
          scale: "%",
          value: v => v.toFixed(1) + "%",
          color: "red",
          width: 2,
          dash: [10, 5],
        },
        {
          label: "RAM",
          data: data[2],
          scale: "%",
          value: v => v.toFixed(1) + "%",
          color: "blue",
        },
        {
          label: "TCP Out",
          data: data[3],
          scale: "mb",
          value: v => v.toFixed(2) + "MB",
          color: "green",
        }
      ],
    },

    // customize the x, y axis
    axes: {
      y: [
        {
          scale: '%',
          values: (vals, space) => vals.map(v => +v.toFixed(1) + "%"),
        },
        {
          side: 3,
          scale: 'mb',
          values: (vals, space) => vals.map(v => +v.toFixed(2) + "MB"),
          grid: null,
        },
      ],
    }
});

4. Render the time series chart on the page.

document.body.appendChild(myChart.root);

5. Default x-axis options.

scale: 'x',
space: 40,
height: 30,
side: 0,
class: "x-time",
incrs: timeIncrs,
values: (vals, space) => {
  let incr = vals[1] - vals[0];

  let stamp = (
    incr >= d ? fmtDate('{M}/{D}') :
    // {M}/{DD}/{YY} should only be prepended at 12a?   // {YY} only at year boundaries?
    incr >= h ? fmtDate('{M}/{DD}\n{h}{aa}') :
    incr >= m ? fmtDate('{M}/{DD}\n{h}:{mm}{aa}') :
    fmtDate('{M}/{DD}\n{h}:{mm}:{ss}{aa}')
  );

  return vals.map(val => stamp(new Date(val * 1e3)));
},
grid: {
  color: "#eee",
  width: 2
}

6. Default y-axis options.

scale: 'y',
space: 30,
width: 50,
side: 1,
class: "y-vals",
incrs: numIncrs,
values: (vals, space) => vals,
grid: {
  color: "#eee",
  width: 2
}

7. Default options for the time series data on the x-axis.

label: "Time",
scale: "x",
value: v => stamp(new Date(v * 1e3))

8. Default options for the time series data on the y-axis.

shown: true,
label: "Value",
scale: "y",
value: v => v

Changelog:

10/29/2019

• improve pixel snapping

10/27/2019

• Fix high/low band series toggling