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:

v1.0.7 (05/04/2020)

• ensure chart position cache is always in sync
• ensure scale.range can get current scale min/max
• TS defs fixups
• various fixes for charts without data

v1.0.7 (04/23/2020)

• fix legend showing junk in legend when cursor is enabled without data in chart
• .redraw() will now force-rebuild the paths, unless false is passed in to opt out
• axis.rotate for user-defined x-axis label rotation

v1.0.6 (04/12/2020)

• fixed scale ranging for a single data points (where dataMin == dataMax)

v1.0.5 (04/05/2020)

• fix esm build regression caused by recent refactor.

v1.0.4 (04/05/2020)

• opts.fmtDate & new “names” arg for uPlot.fmtDate() for redefining month and weekday names.
• .syncRect() for handling plot position changes unrelated to window scroll & resize.
• new post-init series apis: “.addSeries(opts, idx)” and “.delSeries(idx)”

v1.0.3 (03/28/2020)

• TypeScript declarations for API
• better Webpack compat by avoiding a lone use of this
• perf optimization to point rendering
• minor api tweaks (u.idxs -> u.series[i].idxs)

v1.0.2 (03/13/2020)

• for the purpose of auto-adding axis gutters, treat axis.size: 0 the same as axis.show: false. this avoids creating superfluous gutters which would otherwise require explicit disablement via e.g. gutters: {x: 0, y: 0}

v1.0.1 (03/13/2020)

• You can create a custom build that disables any of these features to cut down on lib size and unused code.
• .setSelect() now requires explicit sizing and no longer relies on cursor.drag.x or cursor.drag.y to auto-size the selection size in the drag-perpendicular dimension. the effect is that both width and height must be explicitly set. you can see the effect in this diff: a1f720d. this should have no impact on drag selection performed with a cursor, where cursor.drag is taken into account to infer the perpendicular select size.
• the alpha option of cursor.focus was moved to a new top-level opt focus.alpha. this ensures that .setSeries(2, {focus: true}) can continue to work without relying on cursor opts. cursor.focus.prox remains in place. cursor.focus.alpha should continue to work as a side-effect of the internal option merging, but should not be relied upon going forward.

03/10/2020

• v1.0

10/29/2019

• improve pixel snapping

10/27/2019

• Fix high/low band series toggling