Peek - a chart library based on D3.js (version 1.4.1)
Reference Guide Release Notes

Peek is a an object-oriented chart library for web applications, based on D3.js.

  • Object-oriented

    The benefits of D3.js, but with easier, configurable, reusable chart objects.

  • Many chart types

    Supports scatter, line, area, bar, pie, and donut charts in multiple orientations and configurations.

  • Multiple series

    Display and compare multiple data series with stacked and grouped charts.

  • Automatic scaling

    Scales and axis tick labels are handled automatically, with input data maxima detection.

  • Interpolation

    Optional best-fit curves and line smoothing with D3 line interpolation.

  • JSON data format

    Standardised data inputs allow the same dataset to easily be displayed in multiple chart types.

  • Labelling

    Support for configurable chart titles, axis labels, and legends.

  • Interactive

    Optionally show data points, with interactive tooltips for displaying values.

Peek provides an HTML5, CSS3 and JavaScript chart library for any modern web application.

Getting started

Peek is server-side agnostic and will work with any backend framework.

  • Download the library

    Download or clone a copy of the library.

  • Copy from examples

    Copy and paste from the examples.

  • Customize and publish

    Attach to any webpage, and publish.

The key point is to attach the library CSS and JavaScript files:

<link rel="stylesheet" href="peek.css" type="text/css" />
<script src="require/d3.min.js"></script>
<script src="peek.js"></script>

Overview

The best way to get an overview is to look at the examples.

Class list

User classes are accessed directy. Internal classes are only accessed indirectly, as a child members of a user class.

  • User classes:
    • Cartesian - creates a Cartesian (xy), time-series chart of any type
    • Radial - creates a radial chart, e.g. pie chart
    • HorizontalBar - creates a horizontal bar chart
    • Legend - draws a chart legend with color/label key
  • Internal classes:
    • Plot - plot handler, including title, legends, and SVG for all charts
    • Axes
      • Axis - axis handler for all charts
    • Data - a common data input handler for Cartesian charts
    • Lines - line handler for Cartesian charts
    • Areas - shaded area handler for Cartesian charts
    • Points - point handler, including tooltips for Cartesian charts
    • Bars - bar handler for Cartesian charts

Chart topology

Legends, titles, and labels (except axis tick labels) are rendered as HTML elements, not SVG elements. This is primarily because HTML elements handle text overflow better. The chart topology, with CSS class names, is shown below:

.pk-chart
.pk-plot
.pk-yLabelContainer
.pk-yLabel
.pk-mainContainer
.pk-title


.pk-svgContainer
svg


.pk-xLabel
.pk-legendContainer
.pk-legend