LineAreaChart - Documentation

Properties

curve :Object (d3.curveLinear)

Curve shape for Line and Area Plots. You can use any d3.Curve type

Example

//Sets a step curve type
viz.curve(d3.curveStep)

data :Array (Needs to be set at runtime)

Array of Arrays. Each array represents a series of data. Assumes each series has the same length and same collection of xScale ordinal values.

Example

[
 // Series 1 (Apple Stocks)
 [
   {"symbol": "AAPL",  "name": "Apple Inc", "date": "2010-01-05T08:00:00.000Z", "Open": 30.66, "High": 30.8, "Low": 30.46, "Close": 30.63, "Volume": 150476004},
   {"symbol": "AAPL", "name": "Apple Inc", "date": "2010-01-06T08:00:00.000Z", "Open": 30.63, "High": 30.75, "Low": 30.11, "Close": 30.14, "Volume": 138039594},
   ...
 ],
 // Series 2 (Google Stocks)
 [
   {"symbol": "GOOGL", "name": "Google Inc", "date": "2010-01-05T08:00:00.000Z", "Open": 313.9, "High": 314.23, "Low": 311.08, "Close": 312.31, "Volume": 3007857},
   {"symbol": "GOOGL", "name": "Google Inc", "date": "2010-01-06T08:00:00.000Z", "Open": 313.24, "High": 313.24, "Low": 303.48, "Close": 304.43, "Volume": 3980628},
   ...
 ],
 ...
]

dataTipRenderer :function (internal.dataTipRenderer)

The dataTipRenderer is used to customize the data tip that is shown on mouse-over events. You can append to or modify the 'tip' parameter to customize the data tip. You can also return modified x, y coordinates to place the data tip in a different location.

Example

// tip - html DIV element
// e - svg rect of the bar being moused over
// d - datum
// i - datum index
// j - group index (optional)
// x - suggested x position of data tip
// y - suggested y position of data tip
// return {Array} [x, y] - x and y coordinates placing data tip.

function dataTipRenderer(tip, e, d, i, j, x, y) {
	 var html = '<div class="vz-tip-header1">HEADER1</div>' +
	 '<div class="vz-tip-header-rule"></div>' +
	 '<div class="vz-tip-header2"> HEADER2 </div>' +
	 '<div class="vz-tip-header-rule"></div>' +f
	 '<div class="vz-tip-header3" style="font-size:12px;"> HEADER3 </div>';

	 var h1 = scope.y(d);
	 var h2 = scope.x(d);
	 var h3 = scope.seriesLabel(d);

	 html = html.replace("HEADER1", h1);
	 html = html.replace("HEADER2", h2);
	 html = html.replace("HEADER3", h3);

	 tip.style('height','80px').html(html);

	 return [(Number(x) + Number(d3.select(e).attr('width'))),y - 50]
}

duration :Number (500)

Duration (in milliseconds) of any component transitions.

height :Number/String (600)

Height of component in either pixels (Number) or percentage of parent container (XX%)

Example

viz.height(600) or viz.height('100%');

layout :String ('OVERLAP')

Determines layout of a LineArea Chart. Can use either 'OVERLAP', 'STACKED', or 'STREAM'

margin :Object ({top:'5%', bottom:'5%', left:'8%', right:'10%'})

Margins between component render area and border of container. This can either be a fixed pixels (Number) or a percentage (%) of height/width.

seriesLabel :function (function (d) { return d.series })

Function that returns the series label of the datum

Example

viz.seriesLabel(function(d,i) { return d.myProperty });

useZoom :Boolean (true)

Enables zoom functionality of the chart. When set to true the use can zoom and pan into the chart data using a scroll wheel or gesture enabled track pad.

width :Number/String (600)

Width of component in either pixels (Number) or percentage of parent container (XX%)

Example

viz.width(600) or viz.width('100%');

x :function (Must be set at runtime)

Function that returns the datum property used to calculate horizontal position of the line/area plot. This accessor is called for each bar that is being rendered.

Example

viz.x(function(d,i) { return Number(d.myProperty) });

xAxis :d3.axis (d3.axisBottom)

D3 Axis used to render x (bottom) axis. This axis can be overriden with custom settings by capturing the 'measure' event.

Example

viz.on('measure', function () { viz.xAxis().tickSize(10) }) //Sets each axis tick to 10 pixels

xScale :d3.scale (undefined - set at runtime automatically)

Scale type used to measure and position plots along the x-axis. The chart will try and auto-determine the scale type based on the value type being returned by the viz.y accessor. String values will use a d3.scaleBand, date values will use a d3.scaleTime, and numeric values will use a d3.scaleLinear. The scale, or scale properties can be overridden by capturing the "measure" event and accessing/modifying the scale.

Example

viz.on('measure', function () { viz.xScale().range([0, 600]) }) //Sets max width of scale to 600

xTickFormat :function (function (d) { return d })

Label formatter for the x axis. Can be customized to modify labels along axis.

Example

//Sets each axis tick label to a currency format
viz.xTickFormat(function (d, i) { return '$' + d3.format('.2f')(d) })

y :function (Must be set at runtime)

Function that returns the datum property used to calculate the vertical position of the line/area plot. This accessor is called for each bar that is being rendered.

Example

viz.y(function(d,i) { return Number(d.myProperty) });

yAxis :d3.axis (d3.axisLeft)

D3 Axis used to render y (left) axis. This axis can be overriden with custom settings by capturing the 'measure' event.

Example

viz.on('measure', function () { viz.yAxis().tickSize(10) }) //Sets each axis tick to 10 pixels

yScale :d3.scale (d.scaleLinear())

Scale type used to measure and position plots along the y-axis. The scale, or scale properties can be overridden by capturing the "measure" event and accessing/modifying the scale.

Example

viz.on('measure', function () { viz.scaleY().range([0, 600]) }) //Sets max height of scale to 600;

yTickFormat :function (function (d) { return d })

Label formatter for the y axis. Can be customized to modify labels along axis.

Example

//Sets each axis tick label to a currency format
viz.yTickFormat(function (d, i) { return '$' + d3.format('.2f')(d) })

Methods

applyCallbacks()

Used to set listeners to multiple events at once.

This method is usually called internally from a vizuly2.core.component to set listeners for style specific methods.

Example

var stylesCallbacks = [
   {on: 'updated.styles', callback: applyStyles},
   {on: 'mouseover.styles', callback: styles_onMouseOver},
   {on: 'mouseout.styles', callback: styles_onMouseOut}
 ];

 viz.applyCallbacks(stylesCallbacks);

applyStyles(styles)

Used to apply a collection of styles at one time

Parameters:

Name	Type	Description
`styles`	String	A style collection object

Example

var blueStyles =
  {
    'background-color-top': '#021F51',
    'background-color-bottom': '#039FDB',
    'value-label-color': '#FFF',
    'x-axis-label-color': '#FFF',
    'y-axis-label-color': '#FFF',
  	 'bar-fill': '#02C3FF',
  	 'axis-stroke': '#FFF',
  	 'bar-radius': 0
  }

 viz.applyStyles(blueStyles);

clearStyles()

Used to clear all runtime styles and set all styles back to components default style settings.

destroy()

Removes the component from the DOM and removes all event listeners. Typically this is called when a page programmer is removing the component from memory and wants to free the component up for garbage collection by the browser.

getStyle(style, args)

Used by the component at runtime to get the current value for a given style. This can be either the default style or runtime applied styles.

The value returned could be either a static value, or a result of a dynamic function that calculates the style at runtime.

Parameters:

Name	Type	Description
`style`	String	Name of the style
`args`	Array	Any arguments that need to be passed to the style functor

Example

// This sets all '.vz-bar' elements with a fill matching the 'bar-fill-color' style
 selection
 .selectAll('.vz-bar')
 .style('fill', function (d,i) { return viz.getStyle('bar-fill-color',arguments); });

id()

Returns a unique identifier that has been auto generated at instantiation. This ensures that multiple components of the same type will have a unique DOM id

Example

// Returns the viz parent DIV element
 document.getElementById(viz.id());

 // Alternatively you can also use
 viz.selection();

on(event, listener)

Used to set listeners to component events. Passing a null listener value will clear the event listener

Note: You can use event namespaces (D3.dispatch) to set multiple listeners for a single event

Parameters:

Name	Type	Description
`event`	String	of event to be listened for
`listener`	function	function used to capture emited event

Example

// Sets a listener to the update event
 viz.on('update', myListenerFunction);

 // Sets two namespace specific listener to a mouseover event
 viz.on('mouseover.module_1', myModule1ListenerFunction);
 viz.on('mouseover.module_2', myModule2ListenerFunction);

 // Clears the event listener for the update event
 viz.on('update', null);

onChange(Property, Listener)

Used to capture any component property change events.

Parameters:

Name	Type	Description
`Property`	String	name of change event to be listened for
`Listener`	function	function used to capture emited event

Example

// Listens for any changes to the data property
 viz.onChange('data', myListenerFunction);

parent()

Returns the parent DOM element the component appended to.

removeDataTip()

Used by internally components to remove a data tip. This is usually called on a mouseout event.

selection()

Returns a d3.selection of the component's DIV container that was created at component instantiation.

showDataTip(e, d, i, j)

Used internally by components to display a data tip. This is usually called on a mouseover event.

Parameters:

Name	Type	Description
`e`	DOMElement	The target element that triggered the call
`d`	Object	The datum associated with the triggering event
`i`	Number	The index associated with the datum
`j`	Number	Optional - The series (if one exists) asscoiated with the datum

size()

Returns a size object based on the components internal measure function with absolute pixel values. This is helpful for applying styles/decorations after the component has rendered and you want to know specific measurements of the component.

Example

size.top
size.left
size.height
size.width

style(style, value)

Used to set, retrieve and clear runtime styles

Parameters:

Name	Type	Description
`style`	String	Name of the style
`value`	function	Value of the style

Example

// Retrieves a current style value (either runtime style of default style)
 viz.style('myStyleName');

 // Sets a new style value
 viz.style('myStyleName', myStyleValue);

 // Clears a runtime style (default styles will still be active)
 viz.style('myStyleName', null);

(static) update()

Triggers the render pipeline process to refresh the component on the screen.

updateOnResize(resize, delay)

This function can be used to dynamically update a component when the window is resized. Typically this is used when the viz.size() or viz.width() is set to a percentage. A default delay of 50 milliseconds is used to buffer resize events and prevent the component from repeatedly updating while the user is resizing the window. This delay can be modified as seen in the delay parameter below.

Parameters:

Name	Type	Description
`resize`	Boolean	A `true` value will call viz.update() when the user resizes the window. A `false` value will cancel the resize.
`delay`	Number	Optional. The time in milliseconds to wait between resize events before calling `viz.update()`

Example

// Sets the width of the component to 100% and uses the resizeOnUpdate with a 100ms delay buffer.
 viz.width('100%').updateOnResize(true, 100);

validate()

Validates that all public properties (passed in props param) have non null values.

This method is usually called internally from a vizuly2.core.component measure function.

Events

In addition to component specific events, all components natively support these events produced by the vizuly2.core.component factory:

initialized, measured, styled, updated, validated

All Events can be accessed via the viz.on('eventName', myEventListener) format.

// Sets a listener to the update event
 viz.on('updated', myListenerFunction);

 // Sets two namespace specific listener to a mouseover event
 viz.on('mouseover.module_1', myModule1ListenerFunction);
 viz.on('mouseover.module_2', myModule2ListenerFunction);

 // Clears the event listener for the update event
 viz.on('updated', null);

click :VizulyEvent

Fires when user clicks a bar.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('click', function (e, d, i) { ... });

initialized :VizulyEvent

Fires after component initialize() method has been called.

Parameters:

Type	Description
VizulyComponent	viz - The viz that emited the event

measured :VizulyEvent

Fires after component measure() method has been called

Parameters:

Type	Description
VizulyComponent	viz - The viz that emited the event

mouseout :VizulyEvent

Fires when user moves the mouse off a bar.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('mouseout', function (e, d, i) { ... });

mouseover :VizulyEvent

Fires when user moves the mouse over a bar.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('mouseover', function (e, d, i) { ... });

styled :VizulyEvent

Fires after component applyStyles() method has been called.

Parameters:

Type	Description
VizulyComponent	viz - The viz that emited the event

touch :VizulyEvent

Fires when user touches a bar on a gesture enabled device.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('touch', function (e, d, i) { ... });

updated :VizulyEvent

Fires after component update() method has been called.

Parameters:

Type	Description
VizulyComponent	viz - The viz that emited the event

validated :VizulyEvent

Fires after component validate() method has been called.

Parameters:

Type	Description
VizulyComponent	viz - The viz that emited the event

zoom :VizulyEvent

Fires when user is zooming in/out or dragging the chart series via the scroll wheel or trackpad gesture.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('zoom', function (e, d, i) { ... });

zoomend :VizulyEvent

Fires when zoom operation is completed.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('zoomend', function (e, d, i) { ... });

zoomstart :VizulyEvent

Fires when zoom operation starts.

Parameters:

Name	Type	Description
`e`		DOM element that fired event
`d`		Datum associated with DOM element
`i`		Index of datum in display series
`j`		The series index of the datum
`this`		Vizuly Component that emitted event

Example

viz.on('zoomstart', function (e, d, i) { ... });