Create Time Series Charts Using JavaScript And Canvas – pixl-chart

Preview:

Description:

pixl-chart is a lightweight, high-performance, retina-ready JavaScript charting library for drawing time series charts on an HTML5 canvas element.

More Features:

• Supports single or multiple layers.
• Render the chart “progressively” for better performance.
• Allows to add layers dynamically.
• Downloadable as a WEBP, PNG, or JPEG image.
• Custom fill gradient.
• Custom fill styles.
• Custom daily/monthly/yearly range.
• Custom line styles.
• Optional chart legend.
• Allows to set the number of horizontal & vertical ticks (grid lines and labels).

How to use it:

1. Download and import the pixl-chart library.

<script src="./chart.min.js"></script>

2. Create an empty canvas on which the time series chart should draw.

<canvas class="chart" id="example"></canvas>

3. Define your own layers containing titles and time series data as follows:

const myLayers = [
      {
        "title": "Title 1",
        "data": [
          {
            "x": 1634272560,
            "y": 1720508
          },
          {
            "x": 1634272620,
            "y": 1691917
          },
          // ...
        ]
        // additional options
        // see global options for more details
        "color": [], // an array of colors
        "opacity": 1, 
        "hidden": true,
        "smoothing": true,
        "fill": 0.5,
        "fillStyle": 'gradient', // specifies the color, gradient, or pattern to use
        "stroke": true,
        "lineWidth": 2,
        "lineJoin": 'round', // "bevel" || "round" || "miter"
        "lineCap": 'butt', // "butt" || "round" || "square"
        "lineDashes": false,
      },
      {
        "title": "Title 2",
        "data": [
          {
            "x": 1634272560,
            "y": 3002730
          },
          {
            "x": 1634272620,
            "y": 1823347
          },
          // ...
        ]
      }
      // ... more layers here
]

4. Initialize the pixl-chart.

var chart = new Chart({
    "canvas": '#example',
    "layers": myLayers,
    // more options here
})

5. Render the chart on the canvas.

chart.render();

6. All possible chart options.

var chart: new Chart({
    // CSS selector of the canvas
    canvas: null,
    // add your own layers here
    layers: [],
    // an array of colors assigned to layers
    colors: ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0", "#3F51B5", "#4CAF50", "#546E7A", "#D4526E", "#A5978B", "#C7F464", "#81D4FA", "#2B908F", "#F9A3A4", "#90EE7E", "#FA4443", "#449DD1", "#F86624", "#69D2E7", "#EA3546", "#662E9B", "#C5D86D", "#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044", "#662E9B", "#F86624", "#F9C80E", "#EA3546", "#43BCCD", "#5C4742", "#A5978B", "#8D5B4C", "#5A2A27", "#C4BBAF", "#A300D6", "#7D02EB", "#5653FE", "#2983FF", "#00B1F2", "#03A9F4", "#33B2DF", "#4ECDC4", "#13D8AA", "#FD6A6A", "#F9CE1D", "#FF9800"],
    // background color
    background: '',
    // font family
    fontFamily: 'Helvetica, sans-serif',
    // font size
    fontSize: 12,
    // font color
    fontColor: 'rgb(128, 128, 128)',
    // title size
    titleSize: 16,
    // title style
    titleStyle: 'bold',
    // title padding
    titlePadding: 15,
    // chart title
    title: '',
    // subtitle
    subtitle: '',
    /// whether to show subtitle
    showSubtitle: true,
    // line width in px
    lineWidth: 2,
    // determine the shape used to join two line segments where they meet.
    // "bevel" || "round" || "miter"
    lineJoin: 'round',
    // determine the shape used to draw the end points of lines.
    // "butt" || "round" || "square"
    lineCap: 'butt',
    // render dashed lines e.g. [4, 2]
    lineDashes: false,
    // whether to render lines
    stroke: true,
    // fill opacity
    fill: 0.5,
    // clip the data drawing to the viewable area
    clip: false,
    // the number of horizontal "ticks"
    horizTicks: 6,
    // the number of vertical "ticks"
    vertTicks: 6,
    // space between vertical/horizontal labels
    vertLabelPadding: 10,
    horizLabelPadding: 25,
    // border color
    borderColor: 'rgba(128, 128, 128, 0.25)',
    // pixel Density
    density: window.devicePixelRatio,
    // auto resizing
    autoResize: true,
    // auto manage the chart by the global chart manager
    autoManage: true,
    // the type of data
    // "integer" || "float" || "bytes"
    dataType: 'integer',
    // display a suffix after all data values
    dataSuffix: '',
    // maximum number of digits
    floatPrecision: 2,
    // display chart legend
    legend: true,
    // maximum number of lines
    legendMaxLines: 2,
    // legend padding
    legendPadding: 5,
    // If you set zeroFloor to false, then your data will dictate the lowest Y value, and the chart will adjust itself
    zeroFloor: true,
    // smooth data lines
    smoothing: true,
    // disable 'smoothing' after your dataset has more than this number of samples
    smoothingMaxSamples: 200,
    // enable tooltip on hover
    hover: true,
    // 0  Do not sort (the layers will be in their natural order).
    // 1 Sort the layers by the data values in ascending order.
    // -1  Sort the layers by the data values in descending order.
    hoverSort: 0,
    // cursor type
    cursor: 'crosshair',
    // show data gaps
    showDataGaps: false,
    dataGapImage: "data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAXNSR0IArs4c6QAAADRJREFUCNedyjERAEEQAsERsjpwhQUK6Z9cRvZpVxNXPQDoVXHMUsxSxdJrvwmWeixVLMUfKik183saHHcAAAAASUVORK5CYII=",
    // auto add "headroom" above the highest Y value
    autoHeadroom: true,
    // add extra padding on any side of the chart
    padding: { left:0, top:0, right:10, bottom:0 },
    // allow to zoom the chart
    // an object with xMin, xMax, yMin and yMax properties
    zoom: null,
    // width/height of the chart
    width: 0,
    height: 0,
    // render the chart "progressively".
    progressive: false,
})

7. API methods & properties.

// add a layer
chart.addLayer( OBJECT );
// add layers
chart.addLayers( ARRAY );
// update the chart
chart.update();
// take a snapshot of the chart, and produces a image in WebP, PNG or JPEG format
chart.snapshot({
  type: 'blob' // or 'url'.
  format: 'png', or 'webp', 'png' or 'jpeg'.
  quality: 1.0,
}, CALLBACK );
// download the image
chart.download({
  type: 'blob' // or 'url'.
  format: 'png', or 'webp', 'png' or 'jpeg'.
  quality: 1.0,
  // and chart options
});
// destroy the instance
chart.destroy();
// xMin  The lowest X value (timestamp) across your entire dataset.
// xMax  The highest X value (timestamp) across your entire dataset.
// yMin  The lowest Y value across your entire dataset (or simply 0 if zeroFloor is enabled).
// yMax  The highest Y value across your entire dataset (possibly adjusted by autoHeadroom).
// width The width of your dataset (xMax - xMin).
// height  The height of your dataset (yMax - yMin).
chart.dataLimits;
// x The horizontal coordinate of the left side of the bounds rect, in pixels.
// y The vertical coordinate of the top side of the bounds rect, in pixels.
// width The width of the bounds rect, in pixels.
// height  The height of the bounds rect, in pixels.
chart.bounds

8. Events.

chart.on('render', function() {
  // do something
});
chart.on('mouseover', function() {
  // do something
});
chart.on('mousemove', function() {
  // do something
});
chart.on('mouseout', function() {
  // do something
});
chart.on('mousedown', function() {
  // do something
});
chart.on('mouseup', function() {
  // do something
});
chart.on('click', function() {
  // do something
});