StackedAreaChart
A stacked area line chart that can take in different scales
Configuration Options
areaInterpolation
Type: select
Default: "linear"
How the area lines will be interpolated
areaStroke
Type: boolean
Default: true
Puts a stroke between the areas with a color
axesLabelColor
Type: color
Default: "#888"
Color of all the labels on the axes
axesLabelFontFamily
Type: string
Default: "Open Sans"
Font family for axes labels
axesLabelSize
Type: number
Default: 11
Units: px
Size of the labels
axesLineColor
Type: color
Default: "#E3E3E3"
Color of all lines found in the axes
chartName
Type: string
Default: "StackedAreaChart"
Name of chart for reporting
chartPrimarySeriesColors
Type: colorArray
Default: [["#D9EBFD","#B7DAF5","#90c4e4","#73B0D7","#4E8CBA","#31689B"],["#DDF4BA","#BBE491","#A0D771","#80C25D","#559E38","#387B26"],["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"],["#F3E4FE","#DDC8EF","#C5ACDE","#B391CA","#8F6DC0","#7940A1"],["#FCD7E6","#FBB6DD","#F395CD","#EE76BF","#CF51AC","#A62A92"],["#D8F4DE","#ABE4CA","#8DD5BE","#68BEA8","#46998A","#227872"],["#FDDDDD","#FCBCB7","#FD9A93","#FD7F76","#e45850","#c92e25"]]
The primary colors used to represent series data
colorScale
Type: scale
Default: ""
undefined
dateFormat
Type: select
Default: {"name":"Year-Month-Day (2015-12-31)","value":"YYYY-MM-DD"}
The date format of the data if the data is dates
generalSeparatorColor
Type: color
Default: "#FFFFFF"
Color for element separators
generalWashoutColor
Type: color
Default: "#E4E5E5"
Color used to indicate elements that are not being highlighted
height
Type: number
Default: 250
Units: px
rectangleHover
Type: select
Default: "step"
The type of hover rectangle to use
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showCircle
Type: boolean
Default: true
Shows a circle on the top of the graph that corresponds to the x value
snapTooltip
Type: boolean
Default: false
If true tooltip snaps to data point
textFontFamily
Type: string
Default: "Open Sans"
Font family for text in any tooltip
textSize
Type: number
Default: 12
Units: px
Size in pixels of all text in any tooltip
tooltipBackgroundColor
Type: color
Default: "#555555"
Background color of the tooltip
tooltipTextColor
Type: color
Default: "#FFFFFF"
Color of the tooltip text
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
xAddBaseline
Type: select
Default: {"name":"Show","value":true}
xAddLabels
Type: select
Default: {"name":"Show","value":true}
xAddTicks
Type: select
Default: {"name":"Hide","value":false}
xAxisDateFormat
Type: select
Default: {"name":"Month-Year (12-15)","value":"MM-YY"}
Format of the x axis date labels if the data is dates (value in parenthesis is an example of the date format to be displayed)
xScale
Type: scale
Default: "function scale(x) {\n\t return output(x);\n\t }"
Scale used for x axis. Automatically set by users input of xScaleType
xScaleType
Type: select
Default: {"name":"Number","value":"linear"}
Defines type of scale on x axis (Number scale uses integers, Date scale uses dates using the selected 'Date Format' config)
xValueFormat
Type: function
Default: "function (value) {\n\t return i18n.summaryNumber(value);\n\t }"
Format function for x value
yAddBaseline
Type: select
Default: {"name":"Show","value":true}
yAddGridlines
Type: select
Default: {"name":"Show","value":true}
yAddLabels
Type: select
Default: {"name":"Show","value":true}
yAddTicks
Type: select
Default: {"name":"Hide","value":false}
yScale
Type: scale
Default: "function scale(x) {\n\t return output(x);\n\t }"
Scale used for y axis
yValueFormat
Type: function
Default: "function (value) {\n\t return i18n.summaryNumber(value);\n\t }"
Format function for y value
Data Definition
Series
Type: string
Default validate:
function (d) { return this.accessor(d) !== undefined; }Default accessor:
function (line) { return String(line[0]); }xValue
Type: string
Default validate:
function (d) {
if (_Chart.c('xScaleType').value === 'linear') {
return !isNaN(this.accessor(d)) && this.accessor(d) >= 0;
} else if (_Chart.c('xScaleType').value === 'time') {
return new Date(this.accessor(d)) !== 'Invalid Date';
}
}Default accessor:
function (line) {
if (_Chart.c('xScaleType').value === 'linear') {
return Number(line[1])
} else if (_Chart.c('xScaleType').value === 'time') {
return moment(line[1], _Chart.c('dateFormat').value).toDate();
} else {
return line[1];
}
}yValue
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }Default accessor:
function (line) { return Number(line[2]); }Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
External Events
Example
var time = [
['North', '2015-01-01', 19000],
['North', '2015-01-02', 11000],
['North', '2015-01-03', 17000],
['North', '2015-01-04', 10000],
['North', '2015-01-05', 17000],
['South', '2015-01-01', 12000],
['South', '2015-01-02', 12000],
['South', '2015-01-03', 13000],
['South', '2015-01-04', 14000],
['South', '2015-01-05', 15000],
['East', '2015-01-01', 12000],
['East', '2015-01-02', 12000],
['East', '2015-01-03', 13000],
['East', '2015-01-04', 14000],
['East', '2015-01-05', 15000],
];
var linear = [
['North', 5, 19000],
['North', 6, 11000],
['North', 7, 17000],
['North', 8, 9000 ],
['North', 9, 17000],
['South', 5, 12000],
['South', 6, 12000],
['South', 7, 13000],
['South', 8, 14000],
['South', 9, 15000],
['West', 5, 12000],
['West', 6, 12000],
['West', 7, 13000],
['West', 8, 14000],
['West', 9, 15000],
];
var svg = d3.select('#vis').append('svg')
.style({
'width': '1200px',
'height': '1000px'
});
//Initialze the widget
var chart = svg
.append('g')
.attr('transform', 'translate(' + 60 + ',' + 50 + ')')
.chart('StackedAreaChart')
.config({
'width': 400,
'height': 400,
// 'xValueFormat': function(value) {
// return value.series;
// },
// 'xValueFormat': function(value) {
// return moment(value).format('ddd');
// },
// 'yValueFormat': function(value) {
// return value.y;
// },
// 'rectangleHover': 'step-after',
'xScaleType': {name: 'Time', value: 'time'},
// 'xScaleType': {name: 'Linear', value: 'linear'},
});
//Render the chart with data
chart._notifier.showMessage(true);
// chart.c('dateFormat', { name: 'Year-Month (2015-12)', value: 'YYYY-MM' })
// chart.c('dateFormat', { name: 'Year-Month-Day (2015-12-31)', value: 'YYYY-MM-DD' })
chart.c('dateFormat', { name: 'Year-Month-Day Hour-Minute-Second (2015-12-31 23:59:59)', value: 'YYYY-MM-DD hh:mm:ss' })
// chart.c('xAxisDateFormat', { name: 'Seconds', value: 'ss' })
// chart.c('xAxisDateFormat', { name: 'Minutes', value: 'mm' })
// chart.c('xAxisDateFormat', { name: 'Hours', value: 'hh' })
// chart.c('xAxisDateFormat', { name: 'Time (12:59)', value: 'hh:mm' })
// chart.c('xAxisDateFormat', { name: 'Day (31)', value: 'DD' })
// chart.c('xAxisDateFormat', { name: 'Day (Mon)', value: 'ddd' })
// chart.c('xAxisDateFormat', { name: 'Week-## (Week-01)', value: '[Week-]ww' })
chart.c('xAxisDateFormat', { name: 'Week-## Year (Week-01 2015)', value: '[Week-]ww YYYY' })
// chart.c('xAxisDateFormat', { name: 'Month (12)', value: 'MM' })
// chart.c('xAxisDateFormat', { name: 'Month (Dec)', value: 'MMM' })
// chart.c('xAxisDateFormat', { name: 'Year (15)', value: 'YY' })
// chart.c('xAxisDateFormat', { name: 'Year (2015)', value: 'YYYY' })
// chart.c('xAxisDateFormat', { name: 'Month-Day (12-31)', value: 'MM-DD' })
// chart.c('xAxisDateFormat', { name: 'Month-Year (12-15)', value: 'MM-YY' })
// chart.c('xAxisDateFormat', { name: 'Month Year (Dec 15)', value: 'MMM YY' })
// chart.c('xAxisDateFormat', { name: 'Year-Month (15-Dec)', value: 'YY-Dec' })
var a = [
['A', '2015-01', 3],
['A', '2015-02', 5],
['A', '2015-03', 4],
['A', '2015-04', 2],
['B', '2015-01', 3],
['B', '2015-02', 5],
['B', '2015-03', 4],
['B', '2015-04', 2],
['C', '2015-01', 3],
['C', '2015-02', 5],
['C', '2015-03', 4],
['C', '2015-04', 2],
]
var b = [
['A', '2015-01-01', 3],
['A', '2015-02-01', 5],
['A', '2015-03-01', 4],
['A', '2015-04-01', 2],
['B', '2015-01-01', 3],
['B', '2015-02-01', 5],
['B', '2015-03-01', 4],
['B', '2015-04-01', 2],
['C', '2015-01-01', 3],
['C', '2015-02-01', 5],
['C', '2015-03-01', 4],
['C', '2015-04-01', 2],
]
var c = [
['A', '2015-01-01 1:10:10', 3],
['A', '2015-02-01 1:20:10', 5],
['A', '2015-03-01 1:30:10', 4],
['A', '2015-04-01 1:40:10', 2],
['B', '2015-01-01 1:10:10', 3],
['B', '2015-02-01 1:20:10', 5],
['B', '2015-03-01 1:30:10', 4],
['B', '2015-04-01 1:40:10', 2],
['C', '2015-01-01 1:10:10', 3],
['C', '2015-02-01 1:20:10', 5],
['C', '2015-03-01 1:30:10', 4],
['C', '2015-04-01 1:40:10', 2],
]
// chart.draw(a)
// chart.draw(b)
// chart.draw(c)
chart.draw(time);
// chart.draw(linear);
// var testData = a;
// var testData = b;
var testData = c;
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Seconds', value: 'ss' })
// .draw(testData);
// }, 500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Minutes', value: 'mm' })
// .draw(testData);
// }, 1000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Hours', value: 'hh' })
// .draw(testData);
// }, 1500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Time (12:59)', value: 'hh:mm' })
// .draw(testData);
// }, 2000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Day (31)', value: 'DD' })
// .draw(testData);
// }, 2500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Day (Mon)', value: 'ddd' })
// .draw(testData);
// }, 3000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Week-## (Week-01)', value: '[Week-]ww' })
// .draw(testData);
// }, 3500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Week-## Year (Week-01 2015)', value: '[Week-]ww YYYY' })
// .draw(testData);
// }, 4000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Month (12)', value: 'MM' })
// .draw(testData);
// }, 4500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Month (Dec)', value: 'MMM' })
// .draw(testData);
// }, 5000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Year (15)', value: 'YY' })
// .draw(testData);
// }, 5500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Year (2015)', value: 'YYYY' })
// .draw(testData);
// }, 6000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Month-Day (12-31)', value: 'MM-DD' })
// .draw(testData);
// }, 6500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Month-Year (12-15)', value: 'MM-YY' })
// .draw(testData);
// }, 7000);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Month Year (Dec 15)', value: 'MMM YY' })
// .draw(testData);
// }, 7500);
// setTimeout(function() {
// chart.c('xAxisDateFormat', { name: 'Year-Month (15-Dec)', value: 'YY-MMM' })
// .draw(testData);
// }, 8000);