plotta.js v2.0.0

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

Browser Support

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

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

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

Example

plotta.DeleteLine('line1');

SetFont

Description

Set the font.

plotta.SetFont(font);

Parameters

Example

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

ShowTitle

Description

Set the visibility value of the title.

plotta.ShowTitle(show);

Parameters

Example

plotta.ShowTitle(true);

SetTitle

Description

Set the graph title.

plotta.SetTitle(title);

Parameters

Example

plotta.SetTitle('Hello Graph');

SetTitleColor

Description

set color of graph title.

plotta.SetTitleColor(color);

Parameters

Example

plotta.SetTitleColor(`#FFA500`);

SetTitleLocation

Description

Set the location of the title.

plotta.SetTitleLocation(location);

Parameters

The default value is center.

Example

plotta.SetTitleLocation('left');

ShowGrid

Description

Set the visibility value of the grid.

plotta.ShowGrid(show);

Parameters

Example

plotta.ShowGrid(true);

SetGridColor

Description

set color of grid.

plotta.SetGridColor(color);

Parameters

Example

plotta.SetGridColor(`orange`);

ShowBorder

Description

Set the visibility value of the border.

plotta.ShowBorder(show);

Parameters

Example

plotta.ShowBorder(false);

SetBorderColor

Description

set color of border.

plotta.SetBorderColor(color);

Parameters

Example

plotta.SetGridColor(`black`);

SetBorderWidth

Description

set width of border.

plotta.SetBorderWidth(width);

Parameters

Example

plotta.SetBorderWidth(1);

ShowTics

Description

Set the visibility value of the ticks.

plotta.ShowTics(show);

Parameters

Example

plotta.ShowTics(true);

SetTicsColor

Description

set color of ticks.

plotta.SetTicsColor(color);

Parameters

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

Example

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

ShowAxisXLabel

Description

Set the visibility value of the X axis label.

plotta.ShowAxisXLabel(show);

Parameters

Example

plotta.ShowAxisXLabel(true);

SetAxisXLabel

Description

Set the X axis label.

plotta.SetAxisXLabel(lebel);

Parameters

Example

plotta.SetAxisXLabel('X label');

SetAxisXLabelColor

Description

set color of X axis label.

plotta.SetAxisXLabelColor(color);

Parameters

Example

plotta.SetAxisXLabelColor(`#888888`);

SetAxisXLabelLocation

Description

Set the location of the X axis label.

plotta.SetAxisXLabelLocation(location);

Parameters

The default value is center.

Example

plotta.SetAxisXLabelLocation('center');

ShowAxisYLabel

Description

Set the visibility value of the Y axis label.

plotta.ShowAxisYLabel(show);

Parameters

Example

plotta.ShowAxisYLabel(true);

SetAxisYLabel

Description

Set the Y axis label.

plotta.SetAxisYLabel(lebel);

Parameters

Example

plotta.SetAxisXLabel('Y label');

SetAxisYLabelColor

Description

set color of Y axis label.

plotta.SetAxisYLabelColor(color);

Parameters

Example

plotta.SetAxisYLabelColor(`#888888`);

SetAxisYLabelLocation

Description

Set the location of the Y axis label.

plotta.SetAxisYLabelLocation(location);

Parameters

The default value is center.

Example

plotta.SetAxisYLabelLocation('middle');

ShowTable

Description

Set the visibility value of the Table.

plotta.ShowTable(show);

Parameters

Example

plotta.ShowTable(true);

ShowLegend

Description

Set the visibility value of the Legend.

plotta.ShowLegend(show);

Parameters

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.