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

Preview:

Description:

A JavaScript library for drawing a stacked horizontal/vertical 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.
• horizontal: Setting to false to enable the vertical bars.
• 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.
• grid.x.showLabels: If true X grid labels are shown.
• grid.x.fontSize: Font size of the X grid labels.
• grid.x.fontFamily: Font family of the X grid labels.
• 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:

07/22/2023

• new grid options, improved graphics

10/13/2022

• fix: padding offset

10/12/2022

• fix: canvas not resizing when window is resized

10/12/2022

• Added option to draw vertical charts

09/22/2022

• replace hasOwnProperty with Object.hasOwn

06/08/2022

• New DataSample border options

05/06/2022

• Milliseconds bugfix