ZoomCharts Documentation
Version: 1.21.1 (2024-11-08)

ZoomCharts.NetChart

Inheritance hierarchy

This type inherits from BaseApi.

Constructors

.ctor: (settings: NetChartSettings)
Parameters
settings: NetChartSettings
Return value
Data type: NetChart

Methods

addData: (data: NetChartDataObject, sourceId?: string): void
Inherited from: BaseApi

Adds the given data to whatever data the chart has currently loaded. The chart will automatically be updated to display this new data if it falls within the currently visible bounds.

Parameters
sourceId: string

the ID of the data source that will be updated. The default value is default.

addFocusNode: (id: string | ItemsChartNode, relevance?: number): boolean

Focuses a node. Whether or not the node will get actually focused depends no the navigation mode.

Parameters
id: string | ItemsChartNode

Node ID or object

relevance: number

Explicitly assigned relevance (used only by Focusnodes navigation mode). For more information, see the Focusnodes algorithm

See also
Return value
Data type: boolean
addSubchartContainer: (container: HTMLElement): void
Inherited from: BaseApi
This property is deprected; use settings.parentChart instead.
Parameters
container: string | HTMLElement
back: (): this
Inherited from: BaseApi
Return value
Data type: this
clearFocus: (): void

Removes focus from all nodes. The exact effect depends on the navigation mode.

clearHistory: (): this
Inherited from: BaseApi
Return value
Data type: this
closeNode: (id: string | ItemsChartNode): void

Closes a node. The exact effect depends on the navigation mode.

Parameters
id: string | ItemsChartNode

Node ID or object

collapseNode: (id: string | ItemsChartNode, expandMode?: string): void

Collapses a node. The exact effect depends on the navigation mode.

Parameters
id: string | ItemsChartNode

Node ID or object

expandMode: string
customize: (name: string): this
Inherited from: BaseApi

Applies one of the built-in themes to the chart. This is an alternative to calling updateSettings({ theme: ZoomCharts.NetChart.themes.dark }).

Parameters
name: string

The name of the theme to be applied, must be one of the values defined in the NetChart.themes static property.

Return value
Data type: this
expandNode: (id: string | ItemsChartNode, depth?: number, expandMode?: string): void

Expands a visible node.

Parameters
id: string | ItemsChartNode

Node ID or object

depth: number
expandMode: string
export: (type: "png" | "jpg" | "pdf" | "csv" | "xlsx", dimensions?: BaseExportDimensions, transparent?: boolean, fileName?: string): void
Inherited from: BaseApi

Launches a file download that contains an image or the data of the current state of the chart.

Note that in some browsers calling this method will send the data to a proxy. When handling sensitive data you should install the proxy on your own server, see advanced.exportProxyURL setting.

Parameters
type: "png" | "jpg" | "pdf" | "csv" | "xlsx"

The format in which the data will be exported.

dimensions: BaseExportDimensions

Specifies the dimensions for the image formats.

transparent: boolean
Version 1.12.0: default changed to false.

Specifies if the resulting image should have transparent background. This setting is only valid for png image format. Default is false.

Note that if area.style.fillColor is set, this will have no effect.

fileName: string

Specifies the fileName to be used, excluding fileExtension

exportAsString: (type: "png" | "jpg" | "pdf" | "csv" | "xlsx", callback: (dataUri: string, mimeType: string, extension: string) => void, dimensions?: BaseExportDimensions, transparent?: boolean): void
Inherited from: BaseApi

Saves the current chart state as a data-URI.

If image type is specified, the URI can be used as the image source in <img src="">.

Note that some output settings might require sending the data to a proxy. When handling sensitive data you should install the proxy on your own server, see advanced.exportProxyURL setting.

Parameters
type: "png" | "jpg" | "pdf" | "csv" | "xlsx"

The format in which the data will be exported.

callback: (dataUri: string, mimeType: string, extension: string) => void

The callback that will be invoked once the result is generated.

Parameters
dataUri: string

The data-uri that contains the generated image or data file.

mimeType: string

The mime type of the generated file.

extension: string

The extension of the generated file.

dimensions: BaseExportDimensions

Specifies the dimensions for the image formats.

transparent: boolean

Specifies if the resulting image should have transparent background. This setting is only valid for png image format. Default is false.

Note that if area.style.fillColor is set, this will have no effect.

exportData: (visibleOnly?: boolean, exportCoordinates?: boolean): NetChartDataObject
Parameters
visibleOnly: boolean
exportCoordinates: boolean
Return value
Data type: NetChartDataObject
exportGetDimensions: (dimensions: BaseExportDimensions): { width: number; height: number; scale: number; chartWidth: number; chartHeight: number; }
Inherited from: BaseApi
This property is deprected; use `exportImageGetDimensions` instead

Returns the dimensions for the image exported with exportImageAsString.

Parameters
dimensions: BaseExportDimensions
Return value
Data type: anonymous type
Properties
width: number
height: number
scale: number
chartWidth: number
chartHeight: number
exportImageAsString: (type: "png" | "jpg" | "pdf" | "csv" | "xlsx", dimensions: BaseExportDimensions, transparent: boolean): string
Inherited from: BaseApi
This property is deprected; use `exportAsString` instead.

Saves the current chart state as an image.

Note that this method does not support custom DPI setting, for that exportAsString method has to be used.

Parameters
type: "png" | "jpg" | "pdf" | "csv" | "xlsx"
dimensions: BaseExportDimensions
transparent: boolean
Return value
Data type: string

A base64 encoded data-URI that contains the image data. This URI can be used as the image source in <img src="">.

exportImageGetDimensions: (dimensions: BaseExportDimensions): { width: number; height: number; scale: number; chartWidth: number; chartHeight: number; }
Inherited from: BaseApi

Returns the dimensions for the image exported with exportImageAsString.

Parameters
dimensions: BaseExportDimensions
Return value
Data type: anonymous type
Properties
width: number
height: number
scale: number
chartWidth: number
chartHeight: number
freezeLayout: (): void
fullscreen: (isFullscreen?: boolean): boolean
Inherited from: BaseApi

Gets or sets the fullscreen state of the chart.

Parameters
isFullscreen: boolean

specify true or false to set the state, omit the value to get the current state.

Return value
Data type: boolean
getHiddenNodes: (): Array<string>
Return value
Data type: Array<string>
getNode: (id: string): ItemsChartNode

Gets a visible node by its ID

Parameters
id: string

Node ID

Return value
Data type: ItemsChartNode
getNodeDimensions: (node: ItemsChartNode): { x: number; y: number; radius: number; hwidth: number; }
Parameters
Return value
Data type: anonymous type
Properties
x: number
y: number
radius: number
hwidth: number
hideMenu: (): this
Return value
Data type: this
hideNode: (id: string | ItemsChartNode): void

Hides a visible node. Whether or not the node will get actually hidden depends on the navigation mode.

Parameters
id: string | ItemsChartNode

Node ID or object

home: (): boolean
Inherited from: BaseApi
Return value
Data type: boolean
lockNode: (id: string | ItemsChartNode, x: number, y: number): void

Fixates a node in place.

Parameters
id: string | ItemsChartNode

Node ID or object

x: number
y: number

Y position, in scene coordinates

nodes: (): Array<ItemsChartNode>
Return value
Data type: Array<ItemsChartNode>
off: (name: string, listener: (event: BaseMouseEvent, args: BaseChartEventArguments) => void): boolean
Inherited from: BaseApi

Removes an event listener that was added by a call to on or by specifying it in settings. Note that the listener must be the exact same reference, which means that anonymous functions should not be used in call to on.

Parameters
name: string

the type of the event. Please see the documentation for on about valid values.

listener: (event: BaseMouseEvent, args: BaseChartEventArguments) => void
Parameters
Return value
Data type: boolean

true if the listener was removed, false if the listener was not previously registered.

on: (name: string, listener: (event: BaseMouseEvent, args: BaseChartEventArguments) => void): void
Inherited from: BaseApi

Adds event listener.

Parameters
name: string

The type of the event for which the listener will be added. See method overloads for valid values.

listener: (event: BaseMouseEvent, args: BaseChartEventArguments) => void

The callback function. It receives two arguments - the mouse event data and a separate object containing chart specific information.

Parameters
Overloads
on: (name: "chartUpdate", listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void): void
Parameters
name: "chartUpdate"
listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void
Parameters
on: (name: "click", listener: (event: BaseMouseEvent, args: NetChartChartClickEventArguments) => void): void
Parameters
name: "click"
on: (name: "doubleClick", listener: (event: BaseMouseEvent, args: NetChartChartClickEventArguments) => void): void
Parameters
name: "doubleClick"
on: (name: "error", listener: (event: BaseMouseEvent, args: BaseChartErrorEventArguments) => void): void
Parameters
name: "error"
listener: (event: BaseMouseEvent, args: BaseChartErrorEventArguments) => void
Parameters
event: BaseMouseEvent

An empty mouse event.

on: (name: "hoverChange", listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void): void
Parameters
name: "hoverChange"
listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void
Parameters
on: (name: "pointerDown", listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void): void

Adds an event listener for pointer down event.

Parameters
name: "pointerDown"
listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void
Parameters
on: (name: "dataUpdated", listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void): void

Adds an event listener for pointer down event.

Parameters
name: "dataUpdated"
listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void
Parameters
on: (name: "positionChange", listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void): void
Parameters
name: "positionChange"
listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void
Parameters
on: (name: "rightClick", listener: (event: BaseMouseEvent, args: NetChartChartClickEventArguments) => void): void
Parameters
name: "rightClick"
on: (name: "selectionChange", listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void): void
Parameters
name: "selectionChange"
listener: (event: BaseMouseEvent, args: NetChartChartEventArguments) => void
Parameters
on: (name: "settingsChange", listener: (event: BaseMouseEvent, args: BaseChartSettingsChangeEventArguments) => void): void
Parameters
name: "settingsChange"
on: (name: "tripleClick", listener: (event: BaseMouseEvent, args: NetChartChartClickEventArguments) => void): void
Parameters
name: "tripleClick"
paintNow: (force?: boolean): this
Inherited from: BaseApi

Does immediate repaint. Use to sync updates between multiple charts.

Parameters
force: boolean
Return value
Data type: this
profiler: (): BaseProfiler
Inherited from: BaseApi
Return value
Data type: BaseProfiler
reloadData: (sourceId?: string): void
Inherited from: BaseApi

Clears data cache and loads new data. The current view is preserved.

Parameters
sourceId: string
remove: (): void
Inherited from: BaseApi

Removes chart from DOM. This method is automatically called when you create a new chart within the same container element.

This method should always be called when the chart HTML element is removed as otherwise there might be additional resources such as event handlers remaining that will prevent the browser from properly releasing memory.

removeData: (data: NetChartDataObject, sourceId?: string): void

Removes the given nodes and links from the chart. Note that only the ID values have to be given, all other properties are ignored.

Parameters
sourceId: string
removeFocusNode: (id: string | ItemsChartNode): void

Removes focus from a node. Whether or not the node will get actually unfocused depends on the navigation mode.

Parameters
id: string | ItemsChartNode

Node ID or object

replaceData: (data: NetChartDataObject, sourceId?: string): void
Inherited from: BaseApi

Replaces the data already in the data cache with the given values.

Parameters
sourceId: string

the ID of the data source that will be updated. The default value is default.

replaceSettings: (changes: NetChartSettings): this
Inherited from: BaseApi
Introduced in version 1.10.0.

Updates the chart settings but instead of merging some settings that are arrays or dictionaries (such as data) these collections are replaced completely. For example, this allows removal of series or value axis within TimeChart.

Parameters
changes: NetChartSettings
Return value
Data type: this
resetLayout: (): void

Rearranges all nodes to their default locations (note that for dynamic layout these positions are not deterministic) and enables automatic "overview" zoom.

Note that these actions are done without animations.

restoreState: (state: string, animate?: boolean): void
Inherited from: BaseApi
Parameters
state: string
animate: boolean
resumePaint: (): void
Inherited from: BaseApi
Experimental property - the API might not be stable and is subject to change.

Decrements the suspend counter that was set using suspendPaint() method.

This method also automatically schedules an async repaint.

saveAsImage: (type: "png" | "jpg" | "pdf" | "csv" | "xlsx", dimensions: BaseExportDimensions, transparent: boolean): string
Inherited from: BaseApi
This property is deprected; use `exportAsString` instead

Saves the current chart state as an image.

Parameters
type: "png" | "jpg" | "pdf" | "csv" | "xlsx"
dimensions: BaseExportDimensions
transparent: boolean
Return value
Data type: string

A base64 encoded data-URI that contains the image data. This URI can be used as the image source in <img src="">.

saveState: (): string
Inherited from: BaseApi
Return value
Data type: string
scrollIntoView: (nodes: Array<string> | Array<ItemsChartNode>, margins?: [number, number, number, number]): void

Animates the viewport to zoom into and contain the nodes specified in the given array

Parameters
nodes: Array<string> | Array<ItemsChartNode>

Nodes to zoom to

margins: [number, number, number, number]

Optionally, additional margins (in scene coordinates) to leave free on the sides. Order: top, right, bottom, left

selection: (selected?: Array<string | ItemsChartNode | ItemsChartLink>): Array<ItemsChartNode | ItemsChartLink>
Version 1.16.0: the method now accepts link ID values.

Set/Get selected objects.

Parameters
selected: Array<string | ItemsChartNode | ItemsChartLink>

array of objects identifiers to select. Do not pass this parameter if you don't want to change current selection.

Return value
Data type: Array<ItemsChartNode | ItemsChartLink>

currently selected objects.

showNode: (id: string): void

Shows a node by its ID. The data for the node gets requested in the standard manner. Whether or not the node will get actually shown depends on the navigation mode.

Parameters
id: string

Node ID

showNodeMenu: (node: string | ItemsChartNode): void

Shows context menu, when either node id or INode interface object is passed as a parameter.

Parameters
suspendPaint: (): void
Inherited from: BaseApi
Experimental property - the API might not be stable and is subject to change.

Suspends the animation of the chart until resumePaint() is called.

This should be used when the chart element is hidden from the user to conserve browser resources.

Note that if suspendPaint() is called multiple time then resumePaint() has to be called the same number of times.

unfreezeLayout: (): void
unlockNode: (id: string | ItemsChartNode): void

Unfixates a node and allows it to be repositioned by the layout algorithms.

Parameters
id: string | ItemsChartNode

Node ID or object

updateFilters: (): void
Inherited from: BaseApi

Re-evaluate data filters on next paint.

updateSettings: (changes: NetChartSettings): this
Inherited from: BaseApi

Updates the chart settings. Only the settings that have to be changed should be passed. Note that some arrays and dictionaries (such as data) are merged by the ID values - if instead they should be replaced, use replaceSettings() method.

Parameters
changes: NetChartSettings
Return value
Data type: this
updateSize: (): this
Inherited from: BaseApi

Call when the container size has been changed to update the chart.

Return value
Data type: this
updateStyle: (objects?: Array<string>): void
Inherited from: BaseApi

Updates (recalculates) the style for the whole chart or specific objects matching the given IDs.

Parameters
objects: Array<string>

A list of IDs for the nodes and links which need their style recalculated

zoom: (zoomValue?: number | "auto" | "overview" | "in" | "out", animate?: boolean): number
Version 1.13.2: added the animate parameter.
Version 1.17.0: added the string parameter support for zoomValue parameter.

Gets or sets the current zoom level of the chart. A zoom level of 1 means that all nodes are rendered with the radius that is set in their configuration. A zoom level of 2 means that all nodes are twice the size and 0.5 means that all nodes are two times smaller than their specified radiuses.

The zoom level is limited by interaction.zooming.zoomExtent setting.

Passing auto will enable the simple auto-zoom mode, passing overview will enable the auto-zoom that shows the whole network.

Parameters
zoomValue: number | "auto" | "overview" | "in" | "out"

if specified and greater than zero, the zoom level will be updated to this value.

animate: boolean

specifies if the zoom change should be animated. The default is true.

Return value
Data type: number

the current zoom level. Note that if the zoom level is changed with an animation, the method returns the current and not the target level.

zoomIn: (objects: Array<string>, animate?: boolean): void
Use `scrollIntoView()` instead.
Parameters
objects: Array<string>
animate: boolean

Static properties

themes: anonymous type

Lists the predefined themes for the chart. These can be used within the settings objects or via the customize() method:

var chart = new ZoomCharts.NetChart({ theme: ZoomCharts.NetChart.themes.dark });
chart.updateSettings({ theme: ZoomChart.NetChart.themes.dark });
chart.customize("dark");
Properties
dark: NetChartSettings
Introduced in version 1.8.0.

Properties

typeName: string
Inherited from: BaseApi

Gets the name of the chart the JavaScript object references. For example 'PieChart' or 'TimeChart'. This field is read-only.

X