@factman/graph-ui

v1.0.1

Published

3 years ago

GraphUI is a JavaScript extension for plotting graphs for any website project.

Downloads

0High
0Medium
0Low

factman60

graph svg plotter line graph

Welcome to the GraphUI

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:

Download Zip File

Clone from Github:

git clone https://github.com/factman/GraphUI.git

Install from NPM

Install from NPM:

npm install @factman/graph-ui

Note: 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

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.

Sponsor

The following company support GraphUI ongoing maintenance and development. Become a Sponsor to get your logo on our README and website.