GordonSmith/.block

## .block
license: Apache-2.0

## README.md

      
    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:
1 - Import the required visualization:
import { Column } from "@hpcc-js/chart";
2 - Instantiate and render the visualisation:
var widget = new Column()           //  Create new instance of Column
    .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
    ;
Note 1:  The only difference between this example and the previous one is the change from "Pie" to "Column" this demonstrates one of the key features of the @hpcc-js visualization framework - the ability to switch easily between visualisations for a single data "shape".
Note 2:  To discover all the available "published properties" for the Column Widget see:  Dermatology-Column 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>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>

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

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

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