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

arcdiagram(configopt) → {Promise}
voyantjs/src/chart.js, line 362

Create an arc-diagram chart

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

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

dependencywheel(configopt) → {Promise}
voyantjs/src/chart.js, line 385

Create a dependency wheel chart

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

dumbbell(configopt) → {Promise}
voyantjs/src/chart.js, line 409

Create a dumbbell chart

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

heatmap(configopt) → {Promise}
voyantjs/src/chart.js, line 432

Create a heatmap chart

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

histogram(configopt) → {Promise}
voyantjs/src/chart.js, line 455

Create a histogram chart

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

item(configopt) → {Promise}
voyantjs/src/chart.js, line 478

Create an item chart

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

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

map(configopt) → {Promise}
voyantjs/src/chart.js, line 501

Create a map chart

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

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

Create a network graph

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

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

Create a pie chart

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

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

Create a polar chart

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

sankey(configopt) → {Promise}
voyantjs/src/chart.js, line 524

Create a sankey chart

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

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

Create a scatter plot

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

streamgraph(configopt) → {Promise}
voyantjs/src/chart.js, line 547

Create a streamgraph chart

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

sunburst(configopt) → {Promise}
voyantjs/src/chart.js, line 570

Create a sunburst chart

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

treegraph(config) → {Promise}
voyantjs/src/chart.js, line 593

Create a treegraph chart

Parameters:
Name Type Description
config Spyral.Chart~HighchartsConfig
Returns:
Promise

treemap(configopt) → {Promise}
voyantjs/src/chart.js, line 617

Create a treemap chart

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

async, static arcdiagram(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 373

Create an arc-diagram 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:
Promise

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

async, static dependencywheel(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 396

Create a dependency wheel 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:
Promise

async, static dumbbell(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 420

Create a dumbbell 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:
Promise

async, static heatmap(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 443

Create a heatmap 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:
Promise

async, static histogram(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 466

Create a histogram 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:
Promise

async, static item(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 489

Create an item 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:
Promise

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

async, static map(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 512

Create a map 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:
Promise

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

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 pie(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 282

Create a pie 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 polar(targetopt, config) → {Highcharts.Chart}
voyantjs/src/chart.js, line 304

Create a polar 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

async, static sankey(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 535

Create a sankey 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:
Promise

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

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

async, static streamgraph(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 558

Create a streamgraph 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:
Promise

async, static sunburst(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 581

Create a sunburst 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:
Promise

async, static treegraph(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 604

Create a treegraph 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:
Promise

async, static treemap(targetopt, config) → {Promise}
voyantjs/src/chart.js, line 628

Create a treemap 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:
Promise

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>