kupietools / Plotta.js-stockOptionsExtension

NOPE! DON'T USE THIS. See readme. <!-- fork of Plotta.js Javascript Functional Graph Library with extended functions for charting profit and loss of stock options -->

NOPE, NOPE, NOPE! I started building this to graph options profit and loss for a trading project, but Plotta.js is too unfinished to use. I spent several hours just trying to figure out how to hide the legend and title, because the 'visible' properties don't work yet, and finally realized my time could be better spent looking for a working package to build on than trying to fix the unfinished features of this one myself.

You can use what you find in this repo, some of the functions work, but I won't be working on, supporting, or paying any attention to it at all.

Original README follows:

Plotta.js is a Open Source JavaScript library that plot mathematical functions And Datas. Plotta.js Renders using an HTML5 Canvas.

Features

HTML5 Canvas

Plotta.js uses HTML5 Canvas without library dependency.

User Interections

Plotta.js supports Zoom In/Zoom Out, Data table.

Custom

You can customize various properties such as axis, grid, font, title, tics, lineDatas, and colors.

Demo

https://iamsjy17.github.io/plotta.js-page/

Version

1.1.1

RoadMap

1.0

• April 2019, Initial Release
• only supports Chrome and whale browsers.

1.1

• Coming in July 2019
• Added more documentation on usage and examples.
• Supports all major browsers.

1.2

• Coming in 2021
• Feature: Line Types.(Dotted lines, stick lines, Bar etc.)
• Feature: Add export related API(SaveAsImage, SaveAsPDF)
• Feature: Move coordinate system by dragging mouse

Browser Support

Chrome	Interner Exploer	Edge	Safari	FireFox	Whale
Latest	9+	Latest	Latest	Latest	Latest

Download

Development

Uncompressed file for development

• https://iamsjy17.github.io/plotta.js-page/release/latest/plotta.js
• https://iamsjy17.github.io/plotta.js-page/release/[VERSION]/plotta.js

Production

Compressed file for Production

• https://iamsjy17.github.io/plotta.js-page/release/latest/plotta.min.js
• https://iamsjy17.github.io/plotta.js-page/release/[VERSION]/plotta.min.js

Install

$ npm install plotta.js

Usage

HTML

<canvas
  id="canvas"
  width="700px"
  height="700px"
  style="width:700px; height:700px; border:1px solid #d3d3d3;"
></canvas>

Javascript

const canvas = document.getElementById('canvas');
const plotta = new Plotta(canvas, {
  linedatas: [
    {
      id: 'line1',
      type: 'func',
      legend: 'cos',
      color: '#55A8DE',
      visible: true,
      func: Math.cos,
      dotNum: 1000,
    },
  ],
  config: {
    title: {
      location: 'center',
      color: '#666666',
      text: 'Plotta.js',
    },
    grid: {
      visible: true,
      color: '#888888',
    },
    border: {
      visible: true,
      color: '#DDDDDD',
      width: 1,
    },
  },
});

API Documentation

Provides APIs to control various properties.

• Graph
  • UpdateGraph
• Line
  • AddLine
  • DeleteLine
• Font
  • SetFont
• Title
  • SetTitle
  • SetTitleColor
  • SetTitleLocation
• Grid
  • ShowGrid
  • SetGridColor
• Border
  • ShowBorder
  • SetBorderColor
  • SetBorderWidth
• Tics
  • ShowTics
  • SetTicsColor
  • SetTicsValue
• Axis
  • ShowAxisXLabel
  • SetAxisXLabel
  • SetAxisXLabelColor
  • SetAxisXLabelLocation
  • ShowAxisYLabel
  • SetAxisYLabel
  • SetAxisYLabelColor
  • SetAxisYLabelLocation
• Table
  • ShowTable

UpdateGraph

Description

Update all graph data And only the properties of the dataSet object with the properties of the graph.

Plotta.UpdateGraph(dataSet);

Parameters

Name	Type	Description
dataSet	Object	Data set to update

Example

Update line1, gridVisible, gridColor, borderVisible, borderColor, borderWidth.

Plotta.UpdateGraph({
  linedatas: [
    {
      id: 'line1',
      type: 'func',
      legend: 'cos',
      color: '#55A8DE',
      visible: true,
      func: Math.cos,
      dotNum: 1000,
    },
  ],
  config: {
    grid: {
      visible: true,
      color: '#888888',
    },
    border: {
      visible: true,
      color: '#DDDDDD',
      width: 1,
    },
  },
});

AddLine

Description

Add New Line. If it is an existing id, it is not added.

Plotta.AddLine(lineData);

Parameters

Name	Type	Description
lineData	Object	LineData set to Add

Example

Plotta.AddLine({
  id: 'line1',
  type: 'func',
  legend: 'cos',
  color: '#55A8DE',
  visible: true,
  func: Math.cos,
  dotNum: 1000,
});

DeleteLine

Description

Delete the line that matches the id you entered.

Plotta.DeleteLine(id);

Parameters

Name	Type	Description
id	String	Id of the line to delete

Example

Plotta.DeleteLine('line1');

SetFont

Description

Set the font.

Plotta.SetFont(font);

Parameters

Name	Type	Description
font	String	font

Example

Plotta.SetFont(`Helvetica Neue', Helvetica, Arial, sans-serif`);

SetTitle

Description

Set the graph title.

Plotta.SetTitle(title);

Parameters

Name	Type	Description
title	String	Graph Title

Example

Plotta.SetTitle('Hello Graph');

SetTitleColor

Description

set color of graph title.

Plotta.SetTitleColor(color);

Parameters

Name	Type	Description
color	String	it is parsed as a CSS <color> value.

Example

Plotta.SetTitleColor(`#FFA500`);

SetTitleLocation

Description

Set the location of the title.

Plotta.SetTitleLocation(location);

Parameters

The default value is center.

Name	Type	Description
location	String	Enter either left, center, or right.

Example

Plotta.SetTitleLocation('left');

ShowGrid

Description

Set the visibility value of the grid.

Plotta.ShowGrid(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the grid.

Example

Plotta.ShowGrid(true);

SetGridColor

Description

set color of grid.

Plotta.SetGridColor(color);

Parameters

Name	Type	Description
color	String	it is parsed as a CSS <color> value.

Example

Plotta.SetGridColor(`orange`);

ShowBorder

Description

Set the visibility value of the border.

Plotta.ShowBorder(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the border.

Example

Plotta.ShowBorder(false);

SetBorderColor

Description

set color of border.

Plotta.SetBorderColor(color);

Parameters

Name	Type	Description
color	String	it is parsed as a CSS <color> value.

Example

Plotta.SetGridColor(`black`);

SetBorderWidth

Description

set width of border.

Plotta.SetBorderWidth(width);

Parameters

Name	Type	Description
width	Number	width of border

Example

Plotta.SetBorderWidth(1);

ShowTics

Description

Set the visibility value of the ticks.

Plotta.ShowTics(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the ticks.

Example

Plotta.ShowTics(true);

SetTicsColor

Description

set color of ticks.

Plotta.SetTicsColor(color);

Parameters

Name	Type	Description
color	String	it is parsed as a CSS <color> value.

Example

Plotta.SetTicsColor(`#888888`);

SetTicsValue

Description

Set the tick value object. The tick value is the unit size of a tick on the x and y axes.

Plotta.SetTicsValue(value);

Parameters

Name	Type	Description
value	Object	An Object with x, y ticks as properties

Example

Plotta.SetTicsValue({ x: 2, y: 2 });

ShowAxisXLabel

Description

Set the visibility value of the X axis label.

Plotta.ShowAxisXLabel(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the X axis label.

Example

Plotta.ShowAxisXLabel(true);

SetAxisXLabel

Description

Set the X axis label.

Plotta.SetAxisXLabel(lebel);

Parameters

Name	Type	Description
lebel	String	X axis label.

Example

Plotta.SetAxisXLabel('X label');

SetAxisXLabelColor

Description

set color of X axis label.

Plotta.SetAxisXLabelColor(color);

Parameters

Name	Type	Description
color	String	it is parsed as a CSS <color> value.

Example

Plotta.SetAxisXLabelColor(`#888888`);

SetAxisXLabelLocation

Description

Set the location of the X axis label.

Plotta.SetAxisXLabelLocation(location);

Parameters

The default value is center.

Name	Type	Description
location	String	Enter either left, center, or right.

Example

Plotta.SetAxisXLabelLocation('center');

ShowAxisYLabel

Description

Set the visibility value of the Y axis label.

Plotta.ShowAxisYLabel(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the X axis label.

Example

Plotta.ShowAxisYLabel(true);

SetAxisYLabel

Description

Set the Y axis label.

Plotta.SetAxisYLabel(lebel);

Parameters

Name	Type	Description
lebel	String	X axis label.

Example

Plotta.SetAxisXLabel('Y label');

SetAxisYLabelColor

Description

set color of Y axis label.

Plotta.SetAxisYLabelColor(color);

Parameters

Name	Type	Description
color	String	it is parsed as a CSS <color> value.

Example

Plotta.SetAxisYLabelColor(`#888888`);

SetAxisYLabelLocation

Description

Set the location of the Y axis label.

Plotta.SetAxisYLabelLocation(location);

Parameters

The default value is center.

Name	Type	Description
location	String	Enter either top, middle, or bottom.

Example

Plotta.SetAxisYLabelLocation('middle');

ShowTable

Description

Set the visibility value of the Table.

Plotta.ShowTable(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the Table.

Example

Plotta.ShowTable(true);

Commit Message Convention

• https://www.conventionalcommits.org/en/v1.0.0/

CopyLight & License

Copyright (c) 2019 Song Jewoo. Plotta.js, Plotta.js is released under the MIT license.