Tutorial

Follow these steps to draw this graph using Graphene:

Installation

Install graphene via NPM:

npm install krystal-graphene

Usage

Import the graphene library:

import GrapheneEngine from 'krystal-graphene'

Create a new instance of the graphene engine:

var grapheneEngine = new GrapheneEngine();

Then add a graph to it:

var linegraph = grapheneEngine.addLinegraph(element, properties, data, null, null);

Where element is the HTML element that the graph is to be positioned in and properties and data are JSON strings. Refer to the properties and data documentation for more information.

Element HTML

<div class="graph graph_styles" width="1200" height="480" data-type="linegraph"></div>

Properties JSON

{
  "graph_drawing_method":"curves",
  "flags":{
    "highlight_enabled":true,
    "graph_gradient_colour":true,
    "graph_gradient_horizontal":true
  },
  "y_axis":{
    "label_suffix":[[0,"%"]]
  },
  "u_axis":
    {"label_suffix":[[0,"kg"]]
  }
}

Data JSON

{
  "names":["Capacity","Mass"],
  "x":["00:00","03:00","06:00","09:00","12:00","15:00","18:00","21:00"],
  "y":[[33,66,95,50,33,66,95,50]],
  "u":[[1,3,2,4,3,4,4,5]]
}

Styling

Colours, fonts, sizes, etc. can all be defined via CSS variables, graphene will look for styles that have been applied to the supplied HTML element. Refer to the styles documentation for more information.

CSS

.graph_styles {
  --alphas-background: 1;
  --alphas-information-panel: 0.75;
  --alphas-under-graph: 0.25;

  --colours-axes-labels: #555555;
  --colours-background: #FFFFFF;
  --colours-highlight-indicator: #FFFFFF;
  --colours-horizontal-lines: #EEEEEE;
  --colours-information-heading: #FFFFFF;
  --colours-information-panel: #333333;
  --colours-information-sentences: #FFFFFF;

  --colours-data-axis: #E0DEFF;
  --colours-data-0: #07ACD6;
  --colours-data-1: #D2297D;

  --colours-data-stop-0: #42C98A;
  --colours-data-stop-1: #F7A15C;

  --fonts-axes-labels-family: "Arial";
  --fonts-axes-labels-size: 18;
  --fonts-axes-labels-weight: normal;
  --fonts-information-heading-family: "Arial";
  --fonts-information-heading-size: 18;
  --fonts-information-heading-weight: bold;
  --fonts-information-sentences-family: "Arial";
  --fonts-information-sentences-size: 18;
  --fonts-information-sentences-weight: normal;

  --radii-data-highlight-indicator: 6;
  --radii-highlight-indicator: 3;
  --radii-information-panel-border: 10;

  --widths-data: 3;
  --widths-data-highlight-indicator: 6;
  --widths-highlight-indicator: 3;
}

.graph {
  position: relative;
  margin: 48px;
  width: 1200px;
}

With everything in place, it is time to draw:

grapheneEngine.render();