Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 72 additions & 69 deletions demos/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.demo {
padding: 0.5ex;
}

h1 {
font-size: 24px;
}
Expand All @@ -32,87 +36,86 @@
}

a {
display: block;
padding: 4px;
}

</style>
</head>
<body>
<h1>μPlot Demos</h1>

<a href="../bench/uPlot.html">Multi time-series (two scales)</a>
<a href="area-fill.html">Areas chart</a>
<a href="grid-over-series.html">Grid over series</a>
<a href="axis-control.html">Axis positioning, metrics &amp; style</a>
<a href="axis-autosize.html">Axis auto-size</a>
<a href="dependent-scale.html">Dependent scales</a>
<a href="focus-cursor.html">Function graphing &amp; focus closest series</a>
<a href="high-low-bands.html">High/Low bands</a>
<a href="sparklines.html">Sparklines</a>
<a href="sparklines-bars.html">Sparklines (w/ floating bars)</a>
<a href="stream-data.html">Dynamic data update / streaming</a>
<a href="pixel-align.html">Disable pixel alignment (avoid pixel jitter when streaming)</a>
<a href="sine-stream.html">Sine wave stream (3,600 points lookback @ 60Hz)</a>
<a href="sync-cursor.html">Sync cursor, toggle &amp; focus across multiple charts</a>
<a href="cursor-bind.html">Dynamically toggle cursor between select-and-zoom &amp; select-only</a>
<a href="tooltips.html">Tooltips plugin (basic)</a>
<a href="cursor-tooltip.html">Tooltips plugin (<em>placement.js</em> for positioning &amp; containment)</a>
<a href="tooltips-closest.html">Tooltip on closest datapoint w/click, and moar!</a>
<a href="nearest-non-null.html">Cursor hover nearest non-null</a>
<a href="timezones-dst.html">Proper timezone &amp; DST handling</a>
<a href="missing-data.html">Missing data &amp; gaps</a>
<a href="path-gap-clip.html">Sparse data alignment &amp; null fills</a>
<a href="thin-bars-stroke-fill.html">Thin bars stroke &amp; fill</a>
<a href="months.html">Variable month widths</a>
<a href="resize.html">Resize with window</a>
<a href="soft-minmax.html">Soft min/max</a>
<a href="time-periods.html">Compare several overlaid time periods &amp; stacked legend</a>
<a href="log-scales.html">Logarithmic scales (log10, real data)</a>
<a href="log-scales2.html">Logarithmic scales (log2, log10, axis formatters)</a>
<a href="custom-scales.html">Custom scales (Weibull, etc.)</a>
<a href="arcsinh-scales.html">Inverse hyperbolic sine scales</a>
<a href="data-smoothing.html">Data smoothing (moving avg)</a>
<a href="nice-scale.html">"Nice" scale</a>
<a href="scale-padding.html">Scale padding test</a>
<a href="no-data.html">No data</a>
<a href="y-shifted-series.html">Y-shifted series</a>
<a href="points.html">Points density control</a>
<a href="line-paths.html">Bars, stepped &amp; smooth lines</a>
<a href="gradients.html">Gradient fills &amp; strokes (vt &amp; hz, scale-affixed &amp; data-relative)</a>
<a href="scales-dir-ori.html">Scale direction &amp; orientation (e.g. rotation, inversion)</a>
<a href="y-scale-drag.html">Draggable y scales via axes</a>
<a href="timeseries-discrete.html">Discrete &amp; shifted series w/sync</a>
<a href="update-cursor-select-resize.html">Maintains location of cursor/select/hoverPts during resize (test)</a>
<a href="axis-indicators.html">Plugin to render hovered values on axes</a>
<div class="demo"><a href="../bench/uPlot.html">Multi time-series (two scales)</a></div>
<div class="demo"><a href="area-fill.html">Areas chart</a></div>
<div class="demo"><a href="grid-over-series.html">Grid over series</a></div>
<div class="demo"><a href="axis-control.html">Axis positioning, metrics &amp; style</a></div>
<div class="demo"><a href="axis-autosize.html">Axis auto-size</a></div>
<div class="demo"><a href="dependent-scale.html">Dependent scales</a></div>
<div class="demo"><a href="focus-cursor.html">Function graphing &amp; focus closest series</a></div>
<div class="demo"><a href="high-low-bands.html">High/Low bands</a></div>
<div class="demo"><a href="sparklines.html">Sparklines</a></div>
<div class="demo"><a href="sparklines-bars.html">Sparklines (w/ floating bars)</a></div>
<div class="demo"><a href="stream-data.html">Dynamic data update / streaming</a></div>
<div class="demo"><a href="pixel-align.html">Disable pixel alignment (avoid pixel jitter when streaming)</a></div>
<div class="demo"><a href="sine-stream.html">Sine wave stream (3,600 points lookback @ 60Hz)</a></div>
<div class="demo"><a href="sync-cursor.html">Sync cursor, toggle &amp; focus across multiple charts</a></div>
<div class="demo"><a href="cursor-bind.html">Dynamically toggle cursor between select-and-zoom &amp; select-only</a></div>
<div class="demo"><a href="tooltips.html">Tooltips plugin (basic)</a></div>
<div class="demo"><a href="cursor-tooltip.html">Tooltips plugin (<em>placement.js</em> for positioning &amp; containment)</a></div>
<div class="demo"><a href="tooltips-closest.html">Tooltip on closest datapoint w/click, and moar!</a></div>
<div class="demo"><a href="nearest-non-null.html">Cursor hover nearest non-null</a></div>
<div class="demo"><a href="timezones-dst.html">Proper timezone &amp; DST handling</a></div>
<div class="demo"><a href="missing-data.html">Missing data &amp; gaps</a></div>
<div class="demo"><a href="path-gap-clip.html">Sparse data alignment &amp; null fills</a></div>
<div class="demo"><a href="thin-bars-stroke-fill.html">Thin bars stroke &amp; fill</a></div>
<div class="demo"><a href="months.html">Variable month widths</a></div>
<div class="demo"><a href="resize.html">Resize with window</a></div>
<div class="demo"><a href="soft-minmax.html">Soft min/max</a></div>
<div class="demo"><a href="time-periods.html">Compare several overlaid time periods &amp; stacked legend</a></div>
<div class="demo"><a href="log-scales.html">Logarithmic scales (log10, real data)</a></div>
<div class="demo"><a href="log-scales2.html">Logarithmic scales (log2, log10, axis formatters)</a></div>
<div class="demo"><a href="custom-scales.html">Custom scales (Weibull, etc.)</a></div>
<div class="demo"><a href="arcsinh-scales.html">Inverse hyperbolic sine scales</a></div>
<div class="demo"><a href="data-smoothing.html">Data smoothing (moving avg)</a></div>
<div class="demo"><a href="nice-scale.html">"Nice" scale</a></div>
<div class="demo"><a href="scale-padding.html">Scale padding test</a></div>
<div class="demo"><a href="no-data.html">No data</a></div>
<div class="demo"><a href="y-shifted-series.html">Y-shifted series</a></div>
<div class="demo"><a href="points.html">Points density control</a></div>
<div class="demo"><a href="line-paths.html">Bars, stepped &amp; smooth lines</a></div>
<div class="demo"><a href="gradients.html">Gradient fills &amp; strokes (vt &amp; hz, scale-affixed &amp; data-relative)</a></div>
<div class="demo"><a href="scales-dir-ori.html">Scale direction &amp; orientation (e.g. rotation, inversion)</a></div>
<div class="demo"><a href="y-scale-drag.html">Draggable y scales via axes</a></div>
<div class="demo"><a href="timeseries-discrete.html">Discrete &amp; shifted series w/sync</a></div>
<div class="demo"><a href="update-cursor-select-resize.html">Maintains location of cursor/select/hoverPts during resize (test)</a></div>
<div class="demo"><a href="axis-indicators.html">Plugin to render hovered values on axes</a></div>

<a href="months-ru.html">Russian month names on date/time axis</a>
<a href="add-del-series.html">Dynamically add or delete series</a>
<a href="scroll-sync.html">Sync chart position when inside a scrollable container</a>
<div class="demo"><a href="months-ru.html">Russian month names on date/time axis</a></div>
<div class="demo"><a href="add-del-series.html">Dynamically add or delete series</a></div>
<div class="demo"><a href="scroll-sync.html">Sync chart position when inside a scrollable container</a></div>

<h2>Drawing</h2>
<a href="trendlines.html">Trendlines from zoomed range &amp; zoom snapping</a>
<a href="candlestick-ohlc.html">OHLC plugin + legend-as-tooltip plugin</a>
<a href="box-whisker.html">Box &amp; whisker plugin + legend-as-tooltip plugin</a>
<a href="draw-hooks.html">Draw hooks &amp; (custom points)</a>
<a href="multi-bars.html">Multi-series bars plugin</a>
<a href="bars-grouped-stacked.html">Multi-series bars plugin (stacked)</a>
<a href="timeline-discrete.html">Timeline/discrete state sequence plugin</a>
<a href="latency-heatmap.html">Latency Heatmap</a>
<a href="scatter.html">Scatter &amp; Bubble</a>
<a href="measure-datums.html">Measurement datums via keyboard</a>
<a href="wind-direction.html">Wind direction renderer</a>
<a href="svg-image.html">Render to image/png</a>
<div class="demo"><a href="trendlines.html">Trendlines from zoomed range &amp; zoom snapping</a></div>
<div class="demo"><a href="candlestick-ohlc.html">OHLC plugin + legend-as-tooltip plugin</a></div>
<div class="demo"><a href="box-whisker.html">Box &amp; whisker plugin + legend-as-tooltip plugin</a></div>
<div class="demo"><a href="draw-hooks.html">Draw hooks &amp; (custom points)</a></div>
<div class="demo"><a href="multi-bars.html">Multi-series bars plugin</a></div>
<div class="demo"><a href="bars-grouped-stacked.html">Multi-series bars plugin (stacked)</a></div>
<div class="demo"><a href="timeline-discrete.html">Timeline/discrete state sequence plugin</a></div>
<div class="demo"><a href="latency-heatmap.html">Latency Heatmap</a></div>
<div class="demo"><a href="scatter.html">Scatter &amp; Bubble</a></div>
<div class="demo"><a href="measure-datums.html">Measurement datums via keyboard</a></div>
<div class="demo"><a href="wind-direction.html">Wind direction renderer</a></div>
<div class="demo"><a href="svg-image.html">Render to image/png</a></div>

<h2>Zooming</h2>
<a href="zoom-variations.html">Different zoom variants (adaptive, uni/omnidirectional)</a>
<a href="zoom-fetch.html">Fetch &amp; update data on zoom</a>
<a href="zoom-ranger.html">Secondary sync'd overview chart for x-axis zoom ranging</a>
<a href="zoom-ranger-grips.html">Secondary sync'd overview chart for x-axis zoom ranging (with grips)</a>
<a href="zoom-ranger-xy.html">Secondary sync'd overview chart for x/y-axis zoom ranging</a>
<a href="zoom-touch.html">Pinch zooming/panning plugin</a>
<a href="zoom-wheel.html">Mouswheel zooming plugin</a>
<div class="demo"><a href="zoom-variations.html">Different zoom variants (adaptive, uni/omnidirectional)</a></div>
<div class="demo"><a href="zoom-fetch.html">Fetch &amp; update data on zoom</a></div>
<div class="demo"><a href="zoom-ranger.html">Secondary sync'd overview chart for x-axis zoom ranging</a></div>
<div class="demo"><a href="zoom-ranger-grips.html">Secondary sync'd overview chart for x-axis zoom ranging (with grips)</a></div>
<div class="demo"><a href="zoom-ranger-xy.html">Secondary sync'd overview chart for x/y-axis zoom ranging</a></div>
<div class="demo"><a href="zoom-touch.html">Pinch zooming/panning plugin</a></div>
<div class="demo"><a href="zoom-wheel.html">Mouswheel zooming plugin</a></div>

<h2>Junk</h2>
<a href="stacked-series.html">Stacked series</a>
<div class="demo"><a href="stacked-series.html">Stacked series</a></div>
</body>
</html>