Download

You can get QuickVis in a few ways:

Download the latest stable release QuickVis Stable
Download the unstable development version QuickVis Unstable
Clone the QuickVis GitHub repo and build it yourself

Then drop it in your page per usual script tag, and have at it!

Sparklines

A sparkline is a small visualization that presents the general shape of variations in historical data. It provides a high-level view of the data without specific details. The lack of detail makes it easier for the user to focus on trends and identify possible anomalies. Sparklines can be grouped together, aiding a user in reviewing lots of information quickly and efficiently.

Minimum Configuration

Pass in a metric name, attach to the DOM, then render with an array of values

let sparky = new quickvis.Sparkline(
    [1, 4, 7, 18, 24, 98, 97, 90],
    { metric: "Horses" }
);
document.body.appendChild(sparky.el);

Other configuration options

Set other configuration properties

let sparky = new quickvis.Sparkline(
    [1, 4, 7, 18, 24, 98, 97, 90],
    {
        metric: "Narwhals",
        style: "area",
        unit: "❤",
        annotation: "out of 100"
    }
);

Automatic formatting of large numbers

Don't worry about absurdly large numbers, they will be formatted for you

let sparky = new quickvis.Sparkline(
    [916575094, 37473322, 783412004,
    787777074, 957795371, 291285024,
    847501582, 265160769, 71343712, 979961954],
    {
        metric: "Camels"
    }
);
document.body.appendChild(sparky.el);

Threshold

If the last value exceeds the threshold, an indicator will appear. If the threshold is not within the current range of data, the threshold will not be visible

let sparky = new quickvis.Sparkline(
    [1, 4, 7, 18, 24, 98, 97, 90],
    {
        metric: "Turtles",
        style: "line",
        threshold: "50"
    }
);
document.body.appendChild(sparky.el);

Force range to include threshold

Graph range is extended to ensure threshold is always visible

let sparky = new quickvis.Sparkline(
    [10, 41, 17, 18, 24, 20, 22, 23],
    {
        metric: "Ducks",
        style: "line",
        threshold: "50",
        thresholdForce: true
    }
);
document.body.appendChild(sparky.el);

Various graph styles

Choose from 4 different styles

["line", "area", "bar", "scatter"].forEach(style => {
    let sparky = new quickvis.Sparkline(
        [1, 4, 7, 18, 24, 98, 97, Math.random() * 100],
        {
            metric: style,
            style: style,
            threshold: 50
        }
    );
    document.body.appendChild(sparky.el);
});

Simple Bar

Simple bars just show a value, but like, a bar!

Single Value

let bar = new Bar(
    57,
    {
        label: "simple",
        capacity: 100,
        threshold: 50
    }
);
document.body.appendChild(bar.el);

Timeseries Data

Pass in an array of values and the simple bar can update to match the focused time, just like sparklines.

let bar = new Bar(
    [65,63,73,82,50,41,93,63,11,57],
    {
        label: "simple",
        capacity: 100,
        threshold: 50
    }
);
document.body.appendChild(bar.el);

Win Loss

Shows binary data over time. 1 represents a win, 0 a loss, and null is a draw.

let wl = new WinLoss(
    [1,0,1,1,1,null,null,1,0,1,1,0,1,1],
    {
        label: "win or lose"
    }
);
document.body.appendChild(wl.el);

Grids

Gridify sparklines, simple bars, and winlosses with no ragrets.

let vis = [
    new Sparkline([98,72,6,18,18,123,95,38,1023,11],
        {label: "horses", threshold: 500}),
    new Sparkline([30,32,33,56,22,46,56,43,24,94],
        {label: "cats"}),
    new Sparkline([30,32,33,56,22,0,0,0,0,94],
        {label: "cat arms", style: "bar", unit: ""}),
    new WinLoss([1,1,1,1,0,0,null,null,0,0,1,1,1,0,1,1],
        {label: "horses2cat"}),
    new WinLoss([1,1,0,0,1,0,1,1,1,1,0,1,1,0,1,1],
        {label: "humans"}),
    new Bar([65,63,73,82,50,41,93,63,11,57], {
        label: "bear bar",
        capacity: 100,
        threshold: 75})
];
let grid = new VisGrid({vis: vis});
document.body.appendChild(grid.el);

Stacked Bars

Stacked Bar graphs provide a quick estimation of how big a part of something is in relation to the other parts.

Minimum Configuration

Put in some values, get a stacked bar graph. Mouseover a box for the value.

let stacked = new quickvis.StackedBar([
    { val: 20000 },
    { val: 30000 },
    { val: 1120 },
    { val: 20000 },
    { val: 105000 }
]);
document.body.appendChild(stacked.el);

Labels

Labels are displayed when possible. Mouseover a box for the label and value

let stacked = new quickvis.StackedBar(
    [
        { name: "Games", val: 20000 },
        { name: "Jim", val: 30000 },
        { name: "Autoexec.bat", val: 1120 },
        { name: "Program Files", val: 20000 },
        { name: "pagefile.sys", val: 105000 }
    ],
    { name: "My Disk" }
);
document.body.appendChild(stacked.el);

Capacity

Set a capacity for the bar graph, and the remaining space is calculated for you.

let stacked = new quickvis.StackedBar(
    [
        { name: "Games", val: 20000 },
        { name: "Jim", val: 30000 },
        { name: "Autoexec.bat", val: 1120 },
        { name: "Program Files", val: 20000 },
        { name: "pagefile.sys", val: 105000 }
    ],
    {
        name: "My Disk",
        capacity: 200000
    }
);
document.body.appendChild(stacked.el);

Threshold

If capacity is present, a threshold can be set to warn of overages.

let stacked = new quickvis.StackedBar(
    [
        { name: "Games", val: 20000 },
        { name: "Jim", val: 30000 },
        { name: "Autoexec.bat", val: 1120 },
        { name: "Program Files", val: 20000 },
        { name: "pagefile.sys", val: 105000 }
    ],
    {
        name: "My Disk",
        capacity: 200000,
        threshold: 200000 * 0.8
    }
);
document.body.appendChild(stacked.el);