@jandkboy/graph-maker v1.0.10

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()