SIMPLE GRAPH MAKER CODE

Sunday, 20 September 2015

SIMPLE GRAPH MAKER CODE

-----------------------------------------------------------------------------------------------------------------

COPY AND PASTE BELOW CODE IN POST HTML SECTION

http://googlecode.blogspot.co.uk/2008/09/simple-graphics-calculator-using.html

------------------------------------------------------------------------------------------------------------------

<html>

<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("visualization", "1", {packages:["scatterchart"]});

function drawChart(equation,xmin,xmax, numPoints, pointSize) {

var data = new google.visualization.DataTable();

data.addColumn('number', 'x');

data.addColumn('number', 'y');

data.addRows(numPoints);

var step = (xmax-xmin) / (numPoints-1);

for(var i = 0; i < numPoints; i++)

{

var x = xmin + step * i;

data.setValue(i,0,x);

with(Math) {

var y = eval(equation);

}

data.setValue(i,1,y);

}

document.getElementById("chart_div").innerHTML = "";

var chart = new google.visualization.ScatterChart(

document.getElementById('chart_div'));

chart.draw(data, {width: 600, height: 400, titleX: 'X',

titleY: 'Y', legend: 'none', pointSize: pointSize});

}

</script>

</head>

<body>

equation:              

<br />

minimum value(x):  <input id="txtmin" type="text" value="-3.14" />

<br />

maximum value(x):  <input id="txtmax" type="text" value="3.14"/>

<br />

Precision (number of points):  <input id="precision" type="text" value="1000"/>

<br />

Point size:   <input id="pointSize" type="text" value="2"/>

<br />

<input id="Button1" type="button" value="Draw Graph"

onclick="javascript:drawChart(

document.getElementById('txteq').value,

parseFloat(document.getElementById('txtmin').value, 10),

parseFloat(document.getElementById('txtmax').value, 10),

parseInt(document.getElementById('precision').value, 10),

parseInt(document.getElementById('pointSize').value, 10))" />

</body>

</html>

=================================================================

Canvas Graphing Calculator

https://www.safaribooksonline.com/library/view/html5-for-publishers/9781449320065/ch01.html

Most first-year algebra curricula contain a unit on graphing on the Cartesian coordinate plane. Many students initially have some difficulty grasping the concept of representing algebraic equations visually, as it’s a real paradigm shift from traditional arithmetic. Graphing calculators, both hardware and software, are helpful tools in the teaching process, as they allow learners to quickly and efficiently experiment with plotting equations, so they can understand how changes made in an equation affect the shape of the graph.

In this section, we’ll use HTML5 Canvas to implement a very basic graphing calculator for simple linear equations that can be embedded in algebra ebooks. Figure 1-2 displays the graphing calculator interface we’ll create: a two-dimensional coordinate plane with x- and y-axes marked in red, and a set of buttons below for graphing linear equations on the grid.

https://code.google.com/p/jquery-ui-form/source/browse/trunk/js/libs/modernizr-1.6.min.js?r=2

=================================================================

<html lang="en">
<head>
<title>Graphing Calculator</title>
<script src="http://examples.oreilly.com/0636920022473/graphing_calculator/modernizr-1.6.min.js" type="text/javascript"></script>
<script src="http://examples.oreilly.com/0636920022473/graphing_calculator/graph_calc.js" type="text/javascript"/></script>
</head>
<body>
<div>
<h1>Graphing Calculator</h1>
<p style="color: red;">
<span id="status_message">Click a button below the grid to graph an equation
</span></p>
<canvas id="canvas" width="400" height="400">
Your browser does not support the HTML 5 Canvas.
</canvas>
<form>
<input type="button" id="y_equals_x" value="y = 1x" style="color: green;"/>
<input type="button" id="y_equals_negative_x" value="y = -1x"
style="color: purple;"/>
<input type="button" id="y_equals_two_x" value="y = 2x" style="color: blue;"/>
<input type="button" id="y_equals_one_half_x" value="y = 0.5x"
style="color: brown"/>
<input type="button" id="reset_grid" value="Reset Grid"/>
</form>
</div>
</body>

</html>

================================================================
OR USE THIS CODE:
================================================================

<html>

<head>

<title>Canvas Graphing Calculator</title>

<script type='text/javascript'>
//<![CDATA[
/*
* Modernizr v1.6
* http://www.modernizr.com
*
* Developed by:
* - Faruk Ates http://farukat.es/
* - Paul Irish http://paulirish.com/
*
* Copyright (c) 2009-2010
* Dual-licensed under the BSD or MIT licenses.
* http://www.modernizr.com/license/
*/
window.Modernizr=function(i,e,u){function s(a,b){return(""+a).indexOf(b)!==-1}function D(a,b){for(var c in a)if(j[a[c]]!==u&&(!b||b(a[c],E)))return true}function n(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);c=(a+" "+F.join(c+" ")+c).split(" ");return!!D(c,b)}function S(){f.input=function(a){for(var b=0,c=a.length;b<c;b++)L[a[b]]=!!(a[b]in h);return L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));f.inputtypes=function(a){for(var b=0,c,k=a.length;b<
k;b++){h.setAttribute("type",a[b]);if(c=h.type!=="text"){h.value=M;if(/^range$/.test(h.type)&&h.style.WebkitAppearance!==u){l.appendChild(h);c=e.defaultView;c=c.getComputedStyle&&c.getComputedStyle(h,null).WebkitAppearance!=="textfield"&&h.offsetHeight!==0;l.removeChild(h)}else/^(search|tel)$/.test(h.type)||(c=/^(url|email)$/.test(h.type)?h.checkValidity&&h.checkValidity()===false:h.value!=M)}N[a[b]]=!!c}return N}("search tel url email datetime date month week time datetime-local number range color".split(" "))}
var f={},l=e.documentElement,E=e.createElement("modernizr"),j=E.style,h=e.createElement("input"),M=":)",O=Object.prototype.toString,q=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),F="Webkit Moz O ms Khtml".split(" "),v={svg:"http://www.w3.org/2000/svg"},d={},N={},L={},P=[],w,Q=function(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent=a+"{#modernizr{height:3px}}";(e.head||e.getElementsByTagName("head")[0]).appendChild(b);c.id="modernizr";l.appendChild(c);a=c.offsetHeight===
3;b.parentNode.removeChild(b);c.parentNode.removeChild(c);return!!a},o=function(){var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return function(b,c){c=c||document.createElement(a[b]||"div");b="on"+b;var k=b in c;if(!k){c.setAttribute||(c=document.createElement("div"));if(c.setAttribute&&c.removeAttribute){c.setAttribute(b,"");k=typeof c[b]=="function";if(typeof c[b]!="undefined")c[b]=u;c.removeAttribute(b)}}return k}}(),G={}.hasOwnProperty,R;R=
typeof G!=="undefined"&&typeof G.call!=="undefined"?function(a,b){return G.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};d.flexbox=function(){var a=e.createElement("div"),b=e.createElement("div");(function(k,g,r,x){g+=":";k.style.cssText=(g+q.join(r+";"+g)).slice(0,-g.length)+(x||"")})(a,"display","box","width:42px;padding:0;");b.style.cssText=q.join("box-flex:1;")+"width:10px;";a.appendChild(b);l.appendChild(a);var c=b.offsetWidth===42;a.removeChild(b);
l.removeChild(a);return c};d.canvas=function(){var a=e.createElement("canvas");return!!(a.getContext&&a.getContext("2d"))};d.canvastext=function(){return!!(f.canvas&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.webgl=function(){var a=e.createElement("canvas");try{if(a.getContext("webgl"))return true}catch(b){}try{if(a.getContext("experimental-webgl"))return true}catch(c){}return false};d.touch=function(){return"ontouchstart"in i||Q("@media ("+q.join("touch-enabled),(")+
"modernizr)")};d.geolocation=function(){return!!navigator.geolocation};d.postmessage=function(){return!!i.postMessage};d.websqldatabase=function(){return!!i.openDatabase};d.indexedDB=function(){for(var a=-1,b=F.length;++a<b;){var c=F[a].toLowerCase();if(i[c+"_indexedDB"]||i[c+"IndexedDB"])return true}return false};d.hashchange=function(){return o("hashchange",i)&&(document.documentMode===u||document.documentMode>7)};d.history=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return o("drag")&&
o("dragstart")&&o("dragenter")&&o("dragover")&&o("dragleave")&&o("dragend")&&o("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){j.cssText="background-color:rgba(150,255,150,.5)";return s(j.backgroundColor,"rgba")};d.hsla=function(){j.cssText="background-color:hsla(120,40%,100%,.5)";return s(j.backgroundColor,"rgba")||s(j.backgroundColor,"hsla")};d.multiplebgs=function(){j.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(j.background)};d.backgroundsize=
function(){return n("backgroundSize")};d.borderimage=function(){return n("borderImage")};d.borderradius=function(){return n("borderRadius","",function(a){return s(a,"orderRadius")})};d.boxshadow=function(){return n("boxShadow")};d.textshadow=function(){return e.createElement("div").style.textShadow===""};d.opacity=function(){var a=q.join("opacity:.5;")+"";j.cssText=a;return s(j.opacity,"0.5")};d.cssanimations=function(){return n("animationName")};d.csscolumns=function(){return n("columnCount")};d.cssgradients=
function(){var a=("background-image:"+q.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+q.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);j.cssText=a;return s(j.backgroundImage,"gradient")};d.cssreflections=function(){return n("boxReflect")};d.csstransforms=function(){return!!D(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!D(["perspectiveProperty","WebkitPerspective",
"MozPerspective","OPerspective","msPerspective"]);if(a)a=Q("@media ("+q.join("transform-3d),(")+"modernizr)");return a};d.csstransitions=function(){return n("transitionProperty")};d.fontface=function(){var a,b=e.head||e.getElementsByTagName("head")[0]||l,c=e.createElement("style"),k=e.implementation||{hasFeature:function(){return false}};c.type="text/css";b.insertBefore(c,b.firstChild);a=c.sheet||c.styleSheet;b=k.hasFeature("CSS2","")?function(g){if(!(a&&g))return false;var r=false;try{a.insertRule(g,
0);r=!/unknown/i.test(a.cssRules[0].cssText);a.deleteRule(a.cssRules.length-1)}catch(x){}return r}:function(g){if(!(a&&g))return false;a.cssText=g;return a.cssText.length!==0&&!/unknown/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(g.split(" ")[0])===0};f._fontfaceready=function(g){g(f.fontface)};return b('@font-face { font-family: "font"; src: "font.ttf"; }')};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');
b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"')||a.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localstorage=function(){try{return"localStorage"in
i&&i.localStorage!==null}catch(a){return false}};d.sessionstorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webWorkers=function(){return!!i.Worker};d.applicationcache=function(){return!!i.applicationCache};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS(v.svg,"svg").createSVGRect};d.inlinesvg=function(){var a=document.createElement("div");a.innerHTML="<svg/>";return(a.firstChild&&a.firstChild.namespaceURI)==v.svg};d.smil=function(){return!!e.createElementNS&&
/SVG/.test(O.call(e.createElementNS(v.svg,"animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(O.call(e.createElementNS(v.svg,"clipPath")))};for(var H in d)if(R(d,H)){w=H.toLowerCase();f[w]=d[H]();P.push((f[w]?"":"no-")+w)}f.input||S();f.crosswindowmessaging=f.postmessage;f.historymanagement=f.history;f.addTest=function(a,b){a=a.toLowerCase();if(!f[a]){b=!!b();l.className+=" "+(b?"":"no-")+a;f[a]=b;return f}};j.cssText="";E=h=null;i.attachEvent&&function(){var a=e.createElement("div");
a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function c(p){for(var m=-1;++m<r;)p.createElement(g[m])}function k(p,m){for(var I=p.length,t=-1,y,J=[];++t<I;){y=p[t];m=y.media||m;J.push(k(y.imports,m));J.push(y.cssText)}return J.join("")}var g="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video".split("|"),r=g.length,x=RegExp("<(/*)(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)",
"gi"),T=RegExp("\\b(abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video)\\b(?!.*[;}])","gi"),z=b.createDocumentFragment(),A=b.documentElement,K=A.firstChild,B=b.createElement("style"),C=b.createElement("body");B.media="all";c(b);c(z);a.attachEvent("onbeforeprint",function(){for(var p=-1;++p<r;)for(var m=b.getElementsByTagName(g[p]),I=m.length,t=-1;++t<I;)if(m[t].className.indexOf("iepp_")<0)m[t].className+=" iepp_"+
g[p];K.insertBefore(B,K.firstChild);B.styleSheet.cssText=k(b.styleSheets,"all").replace(T,".iepp_$1");z.appendChild(b.body);A.appendChild(C);C.innerHTML=z.firstChild.innerHTML.replace(x,"<$1bdo")});a.attachEvent("onafterprint",function(){C.innerHTML="";A.removeChild(C);K.removeChild(B);A.appendChild(z.firstChild)})}(this,document);f._enableHTML5=true;f._version="1.6";l.className=l.className.replace(/\bno-js\b/,"")+" js";l.className+=" "+P.join(" ");return f}(this,this.document);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
} else {
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
}
initGraphCalculator();
var graph_in_progress = "no"
function initGraphCalculator() {
drawGrid();
var y_equals_x_button = document.getElementById("y_equals_x");
y_equals_x_button.addEventListener('click', y_equals_xPressed, false);
var y_equals_negative_x_button = document.getElementById("y_equals_negative_x");
y_equals_negative_x_button.addEventListener('click', y_equals_negative_xPressed, false);
var y_equals_two_x_button = document.getElementById("y_equals_two_x");
y_equals_two_x_button.addEventListener('click', y_equals_two_xPressed, false);
var y_equals_one_half_x_button = document.getElementById("y_equals_one_half_x");
y_equals_one_half_x_button.addEventListener('click', y_equals_one_half_xPressed, false);
var reset_grid_button = document.getElementById("reset_grid");
reset_grid_button.addEventListener('click', reset_grid_buttonPressed, false);
status_message = document.getElementById("status_message");
}
function drawGrid() {
var i = 0;
axis_pos = 1;
can_width = theCanvas.width; // Get the width of the canvas
// Loop through and draw horizontal/vertical lines at each eighth of the grid
// All logic below presumes canvas has square dimensions
for (i=0;i<=can_width;i+=(can_width)/8)
{
if (i == (can_width)/2) // Special handling for horiz/vert axes
{
context.lineWidth = 3; // Axes are thicker...
context.strokeStyle = 'red'; //... and in red
}
else
{
context.lineWidth = 1;
context.strokeStyle = 'black';
}
// First draw vertical line
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, can_width);
context.stroke();
context.closePath();
// Then draw horizontal line
context.beginPath();
context.moveTo(0, i);
context.lineTo(can_width, i);
context.stroke();
context.closePath();
}
// Then add axis number labels
context.font = '20px _sans';
context.textBaseline = 'top';
// Move canvas origin to center of grid
context.translate(can_width / 2, can_width / 2);
for (i=-3;i<=3;i++) {
if (i != 0) { // Skip labeling origin
// horizontal label
context.fillText (i, i*(can_width/8) + 5, 5);
// vertical label
context.fillText (i, 5, -i*(can_width/8));
}
}
// Add bold-italic x- and y labels on the axes, too
context.font = 'italic bold 20px _sans';
context.fillText ("x", (can_width/2)-12, 1);
context.fillText ("y", 4, -(can_width/2));
}
function y_equals_xPressed(e) {
draw_grid_line(1, "green");
}
function y_equals_negative_xPressed(e) {
draw_grid_line(-1, "purple");
}
function y_equals_two_xPressed(e) {
draw_grid_line(2, "blue");
}
function y_equals_one_half_xPressed(e) {
draw_grid_line(1/2, "brown");
}
function draw_grid_line (slope, color) {
if (graph_in_progress == "yes") {
// Only draw one line at a time
alert("Another line is being drawn. Please wait until it's complete");
} else {
init_x = -(theCanvas.width)/2; // start with x = left edge of grid
// Note: Must reverse sign y-coordinate, as negative y-coordinates are top half of grid by default, not bottom
init_y = -(init_x) * slope // y = mx
new_x = init_x;
new_y = init_y;
var drawLineIntervalId = 0;
status_message.innerHTML = "Drawing equation y = " + slope + "x";
graph_in_progress = "yes" // line now being drawn
drawLineIntervalId = setInterval(do_animation, 33);
}
function do_animation () {
context.lineWidth = 6;
context.strokeStyle = color;
context.beginPath();
context.moveTo(init_x, init_y);
context.lineTo(new_x, new_y);
context.stroke();
context.closePath();
new_x = new_x + 5
new_y = -(new_x) * slope
context.lineTo(new_x, new_y)
if (new_x == theCanvas.width + 5) {
clearInterval(drawLineIntervalId); // end animation when line complete
graph_in_progress = "no" // line is now done
status_message.innerHTML = "Click a button below the grid to graph an equation"
}
}
}
function reset_grid_buttonPressed(e) {
theCanvas.width = theCanvas.width; // Reset grid
drawGrid();
}
}
//]]>
</script>

</head>

<body>

<div>
<h1>Graphing Calculator</h1>
<p style="color: red;">
<span id="status_message">Click a button below the grid to graph an equation
</span></p>
<canvas id="canvas" width="400" height="400">
Your browser does not support the HTML 5 Canvas.
</canvas>
<form>
<input type="button" id="y_equals_x" value="y = 1x" style="color: green;"/>
<input type="button" id="y_equals_negative_x" value="y = -1x"
style="color: purple;"/>
<input type="button" id="y_equals_two_x" value="y = 2x" style="color: blue;"/>
<input type="button" id="y_equals_one_half_x" value="y = 0.5x"
style="color: brown"/>
<input type="button" id="reset_grid" value="Reset Grid"/>
</form>
</div>
</body>
</html>