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 = [

      // x-values (Unix timestamps)
      [1566453600, 1566457260, 1566460860, 1566464460], 

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

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

      // data series 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,

    // chart title
    title: "My Chart",

    // unique chart ID
    id: "chart1",

    // additional CSS class(es)
    class: "my-chart",

    // determines how to present your data
    series: [
      {},
      {
        // initial toggled state (optional)
        show: true,
        spanGaps: false,
        // in-legend display
        label: "RAM",
        value: (self, rawValue) => "$" + rawValue.toFixed(2),
        // series style
        stroke: "red",
        width: 1,
        fill: "rgba(255, 0, 0, 0.3)",
        dash: [10, 5],
      }
    ],

    // 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,
        },
      ],
    }
}, data, document.body);

4. 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.2.2 (09/29/2020)

• fix axis splitting for year+ incrs to account for leap years.
• improve empty chart creation. init default x/y scales without relying on x/y series presence.
• add raw xValue arg to cursor.dataIdx() to simplify adjustment of the hovered points.

v1.2.1 (09/18/2020)

• fix ESM build
• decouple axis splits filtering from splits formatting (add axis.filter(), axis.grid.filter(), axis.ticks.filter())
• fix series.fill for log scales trying to fill to non-existent 0
• log base 2 support as axis.log: 10
• fix rounding errors in rangeLog() which threw an infinite loop for values < 1e-3
• some internal cleanup and optimizations

v1.2.0 (09/16/2020)

• [BREAKING] expansion and improvement of the temporal axis.values config array
• fix a long-standing bug where series hover points were cut off at plot edges
• {select: {over: true}} ability to choose whether .u-select is placed inside .u-over as previously, or .u-under. this is now relevant since .u-over is no longer overflow: hidden and it’s possible for a programatically-set selection inside .u-over to visually overflow the plot bounds
• series.auto: false can be used to exclude a series’ data from being considered when auto-ranging its y scale
• a bunch of fixes for plots with no datapoints, or single datapoint
• much-improved line-smoothing demo using Centripetal Catmull-Rom Spline algo

v1.1.2 (08/25/2020)

• fix: DST rollover periods were dropping axis splits when zoomed in to <= 1hr resolutions.
• fix: more accurate floating point math when generating axis splits with decimals.
• fix: regression caused by precision increase and add more guards against infinite loops.
• fix-demo: tooltips-closest failed to toggle tooltip display on plot re-entry.
• fix-demo: tooltips-closest was drawing interpolated markers outside plotting area when zoomed in.

v1.1.1 (08/22/2020)

• new: series.fillTo() API to adjust the area-fill baseline (instead of always 0)
• new: cursor.move callback to refine or snap cursor position
• new: legend.live: false option to disable live cursor values (static legend)
• fix: force update legend for setData() calls, even when cursor.idx is unchanged
• fix: also defocus hovered points when defocusing inactive series
• fix: typings & demos

v1.1.0 (08/03/2020)

• new: logarithmic scales (via scale.distr: 3)
• new: uPlot.rangeLog() and uPlot.fmtNum() util funcs
• new: cursor.dataIdx can now transform the hovered idx to a different data idx used for legend display and cursor hover points
• chg: all CSS classes are now prefixed with u-. also, some legend classes got better names
• chg: axis functions now receive axisIdx as an argument
• chg: axis.split option renamed to axis.splits
• fix: saner & more consistent scale padding (ranging) behavior

v1.0.11 (06/16/2020)

• fix for data gaps (null values) at start and end of datasets when spanGaps: true
• fix for plots with leading/trailing gaps and only single data point
• fix for initially empty-data plots improperly retaining initial y-scale min/max after first setData() call
• fix for deleting a series when legend.show: false

v1.0.10 (06/08/2020)

• fix path filling oddities when spanGaps was used with leading or trailing null data
• fix an init bug by setting default y scales
• perf optimizations for mousemove & legend display

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