High Performance Charting Library With JavaScript And Canvas – Graphene

Category: Chart & Graph , Javascript | July 15, 2020
Author:krystal
Views Total:74 views
Official Page:Go to website
Last Update:July 15, 2020
License:MIT

Preview:

High Performance Charting Library With JavaScript And Canvas – Graphene

Description:

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)

You Might Be Interested In:


Leave a Reply