How to Visualize Time Series Data With μPlot Chart Library

Visualize-Time-Series-Data-With-UPlot

μPlot.js – Fast, memory-saving graphic library based on 2D Canvas for quickly mapping time series, lines, areas, and bar charts. Time series data is a lightweight, interactive, scalable, high-performance chart library to visualize any time a sequence of knowledge factors listed in time order utilizing Canvas API.

time series data download, time series data example, plotly time series javascript, javascript time series library, plotly go time series

More options:

  • Crosshair cursor.
  • Configurable x and y-axis.
  • Legend with reside values.
  • Dynamic knowledge fetching.

How to make use of 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 collection data.

const data = [

      // x-values (Unix timestamps)
      [1566458800, 1566452560, 1566460860, 1538464460], 

      // 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 instance 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
}

5. 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
}

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

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

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

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

Visualize Time Series Data With μPlot Library, How Do You Visualize Time, Time-Series Data Examples


See Demo And Download

Official Website(leeoniya): Click Here

This superior jQuery/javascript plugin is developed by leeoniya. For extra Advanced usage, please go to the official website.

Share