PositiveNegativeFilledLineChart
This is a area line chart that compares possitive and negative data over time.
Configuration Options
avgLabel
Type: string
Default: Average
Label corresponding to middle average line
chartName
Type: string
Default: PositiveNegativeFilledLineChart
Name of chart for reporting
clickable
Type: boolean
Default: false
Are the area slices clicable?
dateString
Type: string
Default: YYYY
The string to use for date parcing
height
Type: number
Default: 250
Units: px
labelTextSize
Type: number
Default: 16
Units: px
Text size of the labels on the right of the chart
lossFillColor
Type: color
Default: #F27E79
Color of the bottom area
lossLineColor
Type: color
Default: #C92E25
Color of the bottom line and the corresponding label value
negLabel
Type: string
Default: Negative
Label corresponding to bottom area
posLabel
Type: string
Default: Positive
Label corresponding to top area
ratioLineColor
Type: color
Default: #333333
Color of the ratio line and the corresponding label value
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
textFontFamily
Type: string
Default: Open Sans
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
valueTextSize
Type: number
Default: 28
Units: px
Text size of the values on the right of the chart
width
Type: number
Default: 250
Units: px
winFillColor
Type: color
Default: #91D0BC
Color of the top area
winLineColor
Type: color
Default: #559E38
Color of the top line and the corresponding label value
xScale
Type: scale
Default: function scale(x) { return linear(x); }
X Scale to use
yScale
Type: scale
Default: function scale(x) { return output(x); }
Y Scale to use
Data Definition
Date
Type: date
Default validate:
function (line) { return new moment(line[0], ['YYYY-MM-DD', '[Week-]ww YYYY', 'YYYY-MMM', 'YYYY']).toDate() !== 'Invalid Date'; }Default accessor:
function (line) { return moment(line[0], ['YYYY-MM-DD', '[Week-]ww YYYY', 'YYYY-MMM', 'YYYY']).toDate(); }Losses
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }Default accessor:
function (line) { return Number(line[2]); }Ratio
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }Default accessor:
function (line) { return Number(line[3]); }Wins
Type: number
Default validate:
function (d) { return !isNaN(this.accessor(d)); }Default accessor:
function (line) { return Number(line[1]); }Events
Dispatch Events
dispatch:mouseover
dispatch:mouseout
dispatch:click
External Events
external:mouseover
external:mouseout
Example
/*----------------------------------------------------------------------------------
Create Widget -> index.html
© 2011 - 2015 DOMO, INC.
----------------------------------------------------------------------------------*/
//Setup some fake data
var data = [
['2014-01-15', 35, -34, (35 + -34)],
['2014-02-15', 53, -54, (53 + -54)],
['2014-03-15', 43, -34, (43 + -34)],
['2014-04-15', 54, -15, (54 + -15)],
['2014-05-15', 43, -25, (43 + -25)],
['2014-06-15', 12, -34, (12 + -34)],
['2014-07-15', 34, -26, (34 + -26)],
['2014-08-15', 32, -35, (32 + -35)],
['2014-09-15', 24, -12, (24 + -12)],
['2014-10-15', 45, -31, (45 + -31)],
['2014-11-15', 34, -26, (34 + -26)],
['2014-12-15', 15, -34, (15 + -34)],
['2015-01-15', 24, -36, (24 + -36)],
['2015-02-15', 26, -53, (26 + -53)],
['2015-03-15', 34, -25, (34 + -25)],
['2015-04-15', 25, -15, (25 + -15)],
['2015-05-15', 35, -25, (35 + -25)],
['2015-06-15', 43, -36, (43 + -36)],
['2015-07-15', 51, -21, (51 + -21)]
];
//Initialze the widget
var chart = d3.select('#vis')
.append('svg')
.attr({
width: 500,
height: 500
})
.append('g')
.attr('transform', 'translate(4,50)')
.chart('PositiveNegativeFilledLineChart')
.c({
width: 400,
height: 400,
});
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);
setTimeout(function() {
d3.select(chart._layerGroup.selectAll('.hover')[0][10]).style('opacity', 0);
d3.select(chart._layerGroup.selectAll('.hover')[0][11]).style('opacity', 0.2);
chart.trigger('external:mouseout', data[10]);
chart.trigger('external:mouseover', data[11]);
}, 3500)
setTimeout(function() {
d3.select(chart._layerGroup.selectAll('.hover')[0][11]).style('opacity', 0);
d3.select(chart._layerGroup.selectAll('.hover')[0][12]).style('opacity', 0.2);
chart.trigger('external:mouseout', data[11]);
chart.trigger('external:mouseover', data[12]);
}, 4000)
setTimeout(function() {
d3.select(chart._layerGroup.selectAll('.hover')[0][12]).style('opacity', 0);
chart.trigger('external:mouseout', data[12]);
}, 4500)