Horizontal Time Series Bar Chart In Vanilla JavaScript – horizontalcharts.js

Category: Chart & Graph , Javascript | September 22, 2022
Author:agbianchessi
Views Total:4 views
Official Page:Go to website
Last Update:September 22, 2022
License:MIT

Preview:

Horizontal Time Series Bar Chart In Vanilla JavaScript – horizontalcharts.js

Description:

A JavaScript library for drawing a stacked horizontal bar chart with time-series data on an HTML canvas element, which can be used to show changes in data over time.

How to use it:

1. Import the horizontalcharts.js library into your document.

<script src="./horizontalcharts.js"></script>

2. Create an empty canvas element for the chart.

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

3. Define your time-series data as follows:

  • barHeight: The thickness of the bars.
  • showValues: Enables the printing of data samples values inside bars.
  • labelText: A short text describing this TimeSeries.
  • replaceValue: If the data sample ts has an exact match in the series, this flag controls whether it is replaced, or not.
  • disabled: This flag controls whether this time series is displayed or not.
let ts1 = new TimeSeries(1, { 
    labelText: "Day 1",
    arHeight: 25,
    showValues: true,
    replaceValue: false,
    disabled: false
});
let ts2 = new TimeSeries(2, {
    labelText: "Day 2" 
});
let ts3 = new TimeSeries(3, { 
    labelText: "Day 3" 
});
ts1.data = [
  new DataSample({ color: '#FF0000DD', value: 20, desc: "Bob" }),
  new DataSample({ color: '#BB0000DD', value: 30, desc: "John" }),
  new DataSample({ color: '#880000DD', value: 10, desc: "Max" }),
  new DataSample({ color: '#330000DD', value: 40, desc: "Ann" })
];
ts2.data = [
  new DataSample({ color: '#0000FFDD', value: 10, desc: "Bob" }),
  new DataSample({ color: '#0000BBDD', value: 50, desc: "John" }),
  new DataSample({ color: '#000088DD', value: 20, desc: "Max" }),
  new DataSample({ color: '#000033DD', value: 20, desc: "Ann" })
];
ts3.data = [
  new DataSample({ color: '#00FF00DD', value: 10, desc: "Bob" }),
  new DataSample({ color: '#00BB00DD', value: 40, desc: "John" }),
  new DataSample({ color: '#008800DD', value: 15, desc: "Ann" })
];

4. Initialize the library and add the time-series data to the chart.

let chart = new HorizontalChart({
    // options here
});
chart.addTimeSeries(ts1, ts2, ts3);

5. Render the chart on the canvas.

chart.streamTo(document.getElementById("chart"));

6. All possible chart options.

  • customOverSampleFactor: User-defined Canvas scaling factor. 0 = not used.
  • backgroundColor: Background color (RGB[A] string) of the chart.
  • padding: Space between time series.
  • formatTime: Timestamp formatting function.
  • axesWidth: The thickness of the X and Y axes.
  • axesColor: The color of the X and Y axes.
  • grid: Grid options.
  • grid.y: Y grid axis options.
  • grid.y.enabled: If true Y grid axis is shown.
  • grid.y.color: Y grid axis color.
  • grid.x: X grid axis options.
  • grid.x.enabled: If true X grid axis is shown.
  • grid.x.stepSize: X grid axis step size.
  • grid.x.color: X grid axis color.
  • tooltip: Tooltip options.
  • tooltip.enabled: If true tooltips are shown.
  • tooltip.backgroundColor: Tooltips background color.
  • minBarLength: Minimum bar length.
  • xAxis: X axis options.
  • xAxis.xUnitsPerPixel: X axis scaling factor.
  • xAxis.max: On real time charts this is the maximum value on the X axis. On non-real-time charts, it is ignored.
  • xAxis.xLabel: X axis title.
  • xAxis.fontSize: Font size of the X axis title.
  • xAxis.fontFamily: Font family of the X axis title.
  • xAxis.fontColor: Font color of the X axis title.
  • yLabels: Y labels options.
  • yLabels.enabled: If true Y labels are shown.
  • yLabels.fontSize: Font size of the Y labels.
  • yLabels.fontFamily: Font family of the Y labels.
  • yLabels.fontColor: Font color of the Y labels.
let chart = new HorizontalChart({
    customOverSampleFactor: 0,
    backgroundColor: '#00000000',
    padding: 5,
    formatTime: function (ms) {
      function pad3(number) { if (number < 10) return '00' + number; if (number < 100) return '0' + number; return number; }
      const date = new Date(ms);
      const msStr = (pad3(ms - Math.floor(ms / 1000) * 1000) / 1000);
      return date.toLocaleString('en-US', { hour12: false }) + msStr;
    },
    axesWidth: 2,
    axesColor: '#000000',
    grid: {
      y: {
        enabled: false,
        color: '#000000'
      },
      x: {
        enabled: false,
        stepSize: 20,
        color: '#000000'
      }
    },
    tooltip: {
      enabled: true,
      backgroundColor: '#FFFFFFDD'
    },
    minBarLength: 0,
    xAxis: {
      xUnitsPerPixel: 10,
      max: 105,
      xLabel: "",
      fontSize: 12,
      fontFamily: 'monospace',
      fontColor: '#000000'
    },
    yLabels: {
      enabled: true,
      fontSize: 12,
      fontFamily: 'monospace',
      fontColor: '#000000'
    }
});

Changelog:

09/22/2022

  • replace hasOwnProperty with Object.hasOwn

06/08/2022

  • New DataSample border options

05/06/2022

  • Milliseconds bugfix

You Might Be Interested In:


Leave a Reply