{"id":454,"date":"2016-02-29T19:45:42","date_gmt":"2016-03-01T00:45:42","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=454"},"modified":"2017-02-17T02:11:03","modified_gmt":"2017-02-17T07:11:03","slug":"turning-the-graph-function-into-an-object-in-javascript-part-4","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/02\/29\/turning-the-graph-function-into-an-object-in-javascript-part-4\/","title":{"rendered":"Turning the Graph Function Into an Object in JavaScript, Part 4"},"content":{"rendered":"<p>Picking up from last week I&#8217;ve finished turning the JavaScript graphing widget into an object, the results of which are shown below. There is a long list of TODOs included in the code that is not close to being exhaustive; I&#8217;ll be working those off over the course of the next few posts.<\/p>\n<p><iframe loading=\"lazy\" width=\"430px\" height=\"435px\" src=\"https:\/\/www.rpchurchill.com\/demo\/steam\/steam_table_graph_object_20160229.html\"><\/iframe><\/p>\n<p>The fun part for me was leveraging a functional parameter. I&#8217;d done that somewhere in the mists of time but it was nice to implement it here per my reading and have it work on the first try.  See lines 374 and 379 below.<\/p>\n<pre class=\"toolbar-overlay:false wrap:true height-set:true lang:default decode:true \">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;Graph Object&lt;\/title&gt;\r\n\r\n    &lt;meta charset=\"utf-8\" \/&gt;\r\n    &lt;meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\" \/&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/&gt;\r\n\r\n    &lt;style&gt;\r\n      body {\r\n        background-color: #FFFFFF;\r\n      }\r\n    &lt;\/style&gt;    \r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n  &lt;script&gt;\r\n    var graphCycle = 0;\r\n    var graphCycleBottom0 = 0;\r\n    var graphCycleTop0 = 0;\r\n  \r\n    \/\/graph object\r\n    function graph(width,height,id) {\r\n      this.id = id;\r\n      this.canvas = document.getElementById(id);\r\n      if (this.canvas) {  \r\n        \/\/element already exists\r\n        if (this.canvas.nodeName == \"CANVAS\") {\r\n          \/\/element *is* a canvas\r\n          this.width = this.canvas.width;\r\n          this.height = this.canvas.height;\r\n        } else {\r\n          \/\/element is *not* a canvas\r\n          alert(\"Error: Element you've linked to is *not* a canvas.\");\r\n        }\r\n      } else {\r\n        \/\/element does not already exist and must be created\r\n        this.width = width;\r\n        this.height = height;\r\n        this.canvas = document.createElement(\"canvas\");\r\n        this.canvas.id = this.id;\r\n        this.canvas.width = this.width;\r\n        this.canvas.height = this.height;\r\n        document.body.appendChild(this.canvas);\r\n      }\r\n      this.canvas.style.border = \"1px solid green\";\r\n      this.canvas.style.margin = \"5px auto\";\r\n      this.ctx = this.canvas.getContext(\"2d\");\r\n      this.ctx.lineWidth = 1.0;\r\n      this.ctx.lineCap = \"square\";\r\n      this.ctx.fillStyle = \"#FFFFFF\";\r\n      this.ctx.fillRect(0,0,this.width,this.height);\r\n      \/\/these values govern drawing of color-segmented curves\r\n      this.graphCycleBottom0 = 0;\r\n      this.graphCycleTop0 = 12;\r\n      this.colorArray = [\"#7777777\",\"#800000\",\"#FF0000\",\"#FFA500\",\"#FFFF00\",\"#008800\",\"#00FF00\",\"#87CEEB\",\"#0000FF\",\"#4B0082\",\"#FF00FF\",\"#800080\",\"#7777777\"];\r\n      \/\/setters, getters don't appear to be needed\r\n      this.setBackgroundColor = function(color) {\r\n        this.backgroundColor = color;\r\n      };\r\n      this.setBorderColor = function(color) {\r\n        this.borderColor = color;\r\n      };\r\n      this.setXaxis_X1 = function(xaxis_x1) {\r\n        this.xaxis_x1 = xaxis_x1;\r\n      }\r\n      this.setXaxis_Y1 = function(xaxis_y1) {\r\n        this.xaxis_y1 = xaxis_y1;\r\n      }\r\n      this.setXaxis_X2 = function(xaxis_x2) {\r\n        this.xaxis_x2 = xaxis_x2;\r\n      }\r\n      this.setXaxis_Y2 = function(xaxis_y2) {\r\n        this.xaxis_y2 = xaxis_y2;\r\n      }\r\n      this.setYaxis_X1 = function(yaxis_x1) {\r\n        this.yaxis_x1 = yaxis_x1;\r\n      }\r\n      this.setYaxis_Y1 = function(yaxis_y1) {\r\n        this.yaxis_y1 = yaxis_y1;\r\n      }\r\n      this.setYaxis_X2 = function(yaxis_x2) {\r\n        this.yaxis_x2 = yaxis_x2;\r\n      }\r\n      this.setYaxis_Y2 = function(yaxis_y2) {\r\n        this.yaxis_y2 = yaxis_y2;\r\n      }\r\n      this.setXaxisColor = function(xaxisColor) {\r\n        this.xaxisColor = xaxisColor;\r\n      }\r\n      this.setYaxisColor = function(yaxisColor) {\r\n        this.yaxisColor = yaxisColor;\r\n      }\r\n      this.setXaxisLabel = function(xaxisLabel) {\r\n        this.xaxisLabel = xaxisLabel;\r\n      }\r\n      this.setYaxisLabel = function(yaxisLabel) {\r\n        this.yaxisLabel = yaxisLabel;\r\n      }\r\n      this.setXaxisFontColor = function(xaxisFontColor) {\r\n        this.xaxisFontColor = xaxisFontColor;\r\n      }\r\n      this.setYaxisFontColor = function(yaxisFontColor) {\r\n        this.yaxisFontColor = yaxisFontColor;\r\n      }\r\n      this.setGraphLabel = function(graphLabel) {\r\n        this.graphLabel = graphLabel;\r\n      }\r\n      this.setGraphLabelColor = function(graphLabelColor) {\r\n        this.graphLabelColor = graphLabelColor;\r\n      }\r\n      this.setXmajorTicks = function(xmajorTicks) {\r\n        this.xmajorTicks = xmajorTicks;\r\n      }\r\n      this.setYmajorTicks = function(ymajorTicks) {\r\n        this.ymajorTicks = ymajorTicks;\r\n      }\r\n      this.setXminorTicks = function(xminorTicks) {\r\n        this.xminorTicks = xminorTicks;\r\n      }\r\n      this.setYminorTicks = function(yminorTicks) {\r\n        this.yminorTicks = yminorTicks;\r\n      }\r\n      this.setXmajorTickColor = function(xmajorTickColor) {\r\n        this.xmajorTickColor = xmajorTickColor;\r\n      }\r\n      this.setYmajorTickColor = function(ymajorTickColor) {\r\n        this.ymajorTickColor = ymajorTickColor;\r\n      }\r\n      this.setXminorTickColor = function(xminorTickColor) {\r\n        this.xminorTickColor = xminorTickColor;\r\n      }\r\n      this.setYminorTickColor = function(yminorTickColor) {\r\n        this.yminorTickColor = yminorTickColor;\r\n      }\r\n      this.setXmajorTickLength = function(xmajorTickLength) {\r\n        this.xmajorTickLength = xmajorTickLength;\r\n      }\r\n      this.setYmajorTickLength = function(ymajorTickLength) {\r\n        this.ymajorTickLength = ymajorTickLength;\r\n      }\r\n      this.setXminorTickLength = function(xminorTickLength) {\r\n        this.xminorTickLength = xminorTickLength;\r\n      }\r\n      this.setYminorTickLength = function(yminorTickLength) {\r\n        this.yminorTickLength = yminorTickLength;\r\n      }\r\n      this.setXvalMinOuter = function(xvalMinOuter) {\r\n        this.xvalMinOuter = xvalMinOuter;\r\n      }\r\n      this.setXvalMaxOuter = function(xvalMaxOuter) {\r\n        this.xvalMaxOuter = xvalMaxOuter;\r\n      }\r\n      this.setYvalMinOuter = function(yvalMinOuter) {\r\n        this.yvalMinOuter = yvalMinOuter;\r\n      }\r\n      this.setYvalMaxOuter = function(yvalMaxOuter) {\r\n        this.yvalMaxOuter = yvalMaxOuter;\r\n      }\r\n      this.setXvalMin = function(xvalMin) {\r\n        this.xvalMin = xvalMin;\r\n      }\r\n      this.setXvalMax = function(xvalMax) {\r\n        this.xvalMax = xvalMax;\r\n      }\r\n      this.setYvalMin = function(yvalMin) {\r\n        this.yvalMin = yvalMin;\r\n      }\r\n      this.setYvalMax = function(yvalMax) {\r\n        this.yvalMax = yvalMax;\r\n      }\r\n      this.setPixelOffset = function(pixelOffset) {\r\n        this.pixelOffset = pixelOffset;\r\n      }\r\n      this.setGraphCycle = function(graphCycle) {\r\n        this.graphCycle = graphCycle;\r\n      }\r\n      \r\n      this.resetCurve = function() {\r\n        this.lowVal = 99999999999.0;\r\n        this.highVal = -99999999999.0;\r\n        this.x0 = 0.0;\r\n        this.y0 = 0.0;\r\n        this.x1 = 0.0;\r\n        this.y1 = 0.0;\r\n        this.move = 0;\r\n        this.line = 1;\r\n        this.graphCycle = -1;\r\n        this.oldCycle = -1;\r\n      }\r\n      this.drawAxes = function() {\r\n        \/\/set up font\r\n        this.ctx.font = \"12px Arial\";  \/\/TODO: parameterize this by element\r\n        this.ctx.textAlign=\"center\";   \/\/TODO: parameterize this by element\r\n        \/\/draw y-axis label rotated before doing anything else\r\n        \/\/this only works once\r\n        var x = 12.0 + this.pixelOffset;  \/\/TODO: parameterize this by element\r\n        var y = Math.floor((this.yaxis_y1+this.yaxis_y2) * 0.5) - this.pixelOffset;  \/\/TODO: parameterize this by element\r\n        this.ctx.fillStyle = this.yaxisFontColor;\r\n        \/\/save original context and prepare\r\n        this.ctx.save();\r\n        this.ctx.translate(x,y);\r\n        this.ctx.rotate(-Math.PI * 0.5);  \/\/TODO: parameterize this by element\r\n        \/\/draw the text;\r\n        this.ctx.fillText(this.yaxisLabel,0,3);\r\n        \/\/restore the original context\r\n        this.ctx.restore();\r\n        \/\/draw title\r\n        this.ctx.fillStyle = this.graphLabelColor;\r\n        x = Math.floor(this.canvas.width * 0.5) + this.pixelOffset;  \/\/TODO: parameterize this by element\r\n        y = 15.0 - this.pixelOffset;                  \/\/TODO: parameterize this by element\r\n        this.ctx.fillText(this.graphLabel,x,y);\r\n\r\n        \/\/x-axis\r\n        this.ctx.beginPath();\r\n        this.ctx.strokeStyle = this.xaxisColor;\r\n        this.ctx.moveTo(this.xaxis_x1+this.pixelOffset,this.xaxis_y1-this.pixelOffset);\r\n        this.ctx.lineTo(this.xaxis_x2+this.pixelOffset,this.xaxis_y2-this.pixelOffset);\r\n        this.ctx.stroke();\r\n        \/\/y-axis\r\n        this.ctx.beginPath();\r\n        this.ctx.strokeStyle = this.yaxisColor;\r\n        this.ctx.moveTo(this.yaxis_x1+this.pixelOffset,this.yaxis_y1-this.pixelOffset);\r\n        this.ctx.lineTo(this.yaxis_x2+this.pixelOffset,this.yaxis_y2-this.pixelOffset);\r\n        this.ctx.stroke();\r\n\r\n        \/\/y major and minor ticks\r\n        var ticks = (this.ymajorTicks)*(this.yminorTicks+1);  \/\/TODO: make scales on axes begin at arbitrary values and not just on major tick boundaries\r\n        var increment = (this.yaxis_y1-this.yaxis_y2) \/ ticks;\r\n        var minorCount = this.yminorTicks+1;\r\n        var majorCount = 0;\r\n        x = this.xaxis_x1 + this.pixelOffset;\r\n        var xend = this.xaxis_x2 + this.pixelOffset;\r\n        for (var t=0; t&lt;=ticks; t++) {\r\n          y = Math.floor(this.xaxis_y1-increment*t)-this.pixelOffset;\r\n          this.ctx.beginPath();\r\n          if (minorCount &gt; this.yminorTicks) {  \/\/draw major tick\r\n            this.ctx.strokeStyle = this.ymajorTickColor;\r\n            this.ctx.moveTo(x-this.ymajorTickLength,y);\r\n            if (t == 0) {\r\n              this.ctx.lineTo(x,y);\r\n            } else {\r\n              this.ctx.lineTo(xend,y);  \/\/TODO: separate drawing of ticks from drawing of lines in graph area\r\n            }                      \/\/TODO: allow ticks to be drawn on both sides of an axis if so set\r\n            minorCount = 1;\r\n            \/\/draw axis numbers here\r\n            this.ctx.strokeStyle = this.yaxisFontColor;\r\n            this.ctx.fillStyle = this.yaxisFontColor;\r\n            this.ctx.fillText(((this.yvalMin+(this.yvalMax-this.yvalMin)*(majorCount\/this.ymajorTicks)).toFixed(1)),\r\n                           this.xaxis_x1-28+this.pixelOffset,y+4);  \/\/TODO: parameterize the text location offsets\r\n            majorCount++;\r\n          }\r\n          else {                           \/\/draw minor tick\r\n            this.ctx.strokeStyle = this.yminorTickColor;\r\n            this.ctx.moveTo(x-this.yminorTickLength,y);\r\n            this.ctx.lineTo(x,y);\r\n            minorCount++;\r\n          }\r\n          this.ctx.stroke();\r\n        }\r\n        \r\n        \/\/x major and minor ticks\r\n        ticks = (this.xmajorTicks)*(this.xminorTicks+1);\r\n        increment = (this.xaxis_x2-this.xaxis_x1) \/ ticks;\r\n        var minorCount = this.xminorTicks+1;\r\n        var majorCount = 0;\r\n        y = this.yaxis_y1 - this.pixelOffset;\r\n        for (var t=0; t&lt;=ticks; t++) {\r\n          x = Math.floor(this.yaxis_x1+increment*t)+this.pixelOffset;\r\n          this.ctx.beginPath();\r\n          if (minorCount &gt; this.xminorTicks) {  \/\/draw major tick\r\n            this.ctx.strokeStyle = this.xmajorTickColor;\r\n            this.ctx.moveTo(x,y+this.xmajorTickLength);\r\n            this.ctx.lineTo(x,y);\r\n            minorCount = 1;\r\n            \/\/draw axis numbers here\r\n            this.ctx.strokeStyle = this.xaxisFontColor;\r\n            this.ctx.fillStyle = this.xaxisFontColor;\r\n            this.ctx.fillText(((this.xvalMin+(this.xvalMax-this.xvalMin)*(majorCount\/this.xmajorTicks)).toFixed(1)),\r\n                           x+this.pixelOffset,this.xaxis_y1+this.xmajorTickLength+12);  \/\/TODO: parameterize the text location offsets\r\n            majorCount++;\r\n          }\r\n          else {                           \/\/draw minor tick\r\n            this.ctx.strokeStyle = this.xminorTickColor;\r\n            this.ctx.moveTo(x,y+this.xminorTickLength);\r\n            this.ctx.lineTo(x,y);\r\n            minorCount++;\r\n          }\r\n          this.ctx.stroke();\r\n        }\r\n        \/\/draw x-axis label\r\n        x = Math.floor((this.xaxis_x1+this.xaxis_x2) * 0.5) + this.pixelOffset;\r\n        y = this.canvas.height - 6.0 - this.pixelOffset;  \/\/TODO: parameterize this\r\n        this.ctx.fillStyle = this.xaxisFontColor;\r\n        this.ctx.fillText(this.xaxisLabel,x,y);      \r\n      }\r\n      this.plot = function(xval,yval) {\r\n        \/\/check if new high or low since last curve reset\r\n        if ((yval &lt; this.ylo) &amp;&amp; (yval != 0.0)) {\r\n          this.ylo = yval;\r\n        }\r\n        if ((yval &gt; this.yhi) &amp;&amp; (yval != 0.0)) {\r\n          this.yhi = yval;\r\n        }\r\n        \/\/check if x or y value outside of graphable range\r\n        var xEff = 0.0;  \/\/effective x value to be plotted\r\n        if (xval &lt; this.xvalMinOuter) {\r\n          xEff = this.xvalMinOuter;\r\n        } else if (xval &gt; this.xvalMaxOuter) {\r\n          xEff = this.xvalMaxOuter;\r\n        } else {\r\n          xEff = xval;\r\n        }\r\n        var yEff = 0.0;  \/\/effective y value to be plotted\r\n        if (yval &lt; this.yvalMinOuter) {\r\n          yEff = this.yvalMinOuter;\r\n        } else if (yval &gt; this.yvalMaxOuter) {\r\n          yEff = this.yvalMaxOuter;\r\n        } else {\r\n          yEff = yval;\r\n        }\r\n        this.xplot = Math.floor(this.xaxis_x1 + ((xEff-this.xvalMinOuter)\/(this.xvalMaxOuter-this.xvalMinOuter)*\r\n                                (this.xaxis_x2-this.xaxis_x1))) + this.pixelOffset;\r\n        this.yplot = Math.floor(this.yaxis_y1 - ((yEff-this.yvalMinOuter)\/(this.yvalMaxOuter-this.yvalMinOuter)*\r\n                                (this.yaxis_y1-this.yaxis_y2))) - this.pixelOffset;\r\n      }\r\n      this.coloredCurveSegment = function(op) {\r\n        \/\/assumes the plot function has been called and that this.xplot and this.yplot have meaningful values\r\n        if (op == this.move) {\r\n          this.x0 = this.xplot;\r\n          this.y0 = this.yplot;\r\n          this.x1 = this.xplot;\r\n          this.y1 = this.yplot;\r\n          this.ctx.beginPath();\r\n          this.ctx.moveTo(this.x0,this.y0);\r\n        } else if (op == this.line) {\r\n          if (this.graphCycle != this.oldCycle) {\r\n            this.ctx.beginPath();\r\n            this.ctx.strokeStyle = this.colorArray[this.graphCycle];\r\n            this.oldCycle = this.graphCycle;  \/\/monitor whether this is used\r\n            this.ctx.moveTo(this.x1,this.y1);\r\n          }\r\n          this.x1 = this.xplot;\r\n          this.y1 = this.yplot;\r\n          if ((this.graphCycle != this.graphCycleTop0) &amp;&amp; (this.graphCycle != this.graphCycleBottom0)) {\r\n            \/\/draw the line segment if not jumping to or from undefined value at top or bottom of driving function range\r\n            this.ctx.lineTo(this.x1,this.y1);\r\n            this.ctx.stroke();    \r\n          }\r\n        }\r\n      } \r\n      this.symbol = function(isymbol,icolor) {\r\n        this.ctx.strokeStyle = icolor;\r\n        if (isymbol == 1) {\r\n          \/\/draw a cross\r\n          this.ctx.moveTo(this.xplot-3.0,this.yplot);\r\n          this.ctx.lineTo(this.xplot+3.0,this.yplot);\r\n          this.ctx.stroke();\r\n          this.ctx.moveTo(this.xplot,this.yplot-3.0);\r\n          this.ctx.lineTo(this.xplot,this.yplot+3.0);\r\n          this.ctx.stroke();\r\n        }\r\n        if (isymbol == 2) {\r\n          \/\/draw an X\r\n          this.ctx.moveTo(this.xplot-3.0,this.yplot-3.0);\r\n          this.ctx.lineTo(this.xplot+3.0,this.yplot+3.0);\r\n          this.ctx.stroke();\r\n          this.ctx.moveTo(this.xplot+3.0,this.yplot-3.0);\r\n          this.ctx.lineTo(this.xplot-3.0,this.yplot+3.0);\r\n          this.ctx.stroke();\r\n        }\r\n      }    \r\n      this.drawFunctionColoredCurve = function(func) { \/\/assumes that function parameter sets needed values of graphCycle \r\n        var increment = (this.xvalMaxOuter-this.xvalMinOuter) \/ (this.xaxis_x2-this.xaxis_x1+1);\r\n        var x = this.xvalMinOuter;\r\n        var op = this.move;\r\n        do {\r\n          var y = func(x);\r\n          this.setGraphCycle(graphCycle);  \/\/set object value to global value set by function\r\n          this.plot(x,y);\r\n          this.coloredCurveSegment(op);\r\n          op = this.line;\r\n          x += increment;\r\n        } while (x &lt;= this.xvalMaxOuter);\r\n      }  \r\n      this.drawGraph = function() {\r\n        this.canvas.style.border = \"1px solid \" + this.borderColor;\r\n        this.ctx.fillStyle = this.backgroundColor;\r\n        this.ctx.fillRect(0,0,this.width,this.height);\r\n        this.drawAxes();\r\n        this.resetCurve();\r\n        this.drawFunctionColoredCurve(TFind_h_f);\r\n      };\r\n    }\r\n    \r\n    bcGraph = new graph(400,400,\"bcg\");\r\n    bcGraph.setBorderColor(\"#0000FF\");\r\n    bcGraph.setBackgroundColor(\"#BBBBBB\");\r\n    bcGraph.setXaxis_X1(70.0);\r\n    bcGraph.setXaxis_Y1(360.0);\r\n    bcGraph.setXaxis_X2(380.0);\r\n    bcGraph.setXaxis_Y2(360.0);\r\n    bcGraph.setYaxis_X1(70.0);\r\n    bcGraph.setYaxis_Y1(360.0);\r\n    bcGraph.setYaxis_X2(70.0);\r\n    bcGraph.setYaxis_Y2(25.0);\r\n    bcGraph.setXaxisColor(\"#000000\");\r\n    bcGraph.setYaxisColor(\"#000000\");\r\n    bcGraph.setXaxisLabel(\"Temperature (\u00b0F)\");\r\n    bcGraph.setYaxisLabel(\"Specific Enthalphy of Liquid (BTU\/lbm)\");\r\n    bcGraph.setXaxisFontColor(\"#0000FF\");\r\n    bcGraph.setYaxisFontColor(\"#880000\");\r\n    bcGraph.setGraphLabel(\"Specific Enthalpy vs. Temperature: Liquid Phase\");\r\n    bcGraph.setGraphLabelColor(\"#FF0000\");\r\n    bcGraph.setXmajorTicks(6);\r\n    bcGraph.setYmajorTicks(7);\r\n    bcGraph.setXminorTicks(4);\r\n    bcGraph.setYminorTicks(3);\r\n    bcGraph.setXmajorTickColor(\"#888888\");\r\n    bcGraph.setYmajorTickColor(\"#888888\");\r\n    bcGraph.setXminorTickColor(\"#FF0000\");\r\n    bcGraph.setYminorTickColor(\"#FF0000\");\r\n    bcGraph.setXmajorTickLength(5);\r\n    bcGraph.setYmajorTickLength(5);\r\n    bcGraph.setXminorTickLength(3);\r\n    bcGraph.setYminorTickLength(3);\r\n    bcGraph.setXvalMinOuter(33.0);\r\n    bcGraph.setXvalMaxOuter(633.0);\r\n    bcGraph.setYvalMinOuter(0.0);\r\n    bcGraph.setYvalMaxOuter(700.0);\r\n    bcGraph.setXvalMin(33.0);\r\n    bcGraph.setXvalMax(633.0);\r\n    bcGraph.setYvalMin(0.0);\r\n    bcGraph.setYvalMax(700.0);\r\n    bcGraph.setPixelOffset(0.5);\r\n    bcGraph.drawGraph();\r\n  \r\n  \r\n    function TFind_h_f(T) {\r\n\r\n      var temp = 0.0;\r\n\r\n      if (T &lt; -40.0) {\r\n        graphCycle = graphCycleBottom0;\r\n        temp = 0.0;\r\n      } else if (T &lt; 32.018) {\r\n        graphCycle = 1;\r\n        T = T + 4.00000000000000E+0001 + 2.0;\r\n        temp = -8.62486040547143E-0001;\r\n        temp += ( 4.30266497429456E-0001 * T);\r\n        temp += ( 4.88261422057819E-0004 * T * T);\r\n        temp += -1.77000000000000E+0002;\r\n      } else if (T &lt; 95.0) {\r\n        graphCycle = 2;\r\n        T = T - 3.20180000000000E+0001 + 2.0;\r\n        temp = -2.00215934711505E+0000;\r\n        temp += ( 1.00107967355752E+0000 * T);\r\n        temp +=  1.00000000000000E-0002;\r\n      } else if (T &lt;= 281.03) {\r\n        graphCycle = 3;\r\n        temp = -4.69729065930005E+0001 * T;\r\n        temp += (-9.74607390973568E+0004 \/ T);\r\n        temp += ( 1.90835053035617E+0003 * Math.sqrt(T));\r\n        temp += (-6.20932533077151E+0003 * Math.log(T));\r\n        temp += ( 2.66267491701626E-0002 * T * T);\r\n        temp += (-1.27691940626784E-0005 * T * T * T);\r\n        temp +=  1.49281343450844E+0004;\r\n        temp +=  6.97399999999907E+0001;\r\n      } else if (T &lt;= 373.13) {\r\n        graphCycle = 4;\r\n        temp =  2.05053732381165E+0004 * T;\r\n        temp += ( 1.20426776893188E+0008 \/ T);\r\n        temp += (-1.05240833785439E+0006 * Math.sqrt(T));\r\n        temp += ( 4.44871141563416E+0006 * Math.log(T));\r\n        temp += (-6.98757084476529E+0000 * T * T);\r\n        temp += ( 2.13944594740312E-0003 * T * T * T);\r\n        temp += -1.31281338246765E+0007;\r\n        temp +=  2.50239999999991E+0002;\r\n      } else if (T &lt;= 621.21) {\r\n        graphCycle = 5;\r\n        temp =  3.07047527451813E+0003 * T;\r\n        temp += ( 3.65972248729248E+0007 \/ T);\r\n        temp += (-1.87934826001644E+0005 * Math.sqrt(T));\r\n        temp += ( 9.48190966569901E+0005 * Math.log(T));\r\n        temp += (-7.37055799842892E-0001 * T * T);\r\n        temp += ( 1.60163285570558E-0004 * T * T * T);\r\n        temp += -3.13433195117950E+0006;\r\n        temp +=  3.46290000000037E+0002;\r\n      } else {\r\n        graphCycle = graphCycleTop0;\r\n        temp = 0.0;\r\n      }\r\n      return temp;\r\n    }\r\n\/\/ \/  <- this little bit of bizarre is needed to ensure the Crayon WordPress add-in doesn't try to interpret things as comments strangely\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The current form of the graph is meant to support a single type of plot, which is the single curve in segmented colors as shown. I've set the object up so it plots the y-value at every pixel along the x-axis and draws lines from point to point after the initial moveTo call. The vagaries of the way pixels work on canvases and the fact that lines and characters are antialiased this technique yields a fairly thick plotted line.<\/p>\n<p>I've broken the original functions down so the calculation of the pixel location on the graph is separated from the calculation of the effective value to plot, and that is separated from the function used to repeatedly call for the next point to be plotted. A package like Microsoft Excel plots only from a discrete set of values calculated in cells, and there is usually a fair amount of distance between plotted points on the x-axis. I've stubbed in a plotting call that draws specific figures at a specified point (a '+' and an 'X' to start) but have not yet implemented anything that plots successive such values from a list. That functionality will definitely be included as I describe how I did the individual sections of curve fit and show the resulting function along with discrete control (x,y values from the steam tables used to derive the actual curve fit) and test (x,y values from the steam tables in the same range of x values but not used to derive the actual curve fit) points.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Picking up from last week I&#8217;ve finished turning the JavaScript graphing widget into an object, the results of which are shown below. There is a long list of TODOs included in the code that is not close to being exhaustive; &hellip; <a href=\"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/02\/29\/turning-the-graph-function-into-an-object-in-javascript-part-4\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[76,84,49],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/454"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":15,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/454\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/454\/revisions\/1463"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}