This is an old revision of the document!
Graphs or Charts
The c3chart plugin for DokuWiki makes it easy to insert interactive data charts rendered by C3.js, which is powered by the popular D3.js library.
This plugin accepts the same JavaScript object that C3 takes to generate a chart. Any chart describable by a static JavaScript object is supported. All types of charts natively supported by C3 can be rendered, such as line/bar/pie/donut charts, as well as scatter plots.
Usages
Example graphs could be found at C3 Examples.
The following are basic examples.
Pie chart
<c3>
// some comment
data: {
columns: [
['data1', 30], /* more comment */
['data2', 120],
],
type : 'pie',
}
</c3>
How the above code looks like in work:
<c3>
// some comment
data: {
columns: [
['data1', 30], /* more comment */
['data2', 120],
],
type : 'pie',
}
</c3>
Line Chart
<c3>
// some comment
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250], /* more comment */
['data2', 50, 20, 10, 40, 15, 25],
],
type : 'line',
},
axis: {
x: {
type: 'indexed',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
}
}
</c3>
How the above code looks like in work:
<c3>
// some comment
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250], /* more comment */
['data2', 50, 20, 10, 40, 15, 25],
],
type : 'line',
},
axis: {
x: {
type: 'indexed',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
}
}
</c3>
Time Series Chart
<c3>
data: {
x: 'x',
// xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
// ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
</c3>
How the above code looks like in work:
<c3>
data: {
x: 'x',
xFormat: '%Y%m%d', 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350] ] }, axis: { x: { type: 'timeseries', tick: { format: '%Y-%m-%d' } } } </c3> ==== Spline Chart ==== <code> <c3> data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 100, 140, 200, 150, 50] ], type: 'spline' } </c3> </code> How the above code looks like in work: <c3> data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 100, 140, 200, 150, 50] ], type: 'spline' } </c3> ==== Simple XY Line Chart ==== <code> <c3> data: { x: 'x', columns: [ ['x', 30, 50, 100, 230, 300, 310], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 300, 200, 300, 250, 450] ] } </c3> </code> How the above code looks like in work: <c3> data: { x: 'x', columns: [ ['x', 30, 50, 100, 230, 300, 310], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 300, 200, 300, 250, 450] ] } </c3> ==== Multiple XY Line Chart ==== <c3> data: { xs: { 'data1': 'x1', 'data2': 'x2', }, columns: [ ['x1', 10, 30, 45, 50, 70, 100], ['x2', 30, 50, 75, 100, 120], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 20, 180, 240, 100, 190] ] } </c3> ==== Line Chart with Regions ==== <c3> data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ], regions: { 'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], currently 'dashed' style only
'data2': [{'end':3}]
}
}
</c3>
Step Chart
<c3>
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
}
}
</c3>
Area Chart
<c3>
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
}
</c3>
Stacked Area Chart
<c3>
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 120],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
},
groups: [['data1', 'data2']]
}
</c3>
Bar Chart
<c3>
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50],
['data3', 130, -150, 200, 300, -200, 100]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
</c3>
Stacked Bar Chart
<c3>
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250],
['data4', 100, -50, 150, 200, -300, -100]
],
type: 'bar',
groups: [
['data1', 'data2'],
['data3', 'data4'],
]
},
</c3>
Scatter Plot
<c3>
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
],
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
</c3>
Donut Chart
<c3>
data: {
columns: [
['data1', 30],
['data2', 120],
['data3', 80]
],
type : 'donut',
},
donut: {
title: "Iris Petal Width"
}
</c3>
Gauge Chart
<c3>
data: {
columns: [
['data', 91.4]
],
type: 'gauge',
},
gauge: {
label: { format: function(value, ratio) { return value; }, show: false to turn off the min/max labels. }, min: 0, 0 is default, can handle negative min e.g. vacuum / voltage / current flow / rate of change max: 100, 100 is default units: ' %', width: 39 for adjusting arc thickness }, color: { pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], the three color levels for the percentage values.
threshold: {
unit: 'value', percentage is default max: 200, 100 is default
values: [30, 60, 90, 100]
}
}
</c3>
Combination Chart
<c3>
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
],
type: 'bar',
types: {
data3: 'spline',
data4: 'line',
data6: 'area',
},
groups: [
['data1','data2']
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
}
}
</c3>
Options
The <c3> tag can carry optional attributes to customize the appearance of the chart. The attributes are separated by spaces, each specified in the format of name=value. Valid attributes are:
| Name | Description |
|---|---|
width | Width of the chart, specified in CSS format, e.g. 50% or 320px. |
height | Height of the chart, in the same format as width. |
align | Chart alignment, can be left, right or center. |
By default, the width of the chart is not set, and heigh is set to 320px.
More options of C3.js could be found at C3 reference base.