- 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>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: