GordonSmith/.block

## .block
license: Apache-2.0

## README.md

      
    Raw
  

              README.md
            
          
    Tutorial 6:  HPCC Platform Roxie Data + Column Chart
Fetching data from a HPCC Platform Roxie Query and rendering it in a Visualization:
1 - Create an empty Column chart and render it:
var columnChart = new Column()
    .target("placeholder")
    .columns(["Location", "male"])
    .yAxisTitle("male")
    .render()
    ;
2 - Attach to an existing Query:
var query = Query.attach({ baseUrl: "https://play.hpccsystems.com:18002" }, "roxie", "ie_pop");
3 - Submit a request to the Roxie service (returns a Promise):
query.submit({
    pop_type: popType  //  male, female, total
}).then(response => {
    ...
});
4 - Map the rows to a data array:
var data = response.ie_population.map(function (row) { return [row.location, row.total]; });
5 - Update the Column chart with the mapped data:
columnChart
    .columns(["Location", popType])
    .yAxisTitle(popType)
    .data(data)
    .render()
    ;

  
## index.css
body {
    padding:0px;
    margin:0px;
    overflow:hidden;
}

#placeholder {
    width:100%;
    height:100vh;
}

.topcorner {
    position: absolute;
    top: 8px;
    right: 8px;
}

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>Roxie 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>
    <select id="popType" class="topcorner" onchange="doQuery()">
        <option value="male">Males</option>
        <option value="female">Females</option>
        <option value="total">Total</option>
    </select>
    <script>
        //  Load Example JavaScript  (via GetLibs)---
        System.import('./index.js');
    </script>
</body>

</html>

## index.js
import { Column } from "@hpcc-js/chart";
import { Query } from "@hpcc-js/comms";

var columnChart = new Column()
    .target("placeholder")
    .columns(["Location", "male"])
    .yAxisTitle("male")
    .render()
    ;

var query = Query.attach({ baseUrl: "https://play.hpccsystems.com:18002" }, "roxie", "ie_pop");

window.doQuery = function () {
    const popType = document.getElementById("popType").value;
    query.submit({
        pop_type: popType  //  male, female, total
    }).then(response => {
        var data = response.ie_population.map(function (row) { return [row.location, row.total]; });
        columnChart
            .columns(["Location", popType])
            .yAxisTitle(popType)
            .data(data)
            .render()
            ;
    });
}

window.doQuery();

## preview.png

      
    Raw
  

              preview.png
            
          
## query.ecl
EXPORT SOAPenabling() := FUNCTION
	varstring pop_type := 'total' : stored('pop_type');

	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'}, {'Laoighis', '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 County', '198658', '201144', '399802'}, {'Kerry', '72628', '72873', '145502'}, {'Limerick City', '27947', '29159', '57106'}, {'Limerick County', '67868', '66835', '134703'}, {'North Tipperary', '35340', '34982', '70322'}, {'South Tipperary', '44244', '44188', '88432'}, {'Waterford City', '22921', '23811', '46732'}, {'Waterford County', '33543', '33520', '67063'}, {'Galway City', '36514', '39015', '75529'}, {'Galway County', '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);

	r2 := record
		string location;
		unsigned4 total;
	end;

	r2 totTrans(r l) := transform
		self.location := l.location;
		self.total := map (pop_type = 'total' => l.total, pop_type = 'male' => l.males, pop_type = 'female' => l.females, 0);
	end;

  return output(project(d, totTrans(LEFT)), named('ie_population'));
end;

SOAPEnabling();


## thumbnail.png

      
    Raw
  

              thumbnail.png
	body {
	padding:0px;
	margin:0px;
	overflow:hidden;
	}

	#placeholder {
	width:100%;
	height:100vh;
	}

	.topcorner {
	position: absolute;
	top: 8px;
	right: 8px;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Roxie 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>
	<select id="popType" class="topcorner" onchange="doQuery()">
	<option value="male">Males</option>
	<option value="female">Females</option>
	<option value="total">Total</option>
	</select>
	<script>
	// Load Example JavaScript (via GetLibs)---
	System.import('./index.js');
	</script>
	</body>

	</html>
	import { Column } from "@hpcc-js/chart";
	import { Query } from "@hpcc-js/comms";

	var columnChart = new Column()
	.target("placeholder")
	.columns(["Location", "male"])
	.yAxisTitle("male")
	.render()
	;

	var query = Query.attach({ baseUrl: "https://play.hpccsystems.com:18002" }, "roxie", "ie_pop");

	window.doQuery = function () {
	const popType = document.getElementById("popType").value;
	query.submit({
	pop_type: popType // male, female, total
	}).then(response => {
	var data = response.ie_population.map(function (row) { return [row.location, row.total]; });
	columnChart
	.columns(["Location", popType])
	.yAxisTitle(popType)
	.data(data)
	.render()
	;
	});
	}

	window.doQuery();
	EXPORT SOAPenabling() := FUNCTION
	varstring pop_type := 'total' : stored('pop_type');

	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'}, {'Laoighis', '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 County', '198658', '201144', '399802'}, {'Kerry', '72628', '72873', '145502'}, {'Limerick City', '27947', '29159', '57106'}, {'Limerick County', '67868', '66835', '134703'}, {'North Tipperary', '35340', '34982', '70322'}, {'South Tipperary', '44244', '44188', '88432'}, {'Waterford City', '22921', '23811', '46732'}, {'Waterford County', '33543', '33520', '67063'}, {'Galway City', '36514', '39015', '75529'}, {'Galway County', '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);

	r2 := record
	string location;
	unsigned4 total;
	end;

	r2 totTrans(r l) := transform
	self.location := l.location;
	self.total := map (pop_type = 'total' => l.total, pop_type = 'male' => l.males, pop_type = 'female' => l.females, 0);
	end;

	return output(project(d, totTrans(LEFT)), named('ie_population'));
	end;

	SOAPEnabling();