plotta v1.1.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
RoadMap
1.0
- April 2019, Initial Release
- only supports Chrome and whale browsers.
1.1
- Coming in July 2019
- Version 1.1 will be updated in July 2019, and various browsers will be supported.
- More documentation on usage and examples will be added.
1.2
- Coming in October 2019
- Add Line Types.(Dotted lines, stick lines, Bar etc.)
- Add export related API(SaveAsImage, SaveAsPDF)
- The demo app is coming soon.
1.3
- Add Polar coordinates Type.
Browser Support
Chrome | Interner Exploer | Edge | Safari | FireFox | Whale |
---|---|---|---|---|---|
Latest | 9+ | Latest | Latest | Latest | Latest |
Download
Development
Uncompressed file for development
Production
Compressed file for Production
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
- Line
- Font
- Title
- Grid
- Border
- Tics
- Axis
- Table
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
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- style: Changes that do not affect the meaning of the code. Such as white-space, formatting, missing semi-colons, etc.
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing or correcting existing tests
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
- skip: For commits made by after the 1st commit. Usually for applying code review changes.
CopyLight & License
Copyright (c) 2019 Song Jewoo. Plotta.js, Plotta.js is released under the MIT license.