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)