Skip to content

Instantly share code, notes, and snippets.

@GordonSmith
Last active August 8, 2018 09:00
Show Gist options
  • Save GordonSmith/6c79c4246d10875ec89faec88c4b55e9 to your computer and use it in GitHub Desktop.
Save GordonSmith/6c79c4246d10875ec89faec88c4b55e9 to your computer and use it in GitHub Desktop.
Tutorial 3: Column Chart
license: Apache-2.0

Tutorial 3: Switch from Pie to Column.

So Pie Charts are so last year, lets switch it up to a Column Chart:

1 - Import the required visualization:

import { Column } from "@hpcc-js/chart";

2 - Instantiate and render the visualisation:

var widget = new Column()           //  Create new instance of Column
    .target("placeholder")          //  Nominate target on web page 
    .columns(["Subject", "Result"]) //  Set "Columns"
    .data([                         //  Set "Data"
        ["English", 45],
        ["Irish", 28],
        ["Math", 98],
        ["Geography", 48],
        ["Science", 82]
    ])
    .render()                       //  Render
    ;

Note 1: The only difference between this example and the previous one is the change from "Pie" to "Column" this demonstrates one of the key features of the @hpcc-js visualization framework - the ability to switch easily between visualisations for a single data "shape". Note 2: To discover all the available "published properties" for the Column Widget see: Dermatology-Column and enable the "Properties" view.

body {
padding:0px;
margin:0px;
overflow:hidden;
}
#placeholder {
width:100%;
height:100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Column Chart</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./index.css">
<!-- GetLibs: An in-browser module loader for quick demos -->
<script src="https://unpkg.com/getlibs"></script>
</head>
<body>
<div id="placeholder">
<!-- Placeholder for Visualization -->
</div>
<script>
// Load Example JavaScript (via GetLibs)---
System.import('./index.js');
</script>
</body>
</html>
import { Column } from "@hpcc-js/chart";
var widget = new Column() // Create new instance of Column
.target("placeholder") // Nominate target on web page
.columns(["Subject", "Result"]) // Set "Columns"
.data([ // Set "Data"
["English", 45],
["Irish", 28],
["Math", 98],
["Geography", 48],
["Science", 82]
])
.render() // Render
;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment