GordonSmith/.block

## .block
license: Apache-2.0

## README.md

      
    Raw
  

              README.md
            
          
    Tutorial 2:  A simple "2D" Chart.
Similar to the Hello World tutorial, but now we introduce some data:
1 - Import the required visualization:
import { Pie } from "@hpcc-js/chart";
2 - Instantiate and render the visualisation:
var widget = new Pie()              //  Create new instance of Pie
    .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
    ;
Think of the above pattern as a "spreadsheet" of data, with the "columns" being row 0 and the "data" being the rest of the spreadsheet.
Note 1:  The reason for two distinct methods "columns" + "data", is to faciliate the initial render of a chart (with known columns), while the data payload could arrive at any later time (think dynamic dashboard).
Note 2:  To discover all the available "published properties" for the Pie Widget see:  Dermatology-Pie and enable the "Properties" view.

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

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

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

<head>
    <title>Pie 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>

## index.js
import { Pie } from "@hpcc-js/chart";

var widget = new Pie()              //  Create new instance of Pie
    .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
    ;

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

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

	#placeholder {
	width:100%;
	height:100vh;
	}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Pie 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 { Pie } from "@hpcc-js/chart";

	var widget = new Pie() // Create new instance of Pie
	.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
	;