j-LiveStats

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

supports dark mode
responsive

Configuration:

width {Number/String} width of svg, you don't need to change it (default: 500) or {String} jQuery selector for obtaining of height
height {Number/String} height of svg, you don't need to change it (default: 100) or {String} jQuery selector for obtaining of height
colors {String} defines custom colors for each key in the form KEY=COLOR,KEY=COLOR,KEY=COLOR
max {Number} a max. limit (default 0 - disabled)
axislines {Number/String} a count of X axis lines (default: 20) or auto automatically counts count of lines
marginW {Number} a margin for width
marginH {Number} a margin for height

Use it with <ui-component name="livestats">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="max-width:400px">
	<ui-component name="livestats" path="data"></ui-component>
</div>

<script>
var data = {};

setInterval(function() {
	data.count = Math.random() * 100 >> 0;
	data.users = Math.random() * 100 >> 0;
	data.orders = Math.random() * 100 >> 0;
	UPD('data');
}, 500);
</script>