Skip to content

Quick Start

Jump to bottom Edit New page
Gordon Smith edited this page Sep 5, 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:

Using "iife" with the "unpkg" Server (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 "iife" with "npm" (link)

Rather than relying on unpkg to cache and resolve the libraries from the npm repository, this example downloads the libraries to the local development folder using the node package manger (npm) command line tool.

  1. Install npm - the easiest way to do this is to install the latest LTS version of Node JS from: https://nodejs.org/en/download
  2. Create a new "package.json" file in the root folder for your project (if it doesn't already exist):
npm init

Simply selecting the defaults for all the prompts should produce a bare-bones package.json file:

{
  "name": "@hpcc-js/iife_npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
  1. Install the libraries you need (npm will automatically download all dependencies for you). The -s option will save a reference to it in your package.json:
npm install -s @hpcc-js/chart

Once completed your package.json file will now contain a versioned reference to your new dependency:

{
  "name": "@hpcc-js/iife_npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@hpcc-js/chart": "^2.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now we can replace any references to "unpkg" from the previous example, with the locally installed equivalent files:

<head>
...
    <script src="node_modules/@hpcc-js/common/dist/index.min.js"></script>
    <script src="node_modules/@hpcc-js/api/dist/index.min.js"></script>
    <script src="node_modules/@hpcc-js/chart/dist/index.min.js"></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.

Install dependencies:

npm install @hpcc-js/chart
npm install -d webpack webpack-cli

Include a chart:

//  src/index.js
import { Bar } from "@hpcc-js/chart"

const bar = new Bar()
    .target("placeholder")
    .columns(examResults.columns)
    .data(examResults.data)
    .render()
    ;

Create a WebPack configuration file:

var path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'index.js',
        library: "quickstart"
    },
    mode: "production"
}

Run WebPack

webpack

Include the bundled sources into your web page:

...
<body>
...
    <div id="placeholder">
    </div>
    <script src="dist/index.js"></script>
...
</body>
...
Add a custom footer
Add a custom sidebar
Clone this wiki locally