GithubHelp home page GithubHelp logo

factman / graphui Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 1.0 43 KB

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

License: MIT License

CSS 10.53% JavaScript 89.47%
sponsor plotting-graphs javascript-extension svg css

graphui's Introduction

Welcome to the GraphUI

v1.0.0 licence

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:

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

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

licence

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.

factman
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

eTEAM Technology
E-Team Technology

graphui's People

Contributors

factman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

fossabot

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.