hpcc-js - Viz Layout


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
574Jun 4, 2021Jul 22, 2014Minified + gzip package size for @hpcc-js/layout in KB



This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including Quick Start, Gallery and Tutorials, please visit the main page on GitHub: hpcc-systems/Visualization.

Exported Widgets

Stand-alone HTML Example

        <title>Simple Carousel</title>
        <script src="https://unpkg.com/@hpcc-js/util"></script>
        <script src="https://unpkg.com/@hpcc-js/common"></script>
        <script src="https://unpkg.com/@hpcc-js/api"></script>
        <script src="https://unpkg.com/@hpcc-js/chart"></script>
        <script src="https://unpkg.com/@hpcc-js/layout"></script>
        <div id="placeholder" style="width:800px;height:600px;"></div>
            const columns = ["Subject", "Year 1", "Year 2", "Year 3"];
            const data = [
                ["Geography", 75, 68, 65],
                ["English", 45, 55, -52],
                ["Math", 98, 92, 90],
                ["Science", 66, 60, 72]
            const carousel = new window["@hpcc-js/layout"].Carousel()
                    new window["@hpcc-js/chart"].Pie().columns(columns).data(data),
                    new window["@hpcc-js/chart"].Line().columns(columns).data(data),
                    new window["@hpcc-js/chart"].Column().columns(columns).data(data),
                    new window["@hpcc-js/chart"].Step().columns(columns).data(data)
            var active = 0;
            setInterval(function () {
                carousel.active(++active % 4).render();
            }, 3000);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.