Skip to content

Quick Start

Jump to bottom Edit New page
Gordon Smith edited this page Aug 12, 2018 · 8 revisions

Include the pre-built framework

The pre-built framework is available at the following locations:

  • CDN Server (easiest, AMD Only)
  • Bower Package Manager (intermediate, AMD + Non-AMD)
  • GitHub Releases (advanced - AMD Only)

Note: The framework comes in two flavors AMD and Non-AMD, the AMD version includes all the dependencies in the pre-built "bundles", while the Non-AMD version will require you to manually include the dependencies (this is easier than it sounds).

Note II: AMD Will only load the required dependencies as needed, IOW the C3 sources will not be loaded until you "require" your first C3 Chart.

CDN Server

AMD

<head>
...
    <script src="http://viz.hpccsystems.com/v1.6.6/dist-amd/hpcc-viz.js"></script>
    <script src="http://viz.hpccsystems.com/v1.6.6/dist-amd/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "http://viz.hpccsystems.com/v1.6.6/dist-amd",
                "font-awesome": "http://viz.hpccsystems.com/v1.6.6/dist-amd/font-awesome/css/font-awesome.min"
            }
        });
    </script>
...
</head>

Non-AMD

While you can technically use the CDN server, you will manually need to resolve all the dependencies and since Bower will do that for you we recommend you use that...

Bower Releases

1 - Install Bower: http://bower.io/#install-bower

2 - Create a local bower.json file:

{
  "name": "wiki_bower",
  "version": "1.0",
  "description": "WIKI Bower",
  "dependencies": {
    "hpcc-viz": "~1.6.6"
  },
  "resolutions": {
    "d3": "~3.5.5"
  }
}

Note: c3#0.4.10 depends on d3#<=3.5.0 which resolved to d3#3.5.0, hpcc-viz#1.6.6 depends on d3#^3.5.5 which resolved to d3#3.5.6 and in this case we force resolutions to using d3#~3.5.5 which resolved to d3#3.5.6

3 - In your web folder run bower install hpcc-viz

AMD

<head>
...
    <script src="../bower_components/hpcc-viz/dist-amd/hpcc-viz.js"></script>
    <script src="../bower_components/hpcc-viz/dist-amd/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "../bower_components/hpcc-viz/dist-amd",
                "font-awesome": "../bower_components/hpcc-viz/dist-amd/font-awesome/css/font-awesome.min"
            }
        });
    </script>
...
</head>

Non-AMD

<head>
...
    <link rel="stylesheet" href="../bower_components/c3/c3.css" />
    <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="../bower_components/hpcc-viz/dist/hpcc-viz.min.css">
    <!--
    Most scripts are optional, include only what you need
    @TODO: should document dependencies in README
    -->
    <script src="../bower_components/d3/d3.js"></script>
    <script src="../bower_components/colorbrewer/colorbrewer.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-common.min.js"></script>

    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-layout.min.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-api.min.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-form.min.js"></script>

    <script src="../bower_components/d3-cloud/d3.layout.cloud.js"></script>
    <script src="../bower_components/simpleheat/simpleheat.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-other.min.js"></script>

    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-chart.min.js"></script>

    <script src="../bower_components/c3/c3.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-c3chart.min.js"></script>

    <script src="https://www.google.com/jsapi"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-google.min.js"></script>

    <script src="../bower_components/amcharts/dist/amcharts/amcharts.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/serial.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/funnel.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/gauge.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/pie.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/radar.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/xy.js"></script>
    <script src="../bower_components/amcharts/dist/amcharts/gantt.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-amchart.min.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-tree.min.js"></script>

    <script src="../bower_components/dagre/index.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-graph.min.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="../bower_components/topojson/topojson.js"></script>
    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-map.min.js"></script>

    <script src="../bower_components/hpcc-viz/dist/hpcc-viz-marshaller.min.js"></script>
...
</head>

GitHub Releases

AMD

This is similar to Bower except you need to manually download the built files from: https://github.com/hpcc-systems/Visualization/releases

<head>
...
    <script src="{path_to_hpccviz}/dist-amd/hpcc-viz.js"></script>
    <script src="{path_to_hpccviz}/dist-amd/hpcc-bundles.js"></script>
    <script>
        require.config({
            paths: {
                "src": "{path_to_hpccviz}/dist-amd",
                "font-awesome": "{path_to_hpccviz}/dist-amd/font-awesome/css/font-awesome.min"
            }
        });
    </script>
...
</head>

Non-AMD

While you can technically use the built files on the GitHub server, you will manually need to resolve all the dependencies and since Bower will do that for you we recommend you use that...

Add a custom footer
Add a custom sidebar
Clone this wiki locally