A Javascript Library For Drawing Graphs Based On HTML5 Canvas | Graphene

Graphene is a graphic library based on HTML5 Canvas. It is a high-performance graphing library for plotting multiple sets of data on an X / Y / U line chart or area chart.

More features:

• easy to use.
• Types of lines: lines, curves, or lines.
• Data and hub coordinators.
• Supports JSON / JS data source.
• Custom patterns.
• User interactions: Zoom in, scroll, highlight.
• Custom tooltips when hovering over data points.
• It allows you to update/add data programmatically.

How to make use of it:

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 info 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 & information (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 information.

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

High-Performance Charting Library, HTML5 Charts & Graphs, Graphene Plugin/Github

See Demo And Download

Official Website(krystal): Click Here

This superior jQuery/javascript plugin is developed by krystal. For extra Advanced Usages, please go to the official website.