-
Notifications
You must be signed in to change notification settings - Fork 62
Quick Start
Gordon Smith edited this page Aug 12, 2018
·
8 revisions
All @hpcc-js packages are published to the NPM repository and support AMD, CommonJS, IIFE and ES6 style modules. They also include support for the "unpkg" CDN server.
You can find several boilerplate examples here (tl;dr):
Using the "unpkg" Server + "iife" (link)
The quickest way to get started is to simply reference the required packages directly from "unpkg" servers. The main downside to this, is that you need to manually include all dependencies and need to take care of global namespace pollution:
<head>
...
<script src="https://unpkg.com/@hpcc-js/common"></script>
<script src="https://unpkg.com/@hpcc-js/api"></script>
<script src="https://unpkg.com/@hpcc-js/chart"></script>
<script>
var Column = window["@hpcc-js/chart"].Column;
</script>
...
</head>
<body>
<div id="placeholder">
<!-- Placeholder for Visualization -->
</div>
<script>
var columnChart = 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
;
</script>
</body>Using the "WebPack" + "npm" (link)
Assuming you have "npm" installed on your development machine and an existing project.
npm install @hpcc-js/chart
npm install -d webpack webpack-cli
// src/index.js
import { Bar } from "@hpcc-js/chart"
const bar = new Bar()
.target("placeholder")
.columns(examResults.columns)
.data(examResults.data)
.render()
;var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, "dist"),
filename: 'index.js',
library: "quickstart"
},
mode: "production"
}webpack
...
<body>
...
<div id="placeholder">
</div>
<script src="dist/index.js"></script>
...
</body>
...