Visualization Framework

Demo/Test Page and its source
Dermatology Test Page and its source
[Wiki] (https://github.com/hpcc-systems/Visualization/wiki)
[Quick Start] (https://github.com/hpcc-systems/Visualization/wiki/My-First-Visualization)

The goal of the HPCC Visualisation Framework is to provide a comprehensive set of visualizations, adhering to a consistent set of interfaces. It includes wrappers for third party chart libraries (Google, C3 Charts, AM Charts etc.) as well as home grown visualizations (watch this space). It also adds a set of connectors and marshallers to make connecting visualizations to the HPCC Platform a trivial excercise.

The obligatory Hello World example

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://viz.hpccsystems.com/v1.6.6/dist-amd/hpcc-viz.js"></script>
    <script src="http://viz.hpccsystems.com/v1.6.6/dist-amd/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "http://viz.hpccsystems.com/v1.6.6/dist-amd",
                "font-awesome": "http://viz.hpccsystems.com/v1.6.6/dist-amd/font-awesome/css/font-awesome.min"
            }
        });
    </script>
</head>
<body>
    <div id="helloWorld" style="width:100%; height:100vh">
    </div>
    <script>
        require(["src/common/TextBox"], function (TextBox) {
            var helloWorld = new TextBox()
                .target("helloWorld")
                .text("Hello\nWorld!")
                .render()
            ;
        });
    </script>
</body>
</html>

Standing on the back of giants

None of this would would be possible without the great work of others. The widgets/lib folder includes the work from:

While widgets/src also includes wrappers for CDN hosted visualizations:

jchambers-ln/Visualization

Visualization Framework

The obligatory Hello World example

Standing on the back of giants