Embedding pgVis Renderer

To render a pgVis visualisation in your website, you need to include the pgVis stylesheet and renderer JS library.

Minimal HTML page:

        <!-- The pgVis main stylesheet -->
        <link rel="stylesheet" type="text/css" href="https://pgvis.org/latest/pgvis-renderer/pgvis.css" />
        <!-- The pgVis renderer-->
        <script src="https://pgvis.org/latest/pgvis-renderer/pgvis-renderer.umd.min.js"></script>
        <!-- The container that the pgVis visualisation will be rendered into -->
        <div id="pgvis"></div>
        <!-- Call pgVis to render -->
            /* Your pgVis definition */
            var def = {...};
            /* Render it */
            pgVis(def, { "container": "pgvis" });

The pgvis-renderer library exports one function:

function pgVis(/* Object */ definition, /* Object */ options)
  • The definition argument is the pgVis visualisation definition which is generated from the pgVis PostgreSQL extension.
  • The options argument is a plain Javascript object which passes rendering options to the pgVis renderer, options passed at this level will override options defined in the visualisation.

Options include:

  • container the id of the HTML (div) element which the visualisation will be rendered into, this defaults to pgvis .
  • header a boolean value, if true then display the visualisation header, defaults to true.
  • footer a boolean value, if true then display the visualisation footer, defaults to true.
  • updatePageTitle a boolean value, if true then update the page title to append the visualisation title, defaults to false.

Using pgvis-renderer Directly

You can import the pgvis-renderer directly as an ES6 module and call it from within your Javascript application.

I'm aiming to publish the library on NPM in the near future.