MultiLine
multiline, dependency of multiline chart
Configuration Options
chartName
Type: string
Default: "Multiline"
Name of the chart
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
generalWashoutColor
Type: color
Default: "#E4E5E5"
Color used to indicate elements that are not being highlighted
height
Type: number
Default: 250
Units: px
highlightType
Type: string
Default: "hover"
Type of highlighting
hover
Type: boolean
Default: true
Whether or not to have hover effects
initialAnimation
Type: select
Default: {"name":"Animate","value":true}
Enable or disable the initial animation
labelValue
Type: function
Default: "function (d) {\n\t return _Chart.a('Y Axis')(d);\n\t }"
Value shown on the permanent label
lineDashArray
Type: string,function
Default: "none"
stroke-dasharray to use for lines
lineHighlight
Type: string
Default: "series"
How to highlight the lines
lineOpacity
Type: number,function
Default: "function (d, i) {\n\t return 1;\n\t }"
Number or array of numbers to use for the line opacities
permanentLabelSeries
Type: number
Default: -1
Show label on each point of a series
pointHighlight
Type: string
Default: "series"
How to highlight the points
pointOpacity
Type: number,function
Default: "function (d, i) {\n\t return 0;\n\t }"
Function that returns the opacity for the points
pointStyle
Type: function
Default: "function (container) {\n\t container.append('circle')\n\t .attr({\n\t 'r': _Chart.c('radiusSize'),\n\t 'cx': _Chart.c('radiusSize'),\n\t 'cy': _Chart.c('radiusSize')\n\t });\n\t }"
Style to use for points
radiusSize
Type: number
Default: 5
Units: px
Radii of the line points
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showGradients
Type: select
Default: {"name":"Hide","value":false}
Show or hide colored gradient areas under the lines
showTooltip
Type: select
Default: {"name":"Show","value":true}
undefined
showTooltipOnPointTrigger
Type: boolean
Default: false
Whether or not to show the tooltip on point trigger
showVoronoi
Type: boolean
Default: true
Whether or not to draw the voronoi layer
strokeWidth
Type: number
Default: 1
Units: px
Width of the line
tooltipBackgroundColor
Type: color
Default: "#555555"
Background color of the tooltip
tooltipFontFamily
Type: string
Default: "Open Sans"
Font family for the tooltip
tooltipTextColor
Type: color
Default: "#FFFFFF"
Color of the tooltip text
tooltipTextSize
Type: number
Default: 12
Units: px
Size of the tooltip text
tooltipValue
Type: function
Default: "function (d) {\n\t return i18n.summaryNumber(_Chart.a('Y Axis')(d)) + ' | ' + _Chart.a('Series')(d);\n\t }"
Value shown on the tooltip
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
xScaleType
Type: string
Default: "date"
Type of x scale
Data Definition
Series
Type: string
Default validate:
function (d) {
return this.accessor(d) !== undefined;
}
Default accessor:
function (line) {
return String(line[2]);
}
X Axis
Type: number,date,string
Default validate:
function (d) {
var isValid = this.accessor(d) !== undefined;
isValid = isValid && this.accessor(d) !== '';
if (_Chart.c('xScaleType') === 'date') {
isValid = isValid && !isNaN(this.accessor(d).getTime());
}
return isValid;
}
Default accessor:
function (line) {
if (_Chart.c('xScaleType') === 'date') {
return moment(line[0]).toDate();
} else if (_Chart.c('xScaleType') === 'number') {
return Number(line[0]);
} else {
return line[0];
}
}
Y Axis
Type: number
Default validate:
function (d) {
return !isNaN(this.accessor(d));
}
Default accessor:
function (line) {
return Number(line[1]);
}
Events
Dispatch Events
External Events
external:mouseout
external:mouseover
Example
var stringData = [
['DAY 1', 0, 'North'],
['DAY 2', 4, 'North'],
['DAY 3', -3, 'North'],
['DAY 4', 4, 'North'],
['DAY 5', 3, 'North'],
['DAY 6', 4, 'North'],
['DAY 7', 3, 'North'],
['DAY 8', 4, 'North'],
['DAY 1', 0, 'South'],
['DAY 2', 3, 'South'],
['DAY 3', 4, 'South'],
['DAY 4', 5, 'South'],
['DAY 5', 2, 'South'],
['DAY 6', 3, 'South'],
['DAY 7', 4, 'South'],
['DAY 8', 5, 'South'],
['DAY 1', 0, 'East'],
['DAY 2', 2, 'East'],
['DAY 3', 1, 'East'],
['DAY 4', 2, 'East'],
['DAY 5', 4, 'East'],
['DAY 6', 3, 'East'],
['DAY 7', 1, 'East'],
['DAY 8', 2, 'East']
];
var stringChart = d3.select('#vis')
.append('svg')
.attr('height', 500)
.attr('width', 500)
.attr('transform', 'translate(50, 50)')
.append('g')
.chart('MultiLine')
.c({
height: 500,
width: 500,
xScaleType: 'string',
showGradients: true
});
stringChart.draw(stringData);