Carbon Graphs

A vanilla JavaScript graphing library built using d3 based on Cerner design standards.

• Installing Carbon
• Getting Started
• Graph Types
• LICENSE

Installing Carbon

• Install from npmjs using the command below:

npm i @cerner/carbon-graphs --save-dev

Getting Started

To create a graph with carbon, first let's create a graph configuration object and use it to initialize that canvas:

const GRAPH_DATA = {
  bindTo: "#root",
  axis: {
    x: {
      show: true,
      label: "x-axis label",
      lowerLimit: 0,
      upperLimit: 100
    },
    y: {
      show: true,
      label: "y-axis label",
      lowerLimit: 0,
      upperLimit: 10,
    },
  }
};

var canvas = Carbon.api.graph(GRAPH_DATA);

Let's create a sample dataset to plot:

const CONTENT_DATA1 = {
  key: "uid_1",
  label: {
    display: "Dataset A"
  },
  values: [
    {
      x: 10,
      y: 9
    },
    {
      x: 45,
      y: 3
    },
    {
      x: 60,
      y: 7
    },
    {
      x: 77,
      y: 8
    },
    {
      x: 94,
      y: 2
    }
  ]
};

The data can now by plotted by as a line graph by using the following:

    canvas.loadContent(Carbon.api.line(CONTENT_DATA1));

This results in the following graph:

Graph types

The following graph types can be plotted using Carbon:

• Line
• Multi Line
• Spline Line
• Paired Result
• Bar
• Timeline
• Pie
• Gantt
• Scatter
• Bubble
  • Bubble Single Dataset
  • Bubble Multiple Dataset

LICENSE

Copyright 2017 - present Cerner Innovation, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.