iamsjy17 / Plotta.js

Javascript Functional Graph Library

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

2.0.0

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,
    },
  ],
  graphConfig: {
    legendVisible: true,
    title: {
      visible: true,
      location: 'center',
      color: '#666666',
      text: 'plotta.ts',
    },
    grid: {
      visible: true,
      type: 'solid',
      color: '#888888',
    },
    border: {
      visible: true,
      type: 'solid',
      color: '#DDDDDD',
      width: 1,
    },
  },
});

API Documentation

Provides APIs to control various properties.

• Graph
  • UpdateGraph
• Line
  • AddLine
  • DeleteLine
• Font
  • SetFont
• Title
  • ShowTitle
  • 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
• Legend
  • ShowLegend

UpdateGraph

Description

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

plotta.UpdateGraph(lineData, graphConfig);

Parameters

Name	Type	Description
lineDatas	LineData[]
graphConfig	GraphConfig

Example

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

plotta.UpdateGraph(
  [
    {
      id: 'line1',
      type: 'func',
      legend: 'cos',
      color: '#55A8DE',
      visible: true,
      func: Math.cos,
      dotNum: 1000,
    },
  ],
  {
    legendVisible: true,
    title: {
      visible: true,
      location: 'center',
      color: '#666666',
      text: 'plotta.ts',
    },
    grid: {
      visible: true,
      type: 'solid',
      color: '#888888',
    },
    border: {
      visible: true,
      type: 'solid',
      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	LineData	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`);

ShowTitle

Description

Set the visibility value of the title.

plotta.ShowTitle(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the title.

Example

plotta.ShowTitle(true);

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);

ShowLegend

Description

Set the visibility value of the Legend.

plotta.ShowLegend(show);

Parameters

Name	Type	Description
show	boolean	visibility value of the Legend.

Example

plotta.ShowLegend(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.