Welcome to the GraphUI
Website | Installation | Usage | Live Demo | Options | Team | Sponsor
GraphUI is a JavaScript extension for plotting graphs for any website project.
- Lightweight.
- Zero dependencies.
- Plot with SVG and not Canvas.
- No SVG knowledge is required for implementation.
- Designed for beauty.
- Responsive Design.
- Highly customizable.
- Easy implementation.
Installation
There are two ways to download or install GraphUI in any website project.
Download or Clone From GitHub
Download from Github:
Clone from Github:
git clone https://github.com/factman/GraphUI.gitInstall from NPM
Install from NPM:
npm install @factman/graph-uiNote: use the CSS and JS files in the dist folder.
Usage
Import the CSS stylesheet in the <head> section of your <html> document.
<link rel="stylesheet" href="css/GraphUI.min.css" />Import the JavaScript extension as the last child of the <body> tag.
<script src="js/GraphUI.min.js"></script>After that, create an empty <div> tag with an #id (default: "graph") within the container where you need the graph to be plotted.
<div class="container card">
<div id="graph"></div>
</div>Initialize GraphUI in a JavaScript file or within a <script> tag below GraphUI extension.
<script src="https://cnd.com"></script>
<script>
var data = {
"Mon": [3,4,6],
"Tue": [2,8,1],
"Wed": [2,4,3],
"Thu": [2,1,5],
"Fri": [1,6,3],
"Sat": [1,4,3],
"Sun": [5,4,1],
};
new GraphUI({
data: data,
elementId: "graph"
});
</script>Option elementId is optional if you used the default #id "graph" read more about GraphUI Options
Live Demo
View Live Demo and examples.
Options
| Options | Defaults | Usage | Descriptions |
|---|---|---|---|
| data | {}(required) |
{
"Label 1": [1,2,...],
"Label 2": "1,2,...",
"Label 3": 3,
"Label 4": "3"
}
|
Supply an object using the graph labels as the properties of the object in quotes "Label 1", and supply (array or string or number) as the value of each label. |
| elementId | "graph" | {elementId: "graphId"} | Element #id to plot the graph. |
| height | 300 | {height: 300} | Height of the graph in px. |
| backgroundColor | "#111111" | {backgroundColor: "#111111"} | Background color of the graph in as (Hex: "#111111" or Color Name: "darkblue" or RGB|RGBA: "rgba(0,0,0,0.5)"). |
| gridColor | "rgba(255,255,255,0.1)" | {gridColor: "rgba(255,255,255,0.1)"} | Color for the grid lines in the graph. |
| textColor | "rgba(255,255,255,0.8)" | {textColor: "rgba(255,255,255,0.8)"} | Color for the texts in the graph. |
| lineColor | "rgb(255,255,255)" | {lineColor: "rgb(255,255,255)"} | Color for the plotted line in the graph. |
| nodeColor | {backgroundColor} | {nodeColor: "black"} | Color for each node on the plotted line in the graph. |
| nodeStroke | {lineColor} | {nodeStroke: "white"} | Stroke Color for each node on the plotted line in the graph. |
| precision | 1 | {precision: 2} | Number of decimals of each value plotted. |
| prefix | "" | {prefix: "$"} | A string to prepends at the beginning of each value plotted. |
| suffix | "" | {suffix: "km/h"} | A string to append at the end of each value plotted. |
| horizontalGrids | 5 | {horizontalGrids: 10} | Number of horizontal grid lines to display. |
| showHorizontalGrids | true | {showHorizontalGrids: true} | Show or hide horizontal grid lines on the graph. |
| showVerticalGrids | false | {showVerticalGrids: true} | Show or hide vertical grid lines on the graph. |
| showYAxisLabel | true | {showYAxisLabel: true} | Show or hide YAxis Labels on the graph. |
| showXAxisLabel | true | {showXAxisLabel: true} | Show or hide XAxis Labels on the graph. |
| showInlineLabel | false | {showInlineLabel: true} | Show or hide inline Labels on each node of the graph. |
| inlineLabelColor | {textColor} | {inlineLabelColor: "gray"} | Color of the inline Labels on each node of the graph. |
| showInlineLabelValueOnly | false | {showInlineLabelValueOnly: true} | Show or hide graph labels for inline Label values (false Label 1: $20.00 | true $20.00). |
| enableOptionDropdown | true | {enableOptionDropdown: true} | Enable or disable the graph option dropdown menu. |
| dropdownOptions | "ALL" |
{
dropdownOptions: [
"IMAGE | Download as PNG image",
"JSON | Download as Json file",
"CSV | Download as CSV file"
]
}
|
Enable specific option in the dropdown menu by specifying it in an array of string (["IMAGE","JSON","CSV"]) the label after the pipe character (|) is optional. |
| showTable | true | {showTable: true} | Show or hide the graph table. |
| tableBackgroundColor | "white" | {tableBackgroundColor: "white"} | Background color for the graph table. |
| tableTextColor | "#444444" | {tableTextColor: "#444444"} | Text color for the graph table. |
License
Team
These folks keep the project moving and are resources for help.
Author
The guy who manage releases, review feature requests, and ensure GraphUI is properly maintained.
Mohammed Odunayo |
Sponsor
The following company support GraphUI ongoing maintenance and development. Become a Sponsor to get your logo on our README and website.
Sponsor
E-Team Technology |