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)