MultiLineChart
Configuration Options
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: "MultiLineChart"
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
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\t return _Chart.a('Y Axis')(d);\n\t\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\t return 1;\n\t\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\t return 0;\n\t\t }"
Function that returns the opacity for the points
pointStyle
Type: function
Default: "function (container) {\n\t\t container.append('circle')\n\t\t .attr({\n\t\t 'r': _Chart.c('radiusSize'),\n\t\t 'cx': _Chart.c('radiusSize'),\n\t\t 'cy': _Chart.c('radiusSize')\n\t\t });\n\t\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
singleColor
Type: color
Default: ""
strokeWidth
Type: number
Default: 1
Units: px
Width of the line
tickFormat
Type: function
Default: "function (d) {\n\t if (_Chart.c('xScaleType') === 'date') {\n\t return moment(d).format('M/DD/YY');\n\t }\n\t return d;\n\t }"
Label format function for the tick labels.
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\t return i18n.summaryNumber(_Chart.a('Y Axis')(d)) + ' | ' + _Chart.a('Series')(d);\n\t\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
xAddAxis
Type: select
Default: {"name":"Show","value":true}
Show X Axis
xAddBaseline
Type: select
Default: {"name":"Show","value":true}
The X axis (not including labels, ticks, and gridlines)
xAddGridlines
Type: select
Default: {"name":"Hide","value":false}
undefined
xAddLabels
Type: select
Default: {"name":"Show","value":true}
undefined
xAddTicks
Type: select
Default: {"name":"Hide","value":false}
undefined
xScaleType
Type: string
Default: "string"
Type of xScale
yAddAxis
Type: select
Default: {"name":"Show","value":true}
Show Y Axis
yAddBaseline
Type: select
Default: {"name":"Hide","value":false}
The Y axis (not including labels, ticks, and gridlines)
yAddGridlines
Type: select
Default: {"name":"Show","value":true}
undefined
yAddLabels
Type: select
Default: {"name":"Show","value":true}
undefined
yAddTicks
Type: select
Default: {"name":"Hide","value":false}
undefined
yAddZeroline
Type: select
Default: {"name":"Hide","value":false}
A line perpendicular to the zero value on the y axis
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
Example
// Line Name , Date/x-axis, value/y-axis
var dateData = [
['Jan', 1, 'North'],
['Feb', 4, 'North'],
['Mar', 3, 'North'],
['Apr', 4, 'North'],
['Jan', 2, 'South'],
['Feb', 3, 'South'],
['Mar', 4, 'South'],
['Apr', 5, 'South'],
['Jan', 4, 'East'],
['Feb', 3, 'East'],
['Mar', 1, 'East'],
['Apr', 2, 'East']
];
var chart = d3.select("#vis")
.append("svg")
.attr('height', 500)
.attr('width', 500)
.append("g")
.attr("transform", "translate(50,50)")
.chart("MultiLineChart")
.c({
width: 400,
height: 400
});
chart._notifier.showMessage(true);
chart.draw(dateData);
/*----------------------------------------------------------------------------------
// Test Update
----------------------------------------------------------------------------------*/
//setTimeout(function () {
// chart.draw([
// ['North', 'Jan', -1],
// ['North', 'Feb', 4],
// ['North', 'Mar', 3],
// ['North', 'Apr', 4],
// ['South', 'Jan', 2],
// ['South', 'Feb', 3],
// ['South', 'Mar', 4],
// ['South', 'Apr', 5]
// ]);
//}, 2000);