Grapher

Developer
Julien Dargelos
Size
4,725 Kb
Views
12,144
  1. Grapher Previews
  2. Grapher HTML Codes
  3. Grapher CSS Codes
  4. Grapher JS Codes

How do I make an grapher?

What is a grapher? How do you make a grapher? This script and codes were developed by Julien Dargelos on 29 November 2022, Tuesday.

Grapher Previews
IQ Test

Grapher - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grapher</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <meta charset="utf-8"> <title>Grapher</title> </head> <body> <canvas id="graph" width="500px" height="500px"></canvas> <form id="input" onsubmit="graphUpdate();return false;"> <h1>Grapher</h1> <div id="functions"> <div> <label for="f1">f₁(x)=</label> <input type="text" id="f1" value="x^3"/> <input type="text" id="c1" value="red"/> </div> <div> <label>f₂(x)=</label> <input type="text" id="f2" value="exp(x)"/> <input type="text" id="c2" value="green"/> </div> <div> <label>f₃(x)=</label> <input type="text" id="f3" value="cos(x)"/> <input type="text" id="c3" value="purple"/> </div> <div> <label>f₄(x)=</label> <input type="text" id="f4"/> <input type="text" id="c4"/> </div> <div> <label>f₅(x)=</label> <input type="text" id="f5"/> <input type="text" id="c5"/> </div> </div> <div id="grid"> <div> <label for="xStart">Intervalle d'abscisses:</label> <input type="number" id="xStart" placeholder="Début" value="-10"/> <span>➔</span> <input type="number" id="xEnd" placeholder="Fin" value="10"/> </div> <div> <label for="yStart">Intervalle d'ordonnées:</label> <input type="number" id="yStart" placeholder="Début" value="-10"/> <span>➔</span> <input type="number" id="yEnd" placeholder="Fin" value="10"/> </div> <div> <label for="xGridStep">Intervalles de graduation:</label> <input type="number" id="xGridStep" placeholder="Abscisse" value="2"/> <input type="number" id="yGridStep" placeholder="Ordonnée" value="2"/> </div> <div> <label for="gridValuesDecimals">Affichage des valeurs:</label> <input type="checkbox" id="showGridValues" checked/> <input type="number" id="gridValuesDecimals" placeholder="Décimales" value="2"/> </div> <div> <label for="fixedGrid">Graduations fixées:</label> <input type="checkbox" id="fixedGrid"/> </div> </div> <input type="submit" value="Tracer"/> </form> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/1.7.0/math.min.js"></script> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.5.3/math.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Grapher - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);
body {	background:rgb(30,30,30);	margin:0;	overflow:hidden;
}
#graph {	top:50%;	left:50%;	margin:-250px 0 0 -520px;	cursor:-webkit-grab;	cursor:grab;	border:1px solid rgb(180,180,180);	border-radius:5px;	position:absolute;
}
#graph:active {	cursor:-webkit-grabbing;	cursor:grabbing;
}
#input {	width:500px;	height:500px;	top:50%;	left:50%;	margin:-250px 0 0 20px;	position:absolute;
}
#input h1 {	margin:0 0 20px 0;	padding:0 0 10px 0;	border-bottom:2px solid #fff;	font-family:'Roboto',sans-serif;	font-size:40px;	font-weight:100;	color:#fff;
}
#functions div {	background:#fff;	margin:7px 0;	border-radius:5px;	font-size:0;
}
#functions div label, #functions div input {	margin:0;	padding:9px 11px;	border:none;	outline:none;	font-family:monospace;	font-size:14px;	color:rgb(30,30,30);
}
#functions div label {padding-right:0;}
#functions div input:first-of-type {	background:transparent;	width:300px;	padding-left:5px;
}
#functions div input:last-of-type {	background:rgb(210,210,210);	padding:5px 7px;	margin:4px 4px 4px 0;	border-radius:3px;	width:80px;	float:right;	font-family:'Roboto',sans-serif;	font-size:14px;	font-weight:400;	color:rgba(0,0,0,0.4);
}
#grid {font-size:0;}
#grid label, #grid input, #grid span, #input input[type="submit"] {	margin:5px 3px;	padding:7px 5px;	display:inline-block;	font-family:'Roboto',sans-serif;	font-size:14px;	font-weight:400;	color:#fff;
}
#grid input[type="number"], #input input[type="submit"] {	background:rgb(40,40,40);	width:80px;	border-radius:3px;	border:none;
}
#input input[type="submit"] {	cursor:pointer;	float:right;
}

Grapher - Script Codes JS Codes

var parser=math.parser();
function getImage(x,expression) {	parser.set('x',x);	return parser.eval(expression);
}
function Grapher() {	var graph=this;	this.xStart=-10;	this.xEnd=10;	this.yStart=-10;	this.yEnd=10;	this.xGridStep=2;	this.yGridStep=2;	this.showGridValues=true;	this.gridValuesDecimals=2;	this.fixedGrid=false;	this.functions=[];	var element=document.createElement('canvas');	var onmousedownFunction=function(event) {	var initX=event.clientX;	var initY=event.clientY;	var xStep=graph.xStep;	var yStep=graph.yStep;	window.onmousemove=function(event) {	graph.xStart+=(initX-event.clientX)*xStep;	graph.xEnd+=(initX-event.clientX)*xStep;	graph.yStart+=(event.clientY-initY)*yStep;	graph.yEnd+=(event.clientY-initY)*yStep;	initX=event.clientX;	initY=event.clientY;	graph.clear();	graph.drawGrid();	graph.draw();	}	}	var onmouseupFunction=function(){window.onmousemove=function(){};};	var onmousewheelFunction=function(event) {	var direction=(event.detail ? event.detail*120 : -event.wheelDelta)/2;	var xStep=graph.xStep;	var yStep=graph.yStep;	if(graph.xEnd-graph.xStart+direction*xStep*2<Math.pow(10,graph.gridValuesDecimals) && graph.xEnd-graph.xStart+direction*xStep*2>Math.pow(10,-graph.gridValuesDecimals)) {	if(graph.fixedGrid) {	graph.xGridStep=(graph.xEnd-graph.xStart+direction*xStep*2)/((graph.xEnd-graph.xStart)/graph.xGridStep);	graph.yGridStep=(graph.yEnd-graph.yStart+direction*yStep*2)/((graph.yEnd-graph.yStart)/graph.yGridStep);	}	else {	if((graph.xEnd-graph.xStart)/graph.xGridStep>graph.width/15) graph.xGridStep*=3;	if((graph.yEnd-graph.yStart)/graph.yGridStep>graph.height/15) graph.yGridStep*=3;	}	graph.xStart-=direction*xStep;	graph.xEnd+=direction*xStep;	graph.yStart-=direction*yStep;	graph.yEnd+=direction*yStep;	graph.clear();	graph.drawGrid();	graph.draw();	}	} var onmousemoveFunction=function(event) {	var x=graph.xStart+(event.clientX-graph.canvas.offsetLeft)*graph.xStep;	var yPosition=graph.yEnd-(event.clientY-graph.canvas.offsetTop)*graph.yStep;	var y=Infinity;	var f=0;	for(i=0; i<graph.functions.length; i++) {	if(Math.abs(yPosition-getImage(x,graph.functions[i].expression))<Math.abs(yPosition-y)) {	y=getImage(x,graph.functions[i].expression);	f=i;	}	}	y=y;	var xCanvas=(x-graph.xStart)/graph.xStep;	var yCanvas=(graph.yEnd-y)/graph.yStep;	graph.clear();	graph.drawGrid();	graph.draw();	graph.context.lineWidth=1;	graph.context.strokeStyle='rgb(80,80,80)';	graph.context.setLineDash([2]);	graph.context.beginPath();	graph.context.moveTo(xCanvas,0);	graph.context.lineTo(xCanvas,graph.height);	graph.context.stroke();	graph.context.moveTo(0,yCanvas);	graph.context.lineTo(graph.width,yCanvas);	graph.context.stroke();	graph.context.setLineDash([]);	graph.context.arc(xCanvas,yCanvas,3,0,2*Math.PI,false);	graph.context.fillStyle=graph.functions[f].color;	graph.context.fill();	graph.context.font='11px monospace';	graph.context.fillStyle='#fff';	xValue=Math.round(x*Math.pow(10,graph.gridValuesDecimals))/Math.pow(10,graph.gridValuesDecimals);	if(Math.abs(xValue)>=10000) {	xValue=new Number(xValue);	xValue=xValue.toExponential(this.gridValuesDecimals);	}	yValue=Math.round(y*Math.pow(10,graph.gridValuesDecimals))/Math.pow(10,graph.gridValuesDecimals);	if(Math.abs(yValue)>=10000) {	yValue=new Number(xValue);	yValue=yValue.toExponential(this.gridValuesDecimals);	}	graph.context.fillText(xValue+';'+yValue,xCanvas+3,yCanvas-3);	}	element.onmousedown=onmousedownFunction;	element.onmouseup=onmouseupFunction;	element.onmousewheel=onmousewheelFunction; element.onmousemove=onmousemoveFunction;	Object.defineProperties(this,{	canvas:{	get:function(){return element;},	set:function(val){	element=val;	element.onmousedown=onmousedownFunction;	element.onmouseup=onmouseupFunction;	element.onmousewheel=onmousewheelFunction; element.onmousemove=onmousemoveFunction;	}	},	context:{get:function(){return this.canvas.getContext('2d');}},	xStep:{get:function(){return (this.xEnd-this.xStart)/this.width;}},	yStep:{get:function(){return (this.yEnd-this.yStart)/this.height;}},	width:{	get:function(){return parseInt(this.canvas.width);},	set:function(val){this.canvas.width=val+'px';}	},	height:{	get:function(){return parseInt(this.canvas.height);},	set:function(val){this.canvas.height=val+'px';}	}	});	this.clear=function() {this.context.clearRect(0,0,this.width,this.height);};	this.drawGrid=function() {	this.context.lineWidth=1;	this.context.strokeStyle='rgb(80,80,80)';	this.context.font='11px monospace';	this.context.fillStyle='#fff';	var x0=-(this.xStart%this.xGridStep)/this.xStep;	var y0=(this.yEnd%this.yGridStep)/this.yStep;	var value=0;	for(var i=x0; i<=this.width; i+=this.xGridStep/this.xStep) {	if(Math.round((this.xStart+i*this.xStep)*10000)/10000==0) this.context.strokeStyle='rgb(180,180,180)';	this.context.beginPath();	this.context.moveTo(i,0);	this.context.lineTo(i,this.height);	this.context.stroke();	if(Math.round((this.xStart+i*this.xStep)*10000)/10000==0) this.context.strokeStyle='rgb(80,80,80)';	if(this.showGridValues) {	value=Math.round((this.xStart+i*this.xStep)*Math.pow(10,this.gridValuesDecimals))/Math.pow(10,this.gridValuesDecimals);	if(Math.abs(value)>=10000) {	value=new Number(value);	value=value.toExponential(this.gridValuesDecimals);	}	this.context.fillText(value,i+3,this.height-3);	}	}	for(var i=y0; i<=this.height; i+=this.yGridStep/this.yStep) {	if(Math.round((this.yEnd-i*this.yStep)*10000)/10000==0) this.context.strokeStyle='rgb(180,180,180)';	this.context.beginPath();	this.context.moveTo(0,i);	this.context.lineTo(this.width,i);	this.context.stroke();	if(Math.round((this.yEnd-i*this.yStep)*10000)/10000==0) this.context.strokeStyle='rgb(80,80,80)';	if(this.showGridValues) {	value=Math.round((this.yEnd-i*this.yStep)*Math.pow(10,this.gridValuesDecimals))/Math.pow(10,this.gridValuesDecimals);	if(Math.abs(value)>=10000) {	value=new Number(value);	value=value.toExponential(this.gridValuesDecimals);	}	this.context.fillText(value,3,i-3);	}	}	}	this.draw=function() {	this.context.lineWidth=1;	for(var i=0; i<this.functions.length; i++) {	this.context.strokeStyle=this.functions[i].color;	this.context.beginPath();	var x=this.xStart;	this.context.moveTo(0,(this.yEnd-getImage(x,this.functions[i].expression))/this.yStep);	for(var j=1; j<this.width; j++) {	this.context.lineTo(j,(this.yEnd-getImage(x,this.functions[i].expression))/this.yStep);	x+=this.xStep;	}	this.context.stroke();	}	}
}
var graph=new Grapher;
graph.canvas=document.getElementById('graph');
graph.functions=Array({expression:'x^3',color:'red'},{expression:'exp(x)',color:'green'},{expression:'cos(x)',color:'purple'});
graph.drawGrid();
graph.draw();
for(var i=0; i<document.getElementById('functions').getElementsByTagName('div').length; i++) {	document.getElementById('functions').getElementsByTagName('div')[i].getElementsByTagName('input')[1].style.background=document.getElementById('functions').getElementsByTagName('div')[i].getElementsByTagName('input')[1].value;	document.getElementById('functions').getElementsByTagName('div')[i].getElementsByTagName('input')[1].onkeydown=function() {	var input=this;	setTimeout(function() {	input.style.background=input.value;	},1);	}
}
function graphUpdate() {	var o=0;	graph.functions=Array();	for(var i=1; document.getElementById('f'+i); i++) {	if(document.getElementById('f'+i).value!='') {	if(!document.getElementById('c'+i).value.match(/^(rgba?\(\d{1,3},\d{1,3},\d{1,3}\)|#\d{3,6}|\w+)$/)) document.getElementById('c'+i).value='#'+Math.floor(Math.random()*16777215).toString(16);	document.getElementById('c'+i).style.background=document.getElementById('c'+i).value;	graph.functions[o]={expression:document.getElementById('f'+i).value,color:document.getElementById('c'+i).value};	o++;	}	}	graph.xStart=parseInt(document.getElementById('xStart').value);	graph.xEnd=parseInt(document.getElementById('xEnd').value);	graph.yStart=parseInt(document.getElementById('yStart').value);	graph.yEnd=parseInt(document.getElementById('yEnd').value);	graph.xGridStep=parseInt(document.getElementById('xGridStep').value);	graph.yGridStep=parseInt(document.getElementById('yGridStep').value);	graph.showGridValues=document.getElementById('showGridValues').checked;	graph.gridValuesDecimals=parseInt(document.getElementById('gridValuesDecimals').value);	graph.fixedGrid=document.getElementById('fixedGrid').checked;	graph.clear();	graph.drawGrid();	graph.draw();
}
Grapher - Script Codes
Grapher - Script Codes
Home Page Home
Developer Julien Dargelos
Username juliendargelos
Uploaded November 29, 2022
Rating 3
Size 4,725 Kb
Views 12,144
Do you need developer help for Grapher?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Julien Dargelos (juliendargelos) Script Codes
Name
Skateboard tricks
Pure CSS Torch Light
Calculator
Js-ScrollBar
Vusic
Psychedelic Animation
InfoGrid
A Pen by Julien Dargelos
SmartPass
Tags Input
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!