Skip to content

Instantly share code, notes, and snippets.

@GordonSmith
Last active October 21, 2018 06:54
Show Gist options
  • Save GordonSmith/71e28d9345fe6c3e64cf to your computer and use it in GitHub Desktop.
Save GordonSmith/71e28d9345fe6c3e64cf to your computer and use it in GitHub Desktop.
Tutorial 5: HPCC Platform Workunit Data + Column Chart
license: Apache-2.0

Tutorial 5: HPCC Platform Workunit Data + Column Chart

Fetching data from a HPCC Platform Workunit and rendering it in a Visualization:

1 - Create an empty Column chart and render it:

var columnChart = new Column()
    .target("placeholder")
    .columns(["Location", "Males", "Females", "Total"])
    .yAxisTitle("Population")
    .render()
    ;

2 - Attach to an existing Workunit:

var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20160918-054119");

3 - Fetch a list of the Workunit results (returns a Promise)

wu.fetchResults().then(results => { ... });

4 - Pick the first result and fetch its content (returns a Promise)

results[0].fetchRows().then(rows => {...});

5 - Map the rows to a data array:

var data = rows.map(row => [row.location, row.males, row.females, row.total]);

6 - Update the Column chart with the mapped data:

columnChart
    .data(data)
    .render()
    ;
r := record
string location;
unsigned4 males;
unsigned4 females;
unsigned4 total;
end;
d := dataset([{'Carlow', '27431', '27181', '54612'}, {'Dublin City', '257303', '270309', '527612'}, {'Dun Laoghaire-Rathdown', '98567', '107694', '206261'}, {'Fingal', '134488', '139503', '273991'}, {'South Dublin', '129544', '135661', '265205'}, {'Kildare', '104658', '105654', '210312'}, {'Kilkenny', '47788', '47631', '95419'}, {'Laois', '40587', '39972', '80559'}, {'Longford', '19649', '19351', '39000'}, {'Louth', '60763', '62134', '122897'}, {'Meath', '91910', '92225', '184135'}, {'Offaly', '38430', '38257', '76687'}, {'Westmeath', '42783', '43381', '86164'}, {'Wexford', '71909', '73411', '145320'}, {'Wicklow', '67542', '69098', '136640'}, {'Clare', '58298', '58898', '117196'}, {'Cork City', '58812', '60418', '119230'}, {'Cork', '198658', '201144', '399802'}, {'Kerry', '72628', '72873', '145502'}, {'Limerick City', '27947', '29159', '57106'}, {'Limerick', '67868', '66835', '134703'}, {'North Tipperary', '35340', '34982', '70322'}, {'South Tipperary', '44244', '44188', '88432'}, {'Waterford City', '22921', '23811', '46732'}, {'Waterford', '33543', '33520', '67063'}, {'Galway City', '36514', '39015', '75529'}, {'Galway', '88244', '86880', '175124'}, {'Leitrim', '16144', '15654', '31798'}, {'Mayo', '65420', '65218', '130638'}, {'Roscommon', '32353', '31712', '64065'}, {'Sligo', '32435', '32958', '65393'}, {'Cavan', '37013', '36170', '73183'}, {'Donegal', '80523', '80614', '161137'}, {'Monaghan', '30441', '30042', '60483'}], r);
output(d, named('ie_population'));
body {
padding:0px;
margin:0px;
overflow:hidden;
}
#placeholder {
width:100%;
height:100vh;
}
.topcorner {
position: absolute;
top: 8px;
right: 8px;
}
<!DOCTYPE html>
<html>
<head>
<title>Workunit 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";
import { Workunit } from "@hpcc-js/comms";
var columnChart = new Column()
.target("placeholder")
.columns(["Location", "Males", "Females", "Total"])
.yAxisTitle("Population")
.render()
;
var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20181021-065153");
wu.fetchResults().then(results => {
return results[0].fetchRows();
}).then(rows => {
var data = rows.map(row => [row.location, row.males, row.females, row.total]);
columnChart
.data(data)
.render()
;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment