A graphing library built using d3 based on Cerner design standards
npm install @cerner/carbon-graphs
!npm
A vanilla JavaScript graphing library built using d3 based on Cerner design standards.
- Installing Carbon
- Getting Started
- Graph Types
- LICENSE
- Install from npmjs using the command below:
``sh`
npm i @cerner/carbon-graphs --save-dev
To create a graph with carbon, first let's create a graph configuration object and use it to initialize that canvas:
`javascript
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:
`javascript`
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:
`javascript``
canvas.loadContent(Carbon.api.line(CONTENT_DATA1));
This results in the following graph:
!Alt
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
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.