Juttle Visualization Library

JuttleViz is the chart library used by Juttle Engine to render the visual outputs of Juttle programs.

Basic Usage

To use use one of these visualizations in your Juttle, use the view keyword followed by a particular view name.

... | view <view> [view-parameters]

If your program doesn't specify an output, the default is view table.

Available Views

View	Description	Image
barchart	Display the output as vertical or horizontal bars for comparing different categories of data.
events	Overlay events as markers on top of a time chart.
file	Not a visual view. Download the data to a local file.	N/A
less	Navigate the data in a manner similar to the UNIX less command.
markdown	Create annotation blocks using markdown.
text	Display the output in raw text, CSV or JSON format.
piechart	Render data as a pie or donut chart.
scatterchart	Plot data points as individual dots across two axes sourced from the data fields.
table	Display the output as text in rows and columns. This is the default output if no other is specified.
tile	Render a metric tile displaying exactly one value.
timechart	Create a time series chart. Time charts support multiple series and can be combined with view events

Controlling Layout

A program can have multiple view sinks. You can customize the positioning of a particular view by passing -row and -col parameters to each sink.

For example, if you wanted to layout 4 tables in a 2x2 grid, the juttle would be

emit -limit 1
| (
  view table -title 'upper left' -row 1 -col 1;
  view table -title 'upper right' -row 1 -col 2;
  view table -title 'lower left' -row 2 -col 2;
  view table -title 'lower right' -row 2 -col 2;
)

Defining View Parameters

Parameters for a view can be specified individually, or as object literals using the -options parameter (-o for short).

Individually specified parameters are shown in the syntax reference for each view. A simple example with individual parameters looks like this:

... | view barchart
        -title "CPU usage"
        -value value

The example above can also be expressed with object literals like this:

... | view barchart -options { title: "CPU usage", value: value }

The two formats can also be combined, like this:

... | view barchart
        -title "CPU usage"
        -o { value: value }

If you've worked with JavaScript, the -options method will look familiar. It provides additional flexibility by allowing you to store parameters as vars or consts, like this:

const timechartOptions = {
title: 'Average CPU Usage'
};
... | view timechart -options timechartOptions

They can also be defined in a module and referenced in another program:

// module "standards"
export const cpu_chart_params = {
  series: [ { field: 'cpu', color: 'blue', label: 'cpu usage', unit: 'percent' } ],
  ...
};

// main program:
import "standards" as standards;
... | view timechart
        -options standards.cpu_chart_params
        -title "cpu usage"

Note: If a parameter is specified more than once, the last instance overrides any previous instances. For example, both of these imaginary programs produce a time chart whose title is "the real title":

... | view timechart
        -title "ignored"
        -o { title: "the real title" }
... | view timechart
        -o { title: "not the title" }
        -title "the real title"