GordonSmith · August 8, 2018 09:17
diff --git a/.block b/.block
 license: Apache-2.0
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
 body {
    padding:0px; 
    margin:0px; 
    overflow:hidden;
 }

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

 .topcorner {
    position: absolute;
    top: 8px;
    right: 8px;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Multi 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="doRender(this.value);">
        <option value="Area">Area</option>
        <option value="Bar">Bar</option>
        <option value="Bubble">Bubble</option>
        <option value="Contour">Contour</option>
        <option value="Column" selected="selected">Column</option>
        <option value="HexBin">HexBin</option>
        <option value="Line">Line</option>
        <option value="Pie">Pie</option>
        <option value="Scatter">Scatter</option>
        <option value="Radar">Radar</option>
        <option value="Step">Step</option>
        <option value="WordCloud">Word Cloud</option>
    </select>
    <script>
        //  Load Example JavaScript  (via GetLibs)---
        System.import('./index.js');
    </script>
 </body>

 </html>
diff --git a/index.js b/index.js
 import { select as d3Select } from "d3-selection";
 import * as hpccChart from "@hpcc-js/chart";

 function doRender(chartName) {
    d3Select("#placeholder").html("");  //  Clear existing DOM Node
    new hpccChart[chartName]()          //  Create new instance of Widget
        .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
        ;
 }

 doRender("Column");                     //  Render Column by default

 window.doRender = doRender;             //  Expose to global namespace
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/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>Multi 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="doRender(this.value);">
	<option value="Area">Area</option>
	<option value="Bar">Bar</option>
	<option value="Bubble">Bubble</option>
	<option value="Contour">Contour</option>
	<option value="Column" selected="selected">Column</option>
	<option value="HexBin">HexBin</option>
	<option value="Line">Line</option>
	<option value="Pie">Pie</option>
	<option value="Scatter">Scatter</option>
	<option value="Radar">Radar</option>
	<option value="Step">Step</option>
	<option value="WordCloud">Word Cloud</option>
	</select>
	<script>
	// Load Example JavaScript (via GetLibs)---
	System.import('./index.js');
	</script>
	</body>

	</html>
	import { select as d3Select } from "d3-selection";
	import * as hpccChart from "@hpcc-js/chart";

	function doRender(chartName) {
	d3Select("#placeholder").html(""); // Clear existing DOM Node
	new hpccChart[chartName]() // Create new instance of Widget
	.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
	;
	}

	doRender("Column"); // Render Column by default

	window.doRender = doRender; // Expose to global namespace