# GC.Spread.Sheets.Sparklines.VariSparkline

## Content

# Class: VariSparkline

[Sheets](../modules/GC.Spread.Sheets).[Sparklines](../modules/GC.Spread.Sheets.Sparklines).VariSparkline

## Hierarchy

- [`SparklineEx`](GC.Spread.Sheets.Sparklines.SparklineEx)

  ↳ **`VariSparkline`**

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.Sparklines.VariSparkline#constructor)

### Properties

- [typeName](GC.Spread.Sheets.Sparklines.VariSparkline#typename)

### Methods

- [createFunction](GC.Spread.Sheets.Sparklines.VariSparkline#createfunction)
- [fromJSON](GC.Spread.Sheets.Sparklines.VariSparkline#fromjson)
- [name](GC.Spread.Sheets.Sparklines.VariSparkline#name)
- [paint](GC.Spread.Sheets.Sparklines.VariSparkline#paint)
- [toJSON](GC.Spread.Sheets.Sparklines.VariSparkline#tojson)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new VariSparkline**()

Represents the class for the variance sparkline.

#### Overrides

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[constructor](GC.Spread.Sheets.Sparklines.SparklineEx#constructor)

## Properties

### <a id="typename" name="typename"></a> typeName

• **typeName**: `string`

Represents the type name string used for supporting serialization.

#### Inherited from

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[typeName](GC.Spread.Sheets.Sparklines.SparklineEx#typename)

## Methods

### <a id="createfunction" name="createfunction"></a> createFunction

▸ **createFunction**(): [`Function`](GC.Spread.CalcEngine.Functions.Function)

Creates a custom function used to provide data and settings for SparklineEx.

#### Returns

[`Function`](GC.Spread.CalcEngine.Functions.Function)

The created custom function.

#### Inherited from

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[createFunction](GC.Spread.Sheets.Sparklines.SparklineEx#createfunction)

___

### <a id="fromjson" name="fromjson"></a> fromJSON

▸ **fromJSON**(`settings`): `void`

Loads the object state from the specified JSON string.

**`example`**
```javascript
window.MySparklineEx = function(color) {
    GC.Spread.Sheets.Sparklines.SparklineEx.apply(this, arguments);
    this.typeName = 'MySparklineEx';
    this.color = color;
}
MySparklineEx.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
MySparklineEx.prototype.createFunction = function () {
    var func = new GC.Spread.CalcEngine.Functions.Function('CIRCLE', 0, 0);
    func.evaluate = function (args) {
          return {};
    };
    return func;
 };
MySparklineEx.prototype.paint = function (context, value, x, y, width, height) {
     context.beginPath();
     context.arc(x + width / 2, y + height / 2, (Math.min(width, height) - 6) / 2, 0, Math.PI * 2);
     context.strokeStyle = this.color;
     context.stroke();
};
let sparkline = new MySparklineEx("green");
sparkline.fromJSON({ color: "red", typeName: "MySparklineEx" });
spread.addSparklineEx(sparkline);
sheet.setFormula(3,3,"=CIRCLE()");
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `settings` | `Object` | The sparklineEx data from deserialization. |

#### Returns

`void`

#### Inherited from

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[fromJSON](GC.Spread.Sheets.Sparklines.SparklineEx#fromjson)

___

### <a id="name" name="name"></a> name

▸ **name**(): `string`

Gets the name of SparklineEx.

**`example`**
```javascript
window.MySparklineEx = function(color) {
    GC.Spread.Sheets.Sparklines.SparklineEx.apply(this, arguments);
    this.typeName = 'MySparklineEx';
    this.color = color;
}
MySparklineEx.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
MySparklineEx.prototype.createFunction = function () {
    var func = new GC.Spread.CalcEngine.Functions.Function('CIRCLE', 0, 0);
    func.evaluate = function (args) {
          return {};
    };
    return func;
 };
MySparklineEx.prototype.paint = function (context, value, x, y, width, height) {
     context.beginPath();
     context.arc(x + width / 2, y + height / 2, (Math.min(width, height) - 6) / 2, 0, Math.PI * 2);
     context.strokeStyle = this.color;
     context.stroke();
};
let sparkline = new MySparklineEx('green');
console.log(sparkline.name());
```

#### Returns

`string`

The SparklineEx's name.

#### Inherited from

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[name](GC.Spread.Sheets.Sparklines.SparklineEx#name)

___

### <a id="paint" name="paint"></a> paint

▸ **paint**(`context`, `value`, `x`, `y`, `width`, `height`): `void`

Paints the SparklineEx on the canvas.

**`example`**
```javascript
window.MySparklineEx = function(color) {
    GC.Spread.Sheets.Sparklines.SparklineEx.apply(this, arguments);
    this.typeName = 'MySparklineEx';
    this.color = color;
}
MySparklineEx.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
MySparklineEx.prototype.createFunction = function () {
    var func = new GC.Spread.CalcEngine.Functions.Function('CIRCLE', 0, 0);
    func.evaluate = function (args) {
          return {};
    };
    return func;
 };
MySparklineEx.prototype.paint = function (context, value, x, y, width, height) {
     context.beginPath();
     context.arc(x + width / 2, y + height / 2, (Math.min(width, height) - 6) / 2, 0, Math.PI * 2);
     context.strokeStyle = this.color;
     context.stroke();
};
let sparkline = new MySparklineEx('green');
spread.addSparklineEx(sparkline);
let sheet = spread.getActiveSheet();
sheet.setFormula(3,3,"=CIRCLE()");
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `context` | `CanvasRenderingContext2D` | The canvas's two-dimensional context. |
| `value` | `any` | The value evaluated by the custom function. |
| `x` | `number` | <i>x</i>-coordinate relative to the canvas. |
| `y` | `number` | <i>y</i>-coordinate relative to the canvas. |
| `width` | `number` | The cell's width. |
| `height` | `number` | The cell's height. |

#### Returns

`void`

#### Inherited from

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[paint](GC.Spread.Sheets.Sparklines.SparklineEx#paint)

___

### <a id="tojson" name="tojson"></a> toJSON

▸ **toJSON**(): `Object`

Saves the object state to a JSON string.

**`example`**
```javascript
window.MySparklineEx = function(color) {
    GC.Spread.Sheets.Sparklines.SparklineEx.apply(this, arguments);
    this.typeName = 'MySparklineEx';
    this.color = color;
}
MySparklineEx.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
MySparklineEx.prototype.createFunction = function () {
    var func = new GC.Spread.CalcEngine.Functions.Function('CIRCLE', 0, 0);
    func.evaluate = function (args) {
          return {};
    };
    return func;
 };
MySparklineEx.prototype.paint = function (context, value, x, y, width, height) {
     context.beginPath();
     context.arc(x + width / 2, y + height / 2, (Math.min(width, height) - 6) / 2, 0, Math.PI * 2);
     context.strokeStyle = this.color;
     context.stroke();
};
let sparkline = new MySparklineEx('green');
console.log(sparkline.toJSON()); // { color: "green", typeName: "MySparklineEx", _name: "CIRCLE" }
```

#### Returns

`Object`

The sparklineEx data.

#### Inherited from

[SparklineEx](GC.Spread.Sheets.Sparklines.SparklineEx).[toJSON](GC.Spread.Sheets.Sparklines.SparklineEx#tojson)