# @jandkboy/graph-maker

> Build graphs

Latest version **1.0.10** (published 2023-06-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install @jandkboy/graph-maker
pnpm add @jandkboy/graph-maker
yarn add @jandkboy/graph-maker
bun add @jandkboy/graph-maker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2023-06-20 |
| First published | 2023-06-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Madara Colonel |
| Maintainers | jandkboy |
| Keywords | Graphs |

## Links

- npm: https://www.npmjs.com/package/@jandkboy/graph-maker
- npm.io page: https://npm.io/package/@jandkboy/graph-maker

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2023-06-20
- 1.0.9 — 2023-06-12
- 1.0.8 — 2023-06-12
- 1.0.7 — 2023-06-12
- 1.0.6 — 2023-06-10
- 1.0.5 — 2023-06-10
- 1.0.1 — 2023-06-10
- 1.0.0 — 2023-06-10

## README

### Examples:

### Basic 
New Graph requires ctx , w , h, type and then data
```
const ctx = c.getContext('2d')

const G = new Graph(ctx,290,290,Graph.BAR,{
x:[100,140,230],
y:[40,6,70],
}
)
```
### Import
```
import Graph from '@jandkboy/graph-maker'
```
### Types ?
```
console.log(Graph.ALLTYPES)
```
### Data of Graph Instance
```
c = ctx
W = width
H = height
t = Type of Graph 
data = Data

Data Contains these
x : x axis
y : y axis
barlabels: labels array
colors: colors array
radius: for Pie and Ring charts
fill: fill area of line Graph
markers: markers
fixed: fixed
line: line for pie graphs


Markers -
c circle
s square
String custom marker e.g - , + etc


Types -

LINE 
 MULTIPLELINE
SCATTER 
MULTIPLESCATTER 
BAR 
MULTIPLEBAR 
PIE 
 MULTIPLEPIE 
 HIST
 HISTCENTER 
HISTSIZE100
RADAR
MULTIPLERADAR 
CIRCULARRADAR 
MULTIPLECIRCULARRADAR 
RING
 CURVE 
 HEAT
 FUNNEL 
BULLET 
SPEEDOMETER 



```
### To add Translations 
requires canvasElement and update function
```
G.events(canvasElement , update)
```

### To add Zoom functionality on events
Returns a array of functions to be used for Zoom
requires 
G object  Graph instance 
update update function
```
Graph.zoomfunction(G, update)[0]() // Zoom out
Graph.zoomfunction(G , update)[1]() // Zoom in 
```


### Update Function 
requires two colors for bg and line strokes and then whether to match the bg and then whether to match lineStrokes
```
function update (){
G.update(
"hsla(225,36%,53%,0.72)",
"hsl(225,36%,16%)",
true , true
)
}
update()
```
### Line Graphs:
```
const ctx = c.getContext('2d')

const G = new Graph(ctx,290,290,Graph.LINE ,{
x:[100,140,230],
y:[40,6,70],
}
)
function update (){
G.update(
"hsla(225,36%,53%,0.72)",
"hsl(225,36%,16%)",
true , true
)
}
update()
```

### Bar Graphs
```
const ctx = c.getContext('2d')

const G = new Graph(ctx,290,290,Graph.BAR,{
x:[100,140,230],
y:[40,6,70],
}
)
function update (){
G.update(
"hsla(225,36%,53%,0.72)",
"hsl(225,36%,16%)",
true , true
)
}
update()


```

### Full Example with PIE GRAPHS
```
<canvas id="c" height="500" width="500" style="background:hsl(225,36%,16%)"></canvas>
<button id="btn">+</button>
<button id="bn">-</button>
```
```
const type = Graph.PIE
let Q = new Graph(
c.getContext("2d") 
,
500,500,
 type , {
x : [570, 160, 230, 710, 980, 800, 430, 800, 807, 102],
y : [940, 90, 700, 960, 310, 306, 309, 807, 602, 804],
marker: true ,
fixed: true ,
fill: false ,
line: true ,
}
)
btn.addEventListener("click" , (e) => {
Graph.zoomfunction(Q , update)[0]()
})
bn.addEventListener("click" , (e) => {
Graph.zoomfunction(Q , update)[1]()
})
Q.events(c , update)
function update(){
Q.update("hsla(225,34%,64%,0.771)" ,"hsla(225,34%,44%,0.471)" , true , true)
}
update()
```
![Image]("https://madarauchihame.w3spaces.com/Screenshot_20230610_184856_anWriter.jpg")

---
_Source: https://npm.io/package/@jandkboy/graph-maker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._