High Performance Charting Library With JavaScript And Canvas – Graphene

Graphene is a high performance charting library to plot multiple sets of data on a canvas-based X/Y/U line or area chart.

More Features:

• Easy to use.
• Line types: lines, curves, or splines.
• Data & Axis formatters.
• Supports JSON/JS data source.
• Custom styles.
• User interactions: zoom, scroll, highlight.
• Custom tooltips when hovering on data points.
• Allows you to update/add data programmatically.

Basic usage:

1. Install the Graphene with NPM.

# NPM
$ npm i krystal-graphene --save

2. Import the GrapheneEngine module.

import GrapheneEngine from 'krystal-graphene';

3. Create a new GrapheneEngine instance.

var grapheneEngine = new GrapheneEngine();

4. Create a container to hold the chart.

<div id="demo"></div>

var element = document.getElementById("demo");

5. Define the properties of the chart.

var properties = {
    "root": {
      // lines, curves or splines
      "graph_drawing_method": 'splines'
    }
    "flags": {
      // enable tooltip
      "highlight_enabled": true,
      // enable scroll
      "scroll_enabled": true,
      // enable zoom
      "zoom_enabled": true,
      // enable gradient color
      "graph_gradient_colour": true,
      // the gradient goes from left to right rather than top to bottom
      "graph_gradient_horizontal": true,
      // hide horizontal & vertical axis
      "hide_horizontal_axis": false,
      "hide_vertical_axes": false,
      // show data points
      show_data_points: true
    },
    "x_axis": {
      "min": 0,
      "max": null,
    }
    "y_axis": {
      "min": 0,
      "max": null,
      "label_suffix": [[0, "%"]]
      "label_prefix": '',
      "base": 10 // the base of the number system
    },
    "u_axis": {
      "label_suffix": [],
      "label_prefix": '',
      "base": 10 // the base of the number system
    }
}

6. Define the data to be plotted.

var myData = [
    [
      // data set 1
      [1585660200000, 0.05333333333333334],
      [1585660500000, 0.44666666666666666],
      [1585660800000, 0.21333333333333335],
    ],
    [
      // data set 2
      [1585660200000, 0.05333333333333334],
      [1585660500000, 0.44666666666666666],
      [1585660800000, 0.21333333333333335],
    ],
    [
      // data set 3
      [1585660200000, 0.05333333333333334],
      [1585660500000, 0.44666666666666666],
      [1585660800000, 0.21333333333333335],
    ],
    // more data sets here
];

7. Format axis & data (OPTIONAL).

function axisFormatter(value, interval) {
    var date = new Date(value);
    var hours = date.getUTCHours();
    var minutes = date.getUTCMinutes();
    var day = date.getUTCDate();
    var month = months[date.getUTCMonth()];
    var year = date.getUTCFullYear();
    if (interval < 86400000) { // 24 hours
        return hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0");
    } else if (interval < 2678400000) { // 31 days
        return day + " " + month;
    } else if (interval < 31536000000) { // 365 days
        return month + " " + year;
    } else {
        return year;
    }
}
function informationFormatter(value) {
    var date = new Date(value);
    var hours = date.getUTCHours();
    var minutes = date.getUTCMinutes();
    var day = date.getUTCDate();
    var month = months[date.getUTCMonth()];
    var year = date.getUTCFullYear();
    return hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0") + " " + day + " " + month + " " + year;
}

8. Initialize the chart.

var myChart = grapheneEngine.addLinegraph(element, properties, myData, axisFormatter, informationFormatter);

9. Render the chart on an HTML canvas.

myChart.render();

10. Get/remove the chart instance.

myChart.getGraph(element);
myChart.removeGraph(element);

11. Add/update chart data.

myChart.updateData(data, properties);
myChart.addHorizontalData(data, properties)

Changelog:

07/31/2024

• Refactor

07/22/2021

• Fixed an issue with spline tension

1.0.22 (07/14/2021)

• Fixed an issue in line and bar graphs when all axes are hidden

1.0.21 (03/12/2021)

• Add TS declaration for GrapheneEngine

1.0.19 (01/20/2021)

• Add vertical line drawing to line graphs

1.0.18 (01/16/2021)

• Added support for multiline markers

1.0.17 (01/15/2021)

• Fixed an issue with markers

1.0.16 (01/12/2021)

• Shifted the information panel over half a width

1.0.14 (01/09/2021)

• Temporarily turned off alpha backgrounds

1.0.12 (01/08/2021)

• Add prototype markers

12/08/2020

• Greatly improved how segments and borders are drawn

10/01/2020

• Add guards to prevent NaNs from being displayed

09/25/2020

• Added decimal places to u_axis labels

09/23/2020

• Optimize the Y axis max label width calculations