Skip to content

Instantly share code, notes, and snippets.

@GordonSmith

GordonSmith/.block

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.
Download ZIP
Tutorial 3: Column Chart
Raw
.block
license: Apache-2.0
Raw
README.md

Tutorial 3: Switch from Pie to Column.

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

require(["src/chart/Column"], function (Column) {
    var widget = new Column()
  ...
Raw
index.css
body {
padding:0px;
margin:0px;
overflow:hidden;
}
#placeholder {
width:100%;
height:100vh;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css">
<script src="http://viz.hpccsystems.com/v1.14.4/dist-amd/hpcc-viz.js"></script>
</head>
<body>
<div id="placeholder">
</div>
<script>
require(["src/chart/Column"], function (Column) {
var widget = new Column() // Create new instance of TextBox
.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
;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment