Spyral.Chart(targetopt, data)

The Chart class in Spyral. This class provides methods for creating a variety of charts. Charts are created using the Highcharts Library. Highcharts have many configuration options and Spyral.Chart helps to streamline the process. A simple example:

Spyral.Chart.line({ series: [{ data: [0,2,1,3] }] })

A more complex example:

Spyral.Chart.column({
	title: 'Wildflowers',
	series: [{
		name: 'Ontario',
		data: [13, 39, 139, 38]
	},{
		name: 'Quebec',
		data: [14, 33, 94, 30]
	}],
	xAxis: {
		title: 'Number of Petals',
		categories: [3, 4, 5, 6]
	}
})

new Chart(targetopt, data)
voyantjs/src/chart.js, line 36

Construct a new Chart class

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
data Array

An array of data to visualize.

Methods

bar(configopt) → {Highcharts.Chart}
voyantjs/src/chart.js, line 205

Create a bar chart

Parameters:
Name Type Attributes Description
config Spyral.Chart~HighchartsConfig <optional>
Returns:
Highcharts.Chart

column(configopt) → {Highcharts.Chart}
voyantjs/src/chart.js, line 227

Create a column chart

Parameters:
Name Type Attributes Description
config Spyral.Chart~HighchartsConfig <optional>
Returns:
Highcharts.Chart

create(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 83

Create a new chart. See Highcharts API for full set of config options.

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config Spyral.Chart~HighchartsConfig
Returns:
Highcharts.Chart

line(configopt) → {Highcharts.Chart}
voyantjs/src/chart.js, line 249

Create a line chart

Parameters:
Name Type Attributes Description
config Spyral.Chart~HighchartsConfig <optional>
Returns:
Highcharts.Chart

networkgraph(configopt) → {NetworkGraph}
voyantjs/src/chart.js, line 293

Create a network graph

Parameters:
Name Type Attributes Description
config NetworkGraph~Config <optional>
Returns:
NetworkGraph

scatter(configopt) → {Highcharts.Chart}
voyantjs/src/chart.js, line 271

Create a scatter plot

Parameters:
Name Type Attributes Description
config Spyral.Chart~HighchartsConfig <optional>
Returns:
Highcharts.Chart

static bar(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 216

Create a bar chart

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config Spyral.Chart~HighchartsConfig
Returns:
Highcharts.Chart

static column(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 238

Create a column chart

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config Spyral.Chart~HighchartsConfig
Returns:
Highcharts.Chart

static create(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 96

Create a new chart. See Highcharts API for full set of config options.

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config Spyral.Chart~HighchartsConfig
Returns:
Highcharts.Chart

static line(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 260

Create a line chart

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config Spyral.Chart~HighchartsConfig
Returns:
Highcharts.Chart

static networkgraph(targetopt, config) → {NetworkGraph}
voyantjs/src/chart.js, line 303

Create a network graph

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config NetworkGraph~Config
Returns:
NetworkGraph

static scatter(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 282

Create a scatter plot

Parameters:
Name Type Attributes Description
target String | Element <optional>

An element or ID to use as the chart's target. If not specified, one will be created.
config Spyral.Chart~HighchartsConfig
Returns:
Highcharts.Chart

static setSeriesData(config, data)
voyantjs/src/chart.js, line 190

Add the provided data to the config as a series

Parameters:
Name Type Description
config Spyral.Chart~HighchartsConfig
data Array

Type Definitions

HighchartsConfig
voyantjs/src/chart.js, line 37

The Highcharts config object

Properties:
Name Type Description
title string | object
subtitle string | object
credits Object
xAxis Object
yAxis Object
chart Object
series Array.<Spyral.Chart~HighchartsSeriesConfig>
plotOptions Object

HighchartsSeriesConfig
voyantjs/src/chart.js, line 50

The series config object

Properties:
Name Type Attributes Description
data Array
name string <optional>