<html>
<head>
<script src="lib/d3.min.js"></script>
<script src="js/dchart.min.js"></script>
</head>
<body>
<div id="basicChart1"></div>
<script>
var baseChart1 = new dChart.LineChart({
elem: 'basicChart1',
...
});
</script>
</body>
</html>
<div id="basicChart2"></div>
<script>
var baseChart2 = new dChart.LineChart({
elem: 'basicChart2',
width:700,
height:400,
label: "Basic Chart: Chart Configuration",
description: "The chart can be configured with some attributes",
...
});
</script>
Name | type | default | description |
---|---|---|---|
elem
|
string | '' | ID of the html-Element, to which the chart is appended |
width
|
number | 400 | Width of the SVG-Element, that holds the chart |
height
|
number | 400 | Height of the SVG-Element, which holds the chart |
marginLeft
|
number | 50 | Left margin of the chart drawing area |
marginTop
|
number | 20 | Top margin of the chart drawing area |
marginRight
|
number | 10 | Right margin of the chart drawing area |
marginBottom
|
number | 60 | Bottom margin of the chart drawing area |
label
|
string | '' | Label of the chart |
description
|
string | '' | Description of the chart |
fontStyle
|
FontStyle | {} | Font Style, that is used in the whole chart |
format
|
string | '0.2f' | Number Format, that is used in the whole chart |
transition
|
Transition | {} | Transition, while drawing a chart's datasets |
axis
|
Axis | {x:{},y:{}} | The configuration for 2D-axis |
dataSets
|
DataSet[] | [] | Data, that should be displayed in the chart |
var baseChart3 = new dChart.LineChart({
axis: {
x: {
label: "x Axis Label [m2]",
align: "bottom",
labelAlign: "right"
},
y: {
label: "y Axis Label [s]",
align: "left",
labelAlign:"top"
}
},
...
});
var baseChart4 = new dChart.LineChart({
marginTop: 40,
marginRight: 40,
axis: {
x: {
label: "x axis",
align: "bottom",
labelAlign: "left",
gridStyle: {
stroke: "black",
strokeOpacity: 0.7
}
},
y: {
label: "y axis",
align: "left",
labelAlign:"center",
gridStyle: {
stroke: "blueviolet",
strokeOpacity: 0.2
},
range:[0,1]
}
},
...
});
Name | type | default | description |
---|---|---|---|
label
|
string | '' | Label of the axis |
align
|
'top'|'center'|'bottom' 'left'|'center'|'right' |
'bottom' 'left' |
Alignment of the x-axis Alignment of the y-axis |
labelAlign
|
'left'|'center'|'right' 'top'|'center'|'bottom' |
'right' 'top' |
Alignment of the x-axis label Alignment of the y-axis label |
ticks
|
number | 10 | Sets the number of ticks of the axis |
tickValues
|
number[] | [] | Shows only defined tick values on the axis |
tickLabels
|
string[] | [] | Shows text instead of the tick number values |
autorange
|
boolean | true | Sets the range of the axis to min/max-values of all datasets |
range
|
number[] | [0,1] | Min/max-range of the axis values. Setting the 'range' option autosets 'autorange' to 'false'. |
style
|
LineStyle | {} | Style for the axis. |
showGrid
|
boolean | false | Show Grid for the axis |
gridStyle
|
LineStyle | {} | Style for the grid. Setting the 'gridStyle' option autosets 'showGrid' to 'true'. |
format
|
string | '0.2f' | Number format for the axis. Use D3.js Formatting for this option. |
scale not implemented
|
string | 'linear' | Scaling for the axis. Use D3.js Quantitative Scales for this option. |
https://github.com/mbostock/d3/wiki/Formatting#numbers
The format specifier is modeled after Python 3.1's built-in format specification mini-language. The general form of a specifier is [[fill]align][sign][symbol][0][width][,][.precision][type].
The fill can be any character other than "{" or "}". The presence of a fill character is signaled by the character following it, which must be one of the align options.
The align can be:
The sign can be:
The symbol can be:
The "0" option enables zero-padding.
The width defines the minimum field width. If not specified, then the width will be determined by the content.
The comma (",") option enables the use of a comma for a thousands separator.
The precision indicates how many digits should be displayed after the decimal point for a value formatted with types "f" and "%", or before and after the decimal point for a value formatted with types "g", "r" and "p".
The available type values are:
The type "n" is also supported as shorthand for ",g".
https://github.com/mbostock/d3/wiki/Quantitative-Scales
Linear scales are the most common scale, and a good default choice to map a continuous input domain to a continuous output range. The mapping is linear in that the output range value y can be expressed as a linear function of the input domain value x: y = mx + b. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as the height of bars (measured in pixels) in a histogram.
Identity scales are a special case of linear scales where the domain and range are identical; the scale and its invert method are both the identity function. These scales are occasionally useful when working with pixel coordinates, say in conjunction with the axis and brush components.
Power scales are similar to linear scales, except there's an exponential transform that is applied to the input domain value before the output range value is computed. The mapping to the output range value y can be expressed as a function of the input domain value x: y = mx^k + b, where k is the exponent value. Power scales also support negative values, in which case the input value is multiplied by -1, and the resulting output value is also multiplied by -1.
Constructs a new power scale with the default domain [0,1], the default range [0,1], and the exponent .5.
Log scales are similar to linear scales, except there's a logarithmic transform that is applied to the input domain value before the output range value is computed. The mapping to the output range value y can be expressed as a function of the input domain value x: y = m log(*x*) + b. Log scales also support negative values, in which case the input value is multiplied by -1, and the resulting output value is also multiplied by -1. However, note that the domain of a log scale should never contain zero, as log(0) is negative infinity.
Quantize scales are a variant of linear scales with a discrete rather than continuous range. The input domain is still continuous, and divided into uniform segments based on the number of values in (the cardinality of) the output range. The mapping is linear in that the output range value y can be expressed as a linear function of the input domain value x: y = mx + b. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as the height of bars (measured in pixels) in a histogram.
Quantile scales map an input domain to a discrete range. Although the input domain is continuous and the scale will accept any reasonable input value, the input domain is specified as a discrete set of values. The number of values in (the cardinality of) the output range determines the number of quantiles that will be computed from the input domain. To compute the quantiles, the input domain is sorted, and treated as a population of discrete values. The input domain is typically a dimension of the data that you want to visualize, such as the daily change of the stock market. The output range is typically a dimension of the desired output visualization, such as a diverging color scale.
Threshold scales are similar to quantize scales, except they allow you to map arbitrary subsets of the domain to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values. The input domain is typically a dimension of the data that you want to visualize, such as the height of students (measured in meters) in a sample population. The output range is typically a dimension of the desired output visualization, such as a set of colors (represented as strings).
Name | type | default | description |
---|---|---|---|
label
|
string | '' | Label of the dataset. Setting the 'label' option autosets 'showLegend' to 'true'. |
showLegend
|
boolean | false | Display the label in the legend. |
data
|
Points[] | [] | Array of data Points |
dataFn
|
DataFn | {} | Object, which holds a function for calculating data points |
dataSrc
|
DataSrc | {} | Object, which holds a file containing data points |
var pointsChart1 = new dChart.LineChart({
...
dataSets: [
{
label: "Dataset: Points",
data: [
{x:0,y:0},
{x:1,y:0.5},
{x:2,y:0.7},
{x:3,y:0.85},
{x:4,y:0.9},
{x:5,y:0.92}
]
},
{
label: "Dataset: Points",
data: [
{x:5,y:0},
{x:4,y:0.5},
{x:3,y:0.7},
{x:2,y:0.85},
{x:1,y:0.9},
{x:0,y:0.92}
]
}
]
});
Name | type | default | description |
---|---|---|---|
x
|
number | 0 | Value on the x-axis |
y
|
number | 0 | Value on the y-axis |
z
|
number | 0 | Value on the z-axis |
sigma
|
number | 0 | Sigma Value |
label
|
string | '' | Label of the data point |
style
|
SymbolStyle | {} | Style of the data point |
var functionChart1 = new dChart.LineChart({
...
dataSets: [
{
label: "Dataset: Function 'sin'",
dataFn: {
fn: Math.sin,
min: 0,
max: 2*Math.PI,
step: Math.PI/360
}
},
{
label: "Dataset: Function 'cos'",
dataFn: {
fn: Math.cos,
min: 0,
max: 2*Math.PI,
step: Math.PI/360
}
}
]
});
var functionChart2 = new dChart.LineChart({
...
dataSets: [
{
label: "Dataset: Function 'random'",
dataFn: {
fn: function() {
return Math.random();
},
min: 0,
max: 30,
step: 1
}
}
]
});
Name | type | default | description |
---|---|---|---|
fn
|
function | The function, which calculates data points | |
min
|
number | 0 | Min value on the x-axis for calculated data point |
max
|
number | 10 | Max value on the x-axis for calculated data point |
step
|
number | 1 | Difference between 2 x values of the calculated data points |
var fileChart1 = new dChart.BarChart({
...
elem: 'fileChart1',
dataSets: [
{
label: "CSV Data: Male",
areaStyle: {
stroke: "thistle",
fill: "thistle",
fillOpacity: 0.7
},
dataSrc: {
url: 'files/population.csv',
dataType: 'csv',
map: {
x:'year',
y:'people'
},
filter: [
{
key:'sex',
operator:'===',
value:"1"
},
{
key:'age',
operator:'===',
value:"20"
}
]
}
},
{
label: "CSV Data: Female",
areaStyle: {
stroke: "tomato",
fill: "tomato",
fillOpacity: 0.7
},
dataSrc: {
url: 'files/population.csv',
dataType: 'csv',
map: {
x:'year',
y:'people'
},
filter: [
{
key:'sex',
operator:'===',
value:"2"
},
{
key:'age',
operator:'===',
value:"20"
}
]
}
}
]
});
var fileChart2 = new dChart.PieChart({
...
elem: 'fileChart2',
format: '0.1s',
dataSets: [
{
label: 'Population',
dataSrc:
{
url: 'files/population2.csv',
dataType: 'csv',
map: {
x: 'population'
}
}
}
]
});
Name | type | default | description |
---|---|---|---|
url
|
string | '' | Url to the file, which contains the data points |
dataType
|
string | 'json' | Datatype of the file, that is parsed |
map
|
PointMap | {} | Map, that maps the parsed object to a Point-object |
filter
|
Filter[] | [] | Array of Filters, that filter the parsed object |
Name | type | default | description |
---|---|---|---|
x
|
string | 'x' | Name of the x-value |
y
|
string | 'y' | Name of the y-value |
z
|
string | 'z' | Name of the z-value |
sigma
|
string | 'sigma' | Name of the sigma Value |
label
|
string | 'label' | Name of the Label |
style
|
string | 'style' | Name of the Style |
Name | type | default | description |
---|---|---|---|
key
|
string | '' | Key of the object, which value should be filtered. If key is '', than the object/variable itself gets filtered. |
operator
|
string | '==' | Boolean operator, to compare the values |
value
|
any | '' | Value, which should be compared to |
See W3 Schools - SVG Stroking for usage of the options.
Name | type | default | description |
---|---|---|---|
stroke
|
string | 'black' | Color of a stroke |
strokeWidth
|
number | 1 | Width of a stroke |
strokeOpacity
|
number | 1 | Opacity of a stroke |
strokeLinecap
|
string | 'butt' | Linecap of a stroke |
strokeDasharray
|
string | '0' | Dasharray of a stroke |
AreaStyle extends LineStyle and therefore has all LineStyle options.
Name | type | default | description |
---|---|---|---|
... | |||
fill
|
string | 'black' | Color of a fill area |
fillOpacity
|
number | 1 | Opacity of a fill area |
SymbolStyle extends AreaStyle and therefore has all AreaStyle options.
Name | type | default | description |
---|---|---|---|
... | |||
type
|
string | 'circle' | Symbol type. Use D3.js Symbol Types for this option. |
size
|
number | 1 | Scales the symbol with factor of size |
https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-symbol_type
FontStyle extends AreaStyle and therefore has all AreaStyle options.
Name | type | default | description |
---|---|---|---|
... | |||
fontFamily
|
string | 'sans-serif' | Font family of the font |
fontSize
|
number | 11 | Size of the font |
fontWeight
|
string | 'normal' | Weight of the font |
Name | type | default | description |
---|---|---|---|
duration
|
number | 250 | Duration of each transition |
delay
|
number | 150 | Delay between each transition |
ease
|
string | 'cubic-in-out' | Easing of a transition. Use D3.js Ease for this option. |
https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
These built-in types may be extended using a variety of modes:
The default easing function is "cubic-in-out" which provides suitable slow-in slow-out animation.
var lineChart1 = new dChart.LineChart({
elem: 'lineChart1',
width: 700,
height: 400,
label: "My awesome Chart",
description: "This awesome chart lib is using D3.js",
axis: {
x: {
label: "x-Axis",
align: "bottom",
labelAlign: "right"
},
y: {
label: "y-Axis",
align: "left",
labelAlign: "top",
gridStyle: {
stroke: "black",
strokeOpacity: 0.25
}
}
},
transition: {
duration: 1500,
delay: 1500
},
dataSets:[
{
label: "Dataset 1",
lineStyle: {
stroke: "mediumslateblue",
strokeWidth: 2,
strokeDasharray: "5,5"
},
symbolStyle: {
stroke: "mediumslateblue",
strokeWidth: 2,
fill: "#fff",
size: 1.2
},
interpolate: "linear",
data: [
{x:0,y:0},
{x:1,y:0.5},
{x:2,y:0.7},
{x:3,y:0.85},
{x:4,y:0.9},
{x:5,y:0.92}
]
},
{
label: "Dataset 2: Function",
lineStyle: {
stroke: "red",
strokeWidth: 2
},
interpolate:'cardinal',
dataFn: {
fn: function() { return Math.random() },
min: 0,
max: 5,
step: 0.25
}
}
]
});
Name | type | default | description |
---|---|---|---|
showLine
|
boolean | true | Show line for the chart |
lineStyle
|
LineStyle | {} | Style of the line. Setting the 'lineStyle' option autosets 'showLine' to 'true'. |
showSymbol
|
boolean | false | Show data points for the chart |
symbolStyle
|
SymbolStyle | {} | Style of the points. Setting the 'symbolStyle' option autosets 'showSymbol' to 'true'. |
interpolate
|
string | 'linear' | Interpolation of 2 data points. Use D3.js Line Interpolate for this option. |
https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate
var areaChart1 = new dChart.AreaChart({
elem: 'areaChart1',
width: 700,
height: 400,
label: "Area Chart",
axis: {
x: {
label: "x-Axis"
},
y: {
label: "y-Axis",
range:[0,1.5],
gridStyle: {
stroke: "black",
strokeOpacity: 0.25
}
}
},
transition: {
duration: 1500,
delay: 250
},
dataSets:[
{
label: "Dataset: Function",
areaStyle: {
stroke: "steelblue",
strokeWidth: 2,
fill: "steelblue",
fillOpacity: 0.4
},
interpolate:'cardinal',
dataFn: {
fn: function() { return Math.random() },
min: 0,
max: 5,
step: 0.25
}
}
]
});
var areaChart2 = new dChart.AreaChart({
elem: 'areaChart2',
width: 700,
height: 400,
label: "Area Chart",
axis: {
x: {
label: "x-Axis"
},
y: {
label: "y-Axis",
range:[-1,1],
gridStyle: {
stroke: "black",
strokeOpacity: 0.25
}
}
},
transition: {
duration: 1500,
delay: 550
},
dataSets: [
{
label: "Dataset: Function 'sin'",
areaStyle: {
stroke: "red",
strokeWidth: 1,
fill: "red",
fillOpacity:0.4
},
symbolStyle: {
stroke: "none",
fill: "red",
size: 0.5
},
dataFn: {
fn: Math.sin,
min: 0,
max: 2*Math.PI,
step: Math.PI/18
}
},
{
label: "Dataset: Function 'cos'",
areaStyle: {
stroke: "blue",
strokeWidth: 1,
fill: "blue",
fillOpacity:0.4
},
symbolStyle: {
stroke: "none",
fill: "blue",
size: 0.5
},
dataFn: {
fn: Math.cos,
min: 0,
max: 2*Math.PI,
step: Math.PI/18
}
}
]
});
Name | type | default | description |
---|---|---|---|
areaStyle
|
AreaStyle | {} | Style of the area |
showSymbol
|
boolean | false | Show data points for the chart |
symbolStyle
|
SymbolStyle | {} | Style of the points. Setting the 'symbolStyle' option autosets 'showSymbol' to 'true'. |
interpolate
|
string | 'linear' | Interpolation of 2 data points. Use D3.js Line Interpolate for this option. |
var barChart1 = new dChart.BarChart({
elem: 'barChart1',
width: 700,
height: 400,
axis: {
x: {
range: [0,11],
format: "f"
},
y: {
range: [0,10],
ticks: 20,
format:"0.1f",
gridStyle: {
stroke: "lightgrey",
strokeOpacity: 0.5
}
}
},
transition: {
duration: 250,
delay: 150
},
dataSets: [
{
label: "Random Data",
areaStyle: {
stroke: "mistyrose",
fill: "mistyrose",
fillOpacity: 0.7
},
dataFn: {
fn: function() { return Math.random()*10 },
min: 1,
max: 10,
step: 1
}
},
{
label: "Random Data",
areaStyle: {
stroke: "moccasin",
fill: "moccasin",
fillOpacity: 0.7
},
dataFn: {
fn: function() { return Math.random()*10 },
min: 1,
max: 10,
step: 1
}
}
]
});
var barChart2 = new dChart.BarChart({
elem: 'barChart2',
width: 700,
height: 400,
axis: {
x: {
range: [0,11],
format: "f"
},
y: {
range: [0,10],
ticks: 10,
format:"0.1f",
gridStyle: {
stroke: "lightgrey",
strokeOpacity: 0.5
}
}
},
dataSets: [
{
label: "Dataset 1",
areaStyle: {
stroke: "darkgoldenrod",
fill: "darkgoldenrod",
fillOpacity: 0.7
},
data: [
{x:1, y:1, sigma:0.5},
{x:2, y:2, sigma:0.6},
{x:3, y:3, sigma:0.7},
{x:4.5, y:4, sigma:0.8},
{x:5, y:5, sigma:0.9},
{x:6, y:6, sigma:1},
{x:7, y:7, sigma:1.5},
{x:8, y:8, sigma:1.8},
{x:9, y:9, sigma:2}
]
}
]
});
Name | type | default | description |
---|---|---|---|
areaStyle
|
AreaStyle | {} | Style of the area |
var barChartHorizontal1 = new dChart.BarChartHorizontal({
elem: 'barChartHorizontal1',
width: 700,
height: 400,
marginTop:20,
marginRight:20,
axis: {
x: {
range: [0,10],
ticks:20,
format: "0.1f",
gridStyle: {
stroke: "lightgrey",
strokeOpacity: 0.5
},
align:"top"
},
y: {
range: [9,0],
ticks: 9,
tickLabels: [
"zero","one","two","three","four","five","six","seven","eight","nine"
],
format:"f"
}
},
transition: {
duration: 250,
delay: 150
},
dataSets: [
{
label: "Dataset 1",
areaStyle: {
stroke: "darkgoldenrod",
fill: "darkgoldenrod",
fillOpacity: 0.7
},
data: [
{x:1, y:1, sigma:0.8},
{x:4, y:2, sigma:0.7},
{x:6, y:3, sigma:0.2},
{x:7.5, y:4, sigma:0.5},
{x:8, y:5, sigma:0.2},
{x:8.5, y:6, sigma:0.3},
{x:9, y:7, sigma:0.2},
{x:9.5, y:8, sigma:0.1},
{x:10, y:9, sigma:0.9}
]
},
{
label: "Dataset 2",
areaStyle: {
stroke: "chocolate",
fill: "chocolate",
fillOpacity: 0.7
},
data: [
{x:10, y:1},
{x:9.5, y:2},
{x:9, y:3},
{x:8.5, y:4},
{x:8, y:5},
{x:7.5, y:6},
{x:6, y:7},
{x:4, y:8},
{x:1, y:9}
]
}
]
});
Name | type | default | description |
---|---|---|---|
areaStyle
|
AreaStyle | {} | Style of the area |
var scatterChart1 = new dChart.ScatterChart({
elem: 'scatterChart1',
width: 700,
height: 400,
axis: {
x: {
range: [0,11],
ticks:20,
format: "0.1f"
},
y: {
range: [0,10],
ticks:10,
gridStyle: {
stroke: "lightgrey",
strokeOpacity: 0.5
}
}
},
transition: {
duration: 100,
delay: 10
},
dataSets: [
{
label: "Random Data",
symbolStyle: {
stroke: "olivedrab",
fill: "olivedrab",
fillOpacity: 0.7
},
data: scatterData1
},
{
label: "Random Data",
symbolStyle: {
stroke: "navy",
fill: "navy",
fillOpacity: 0.7,
size: 1.5
},
data: scatterData2
}
]
});
var scatterChart2 = new dChart.ScatterChart({
elem: 'scatterChart2',
width: 700,
height: 400,
axis: {
x: {
ticks:20,
format: "0.1f"
},
y: {
ticks:20,
format: "0.1f"
}
},
transition: {
duration: 100,
delay: 10
},
dataSets: [
{
label: "Random Data",
symbolStyle: {
stroke: "tomato",
fill: "white",
type: "triangle-up"
},
data: scatterData3
}
]
});
Name | type | default | description |
---|---|---|---|
symbolStyle
|
SymbolStyle | {} | Style of the data points |
var pieChart1 = new dChart.PieChart({
elem: 'pieChart1',
width: 700,
height: 400,
label: "Pie Chart Example",
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 40,
transition: {
duration: 1500,
delay: 250
},
dataSets: [
{
label: "Dataset Pie Chart",
data: [
{x:5,areaStyle:{
fill:"mediumvioletred",
stroke:"none"
}},
{x:10, areaStyle:{
fill:"royalblue",
stroke:"none"
}},
{x:15, areaStyle:{
fill:"palevioletred",
stroke:"none"
}}
]
}
]
});
var pieChart2 = new dChart.PieChart({
elem: 'pieChart2',
width: 700,
height: 400,
label: "Another Pie Chart Example",
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 40,
transition: {
duration: 1500,
delay: 250
},
dataSets: [
{
label: "Random Dataset Pie Chart",
dataFn: {
fn: function() { return Math.random()*100 },
min: 0,
max: 3,
step: 1
}
},
{
label: "Another random Dataset Pie Chart",
dataFn: {
fn: function() { return Math.random()*100 },
min: 0,
max: 6,
step: 1
}
}
]
});
Name | type | default | description |
---|---|---|---|
areaStyle
|
AreaStyle | {} | Style of the pie-areas |
var doughnutChart1 = new dChart.DoughnutChart({
elem: 'doughnutChart1',
width: 700,
height: 400,
label: "Doughnut Chart Example",
innerRadius: 100,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 40,
transition: {
duration: 500,
delay: 250
},
dataSets: [
{
label: "Random Dataset",
dataFn: {
fn: function() { return Math.random()*100 },
min: 0,
max: 3,
step: 1
}
},
{
label: "Another random Dataset",
dataFn: {
fn: function() { return Math.random()*100 },
min: 0,
max: 6,
step: 1
}
}
]
});
Name | type | default | description |
---|---|---|---|
innerRadius
|
number | 10 | Radius of the doughnut hole |
Name | type | default | description |
---|---|---|---|
areaStyle
|
AreaStyle | {} | Style of the pie-areas |