Grapher.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. require({cache:{
  2. 'url:dojox/calc/templates/Grapher.html':"<div>\n<div data-dojo-attach-point=\"chartsParent\" class=\"dojoxCalcChartHolder\"></div>\n<div data-dojo-attach-point=\"outerDiv\">\n<div data-dojo-type=\"dijit.form.DropDownButton\" data-dojo-attach-point=\"windowOptions\" class=\"dojoxCalcDropDownForWindowOptions\" title=\"Window Options\">\n\t<div>Window Options</div>\n\t<div data-dojo-type=\"dijit.TooltipDialog\" data-dojo-attach-point=\"windowOptionsInside\" class=\"dojoxCalcTooltipDialogForWindowOptions\" title=\"\">\n\t\t<table class=\"dojoxCalcGraphOptionTable\">\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\tWidth:\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.TextBox\" data-dojo-attach-point=\"graphWidth\" class=\"dojoxCalcGraphWidth\" value=\"500\" />\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\tHeight:\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.TextBox\" data-dojo-attach-point=\"graphHeight\" class=\"dojoxCalcGraphHeight\" value=\"500\" />\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\tX >=\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.TextBox\" data-dojo-attach-point=\"graphMinX\" class=\"dojoxCalcGraphMinX\" value=\"-10\" />\n\t\t\t\t</td>\n\n\t\t\t\t<td>\n\t\t\t\t\tX <=\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.TextBox\" data-dojo-attach-point=\"graphMaxX\" class=\"dojoxCalcGraphMaxX\" value=\"10\" />\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\tY >=\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.TextBox\" data-dojo-attach-point=\"graphMinY\" class=\"dojoxCalcGraphMinY\" value=\"-10\" />\n\t\t\t\t</td>\n\n\t\t\t\t<td>\n\t\t\t\t\tY <=\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.TextBox\" data-dojo-attach-point=\"graphMaxY\" class=\"dojoxCalcGraphMaxY\" value=\"10\" />\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t</div>\n</div>\n\n<BR>\n\n<div class=\"dojoxCalcGrapherFuncOuterDiv\">\n\t<table class=\"dojoxCalcGrapherFuncTable\" data-dojo-attach-point=\"graphTable\">\n\t</table>\n</div>\n\n<div data-dojo-type=\"dijit.form.DropDownButton\" data-dojo-attach-point='addFuncButton' class=\"dojoxCalcDropDownAddingFunction\">\n\t<div>Add Function</div>\n\t<div data-dojo-type=\"dijit.TooltipDialog\" data-dojo-attach-point=\"addFuncInside\" class=\"dojoxCalcTooltipDialogAddingFunction\" title=\"\">\n\t\t<table class=\"dojoxCalcGrapherModeTable\">\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\tMode:\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<select data-dojo-type=\"dijit.form.Select\" data-dojo-attach-point=\"funcMode\" class=\"dojoxCalcFunctionModeSelector\">\n\t\t\t\t\t\t<option value=\"y=\" selected=\"selected\">y=</option>\n\t\t\t\t\t\t<option value=\"x=\">x=</option>\n\t\t\t\t\t</select>\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t</tr>\n\t\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\t<input data-dojo-type=\"dijit.form.Button\" data-dojo-attach-point=\"createFunc\" class=\"dojoxCalcAddFunctionButton\" label=\"Create\" />\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t</div>\n</div>\n<BR>\n<BR>\n<table class=\"dijitInline dojoxCalcGrapherLayout\">\n\t<tr>\n\t\t<td class=\"dojoxCalcGrapherButtonContainer\">\n\t\t\t<input data-dojo-type=\"dijit.form.Button\" class=\"dojoxCalcGrapherButton\" data-dojo-attach-point='selectAllButton' label=\"Select All\" />\n\t\t</td>\n\t\t<td class=\"dojoxCalcGrapherButtonContainer\">\n\t\t\t<input data-dojo-type=\"dijit.form.Button\" class=\"dojoxCalcGrapherButton\" data-dojo-attach-point='deselectAllButton' label=\"Deselect All\" />\n\t\t</td>\n\t</tr>\n\t<tr>\n\t\t<td class=\"dojoxCalcGrapherButtonContainer\">\n\t\t\t<input data-dojo-type=\"dijit.form.Button\" class=\"dojoxCalcGrapherButton\" data-dojo-attach-point='drawButton'label=\"Draw Selected\" />\n\t\t</td>\n\t\t<td class=\"dojoxCalcGrapherButtonContainer\">\n\t\t\t<input data-dojo-type=\"dijit.form.Button\" class=\"dojoxCalcGrapherButton\" data-dojo-attach-point='eraseButton' label=\"Erase Selected\" />\n\t\t</td>\n\t</tr>\n\t<tr>\n\t\t<td class=\"dojoxCalcGrapherButtonContainer\">\n\t\t\t<input data-dojo-type=\"dijit.form.Button\" class=\"dojoxCalcGrapherButton\" data-dojo-attach-point='deleteButton' label=\"Delete Selected\" />\n\t\t</td>\n\t\t<td class=\"dojoxCalcGrapherButtonContainer\">\n\t\t\t<input data-dojo-type=\"dijit.form.Button\" class=\"dojoxCalcGrapherButton\" data-dojo-attach-point='closeButton' label=\"Close\" />\n\t\t</td>\n\t</tr>\n</table>\n</div>\n</div>\n"}});
  3. define("dojox/calc/Grapher", [
  4. "dojo/_base/declare",
  5. "dojo/_base/lang",
  6. "dojo/_base/window",
  7. "dojo/dom-construct",
  8. "dojo/dom-class",
  9. "dojo/dom-style",
  10. "dijit/_WidgetBase",
  11. "dijit/_WidgetsInTemplateMixin",
  12. "dijit/_TemplatedMixin",
  13. "dojox/math/_base",
  14. "dijit/registry",
  15. "dijit/form/DropDownButton",
  16. "dijit/TooltipDialog",
  17. "dijit/form/TextBox",
  18. "dijit/form/CheckBox",
  19. "dijit/ColorPalette",
  20. "dojox/charting/Chart",
  21. "dojox/charting/axis2d/Default",
  22. "dojox/charting/plot2d/Default",
  23. "dojox/charting/plot2d/Lines",
  24. "dojox/charting/themes/Tufte",
  25. "dojo/colors",
  26. "dojo/text!./templates/Grapher.html",
  27. "dojox/calc/_Executor",
  28. "dijit/form/Button", // template
  29. "dijit/form/Select" // template
  30. ], function(declare, lang, win, domConstruct, domClass, domStyle, WidgetBase, WidgetsInTemplateMixin, TemplatedMixin, math, registry, DropDownButton, TooltipDialog, TextBox, CheckBox, ColorPalette, Chart, axis2d, plot2d, Lines, Tufte, colors, template, calc){
  31. // summary
  32. // provide static functions for Grapher
  33. var
  34. epsilon = 1e-15 / 9,
  35. bigNumber = 1e200,
  36. log2 = Math.log(2),
  37. defaultParams = {graphNumber:0, fOfX:true, color:{stroke:"black"}};
  38. /*=====
  39. WidgetBase = dijit._WidgetBase;
  40. WidgetsInTemplateMixin = dijit._WidgetsInTemplateMixin;
  41. TemplatedMixin = dijit._TemplatedMixin;
  42. =====*/
  43. var Grapher = declare(
  44. "dojox.calc.Grapher",
  45. [WidgetBase, TemplatedMixin, WidgetsInTemplateMixin],
  46. {
  47. // summary:
  48. // The dialog layout for making graphs
  49. //
  50. templateString: template,
  51. addXYAxes: function(chart){
  52. // summary:
  53. // add or re-add the default x/y axes to the Chart provided
  54. // params:
  55. // chart is an instance of dojox.charting.Chart
  56. return chart.addAxis("x", {
  57. max: parseInt(this.graphMaxX.get("value")),
  58. min: parseInt(this.graphMinX.get("value")),
  59. majorLabels: true,
  60. minorLabels: true,
  61. //includeZero: true,
  62. minorTicks: false,
  63. microTicks: false,
  64. //majorTickStep: 1,
  65. htmlLabels: true,
  66. labelFunc: function(value){
  67. return value;
  68. },
  69. maxLabelSize: 30,
  70. fixUpper: "major", fixLower: "major",
  71. majorTick: { length: 3 }
  72. }).
  73. addAxis("y", {
  74. max: parseInt(this.graphMaxY.get("value")),
  75. min: parseInt(this.graphMinY.get("value")),
  76. labelFunc: function(value){
  77. return value;
  78. },
  79. maxLabelSize: 50,
  80. vertical: true,
  81. // htmlLabels: false,
  82. microTicks: false,
  83. minorTicks: true,
  84. majorTick: { stroke: "black", length: 3 }
  85. });
  86. },
  87. selectAll: function(){
  88. // summary
  89. // select all checkboxes inside the function table
  90. for(var i = 0; i < this.rowCount; i++){
  91. this.array[i][this.checkboxIndex].set("checked", true);
  92. }
  93. },
  94. deselectAll: function(){
  95. // summary
  96. // deselect all checkboxes inside the function table
  97. for(var i = 0; i < this.rowCount; i++){
  98. this.array[i][this.checkboxIndex].set("checked", false);
  99. }
  100. },
  101. drawOne: function(i){
  102. // i is a the index to this.array
  103. // override me
  104. },
  105. onDraw: function(){
  106. console.log("Draw was pressed");
  107. // override me
  108. },
  109. erase: function(i){
  110. // summary:
  111. // erase the chart inside this.array with the index i
  112. // params:
  113. // i is the integer index to this.array that represents the current row number in the table
  114. var nameNum = 0;
  115. var name = "Series "+this.array[i][this.funcNumberIndex]+"_"+nameNum;
  116. while(name in this.array[i][this.chartIndex].runs){
  117. this.array[i][this.chartIndex].removeSeries(name);
  118. nameNum++;
  119. name = "Series "+this.array[i][this.funcNumberIndex]+"_"+nameNum;
  120. }
  121. this.array[i][this.chartIndex].render();
  122. this.setStatus(i, "Hidden");
  123. },
  124. onErase: function(){
  125. // summary:
  126. // the erase button's onClick method
  127. // it see's if the checkbox is checked and then erases it if it is.
  128. for(var i = 0; i < this.rowCount; i++){
  129. if(this.array[i][this.checkboxIndex].get("checked")){
  130. this.erase(i);
  131. }
  132. }
  133. },
  134. onDelete: function(){
  135. // summary:
  136. // the delete button's onClick method
  137. // delete all of the selected rows
  138. for(var i = 0; i < this.rowCount; i++){
  139. if(this.array[i][this.checkboxIndex].get("checked")){
  140. this.erase(i);
  141. for(var k = 0; k < this.functionRef; k++){
  142. if(this.array[i][k] && this.array[i][k]["destroy"]){
  143. this.array[i][k].destroy();
  144. }
  145. }
  146. this.graphTable.deleteRow(i);
  147. this.array.splice(i, 1);
  148. this.rowCount--;
  149. i--;
  150. }
  151. }
  152. },
  153. // attributes to name the indices of this.array
  154. checkboxIndex: 0,
  155. functionMode: 1,
  156. expressionIndex: 2,
  157. colorIndex: 3,
  158. dropDownIndex: 4,
  159. tooltipIndex: 5,
  160. colorBoxFieldsetIndex: 6,
  161. statusIndex: 7,
  162. chartIndex: 8,
  163. funcNumberIndex: 9,
  164. evaluatedExpression: 10,
  165. functionRef: 11,
  166. createFunction: function(){
  167. // summary:
  168. // create a new row in the table with all of the dojo objects.
  169. var tr = this.graphTable.insertRow(-1);
  170. this.array[tr.rowIndex] = [];
  171. var td = tr.insertCell(-1);
  172. var d = domConstruct.create('div');
  173. td.appendChild(d);
  174. var checkBox = new CheckBox({}, d);
  175. this.array[tr.rowIndex][this.checkboxIndex] = checkBox;
  176. domClass.add(d, "dojoxCalcCheckBox");
  177. td = tr.insertCell(-1);
  178. var funcMode = this.funcMode.get("value");
  179. d = win.doc.createTextNode(funcMode);
  180. td.appendChild(d);
  181. this.array[tr.rowIndex][this.functionMode] = funcMode;
  182. //domClass.add(d, "dojoxCalcFunctionMode");// cannot use text nodes
  183. td = tr.insertCell(-1);
  184. d = domConstruct.create('div');
  185. td.appendChild(d);
  186. var expression = new TextBox({}, d);
  187. this.array[tr.rowIndex][this.expressionIndex] = expression;
  188. domClass.add(d, "dojoxCalcExpressionBox");
  189. var b = domConstruct.create('div');
  190. var color = new ColorPalette({changedColor:this.changedColor}, b);
  191. domClass.add(b, "dojoxCalcColorPalette");
  192. this.array[tr.rowIndex][this.colorIndex] = color;
  193. var c = domConstruct.create('div');
  194. var dialog = new TooltipDialog({content:color}, c);
  195. this.array[tr.rowIndex][this.tooltipIndex] = dialog;
  196. domClass.add(c, "dojoxCalcContainerOfColor");
  197. td = tr.insertCell(-1);
  198. d = domConstruct.create('div');
  199. td.appendChild(d);
  200. var colorBoxFieldset = domConstruct.create('fieldset');
  201. domStyle.set(colorBoxFieldset, { backgroundColor: "black", width: "1em", height: "1em", display: "inline" });
  202. this.array[tr.rowIndex][this.colorBoxFieldsetIndex] = colorBoxFieldset;
  203. var drop = new DropDownButton({label:"Color ", dropDown:dialog}, d);
  204. drop.containerNode.appendChild(colorBoxFieldset);
  205. this.array[tr.rowIndex][this.dropDownIndex] = drop;
  206. domClass.add(d, "dojoxCalcDropDownForColor");
  207. /*td = tr.insertCell(-1);
  208. d = domConstruct.create('div');
  209. td.appendChild(d);
  210. var status = new TextBox({style:"width:50px", value:"Hidden", readOnly:true}, d);//hidden, drawn, or error
  211. this.array[tr.rowIndex][this.statusIndex] = status;
  212. domClass.add(d, "dojoxCalcStatusBox");*/
  213. td = tr.insertCell(-1);
  214. d = domConstruct.create('fieldset');
  215. d.innerHTML = "Hidden";
  216. this.array[tr.rowIndex][this.statusIndex] = d;
  217. domClass.add(d, "dojoxCalcStatusBox");
  218. td.appendChild(d);
  219. d = domConstruct.create('div');
  220. domStyle.set(d, { position: "absolute", left: "0px", top: "0px" })
  221. this.chartsParent.appendChild(d);
  222. this.array[tr.rowIndex][this.chartNodeIndex] = d;
  223. domClass.add(d, "dojoxCalcChart");
  224. var chart = new dojox.charting.Chart(d).setTheme(dojox.charting.themes.Tufte).
  225. addPlot("default", { type: "Lines", shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]} });
  226. this.addXYAxes(chart);
  227. this.array[tr.rowIndex][this.chartIndex] = chart;
  228. color.set("chart", chart);
  229. color.set("colorBox", colorBoxFieldset);
  230. color.set("onChange", lang.hitch(color, 'changedColor'));
  231. this.array[tr.rowIndex][this.funcNumberIndex] = this.funcNumber++;
  232. this.rowCount++;
  233. },
  234. setStatus: function(i, status){
  235. // summary:
  236. // set the status of the row i to be status
  237. // params:
  238. // i is an integer index of this.array as well as a row index
  239. // status is a String, it is either Error, Hidden, or Drawn
  240. this.array[i][this.statusIndex].innerHTML = status; //this.array[i][this.statusIndex].set("value", status);
  241. },
  242. changedColor: function(){
  243. // summary:
  244. // make the color of the chart the new color
  245. // the context is changed to the colorPalette, and a reference to chart was added to it a an attribute
  246. var chart = this.get("chart");
  247. var colorBoxFieldset = this.get("colorBox");
  248. for(var i = 0; i < chart.series.length; i++){
  249. if(chart.series[i]["stroke"]){
  250. if(chart.series[i].stroke["color"]){
  251. chart.series[i]["stroke"].color = this.get("value");
  252. chart.dirty = true;
  253. }
  254. }
  255. }
  256. chart.render();
  257. domStyle.set(colorBoxFieldset, { backgroundColor: this.get("value") });
  258. },
  259. makeDirty: function(){
  260. // summary:
  261. // if something in the window options is changed, this is called
  262. this.dirty = true;
  263. },
  264. checkDirty1: function(){
  265. // summary:
  266. // to stay in sync with onChange, checkDirty is called with a timeout
  267. setTimeout(lang.hitch(this, 'checkDirty'), 0);
  268. },
  269. checkDirty: function(){
  270. // summary:
  271. // adjust all charts in this.array according to any changes in window options
  272. if(this.dirty){
  273. // change the axes of all charts if it is dirty
  274. for(var i = 0; i < this.rowCount; i++){
  275. this.array[i][this.chartIndex].removeAxis("x");
  276. this.array[i][this.chartIndex].removeAxis("y");
  277. this.addXYAxes(this.array[i][this.chartIndex]);
  278. }
  279. this.onDraw();
  280. }
  281. this.dirty = false;
  282. },
  283. postCreate: function(){
  284. // summary
  285. // add Event handlers, some additional attributes, etc
  286. this.inherited(arguments);// this is super class postCreate
  287. this.createFunc.set("onClick", lang.hitch(this, 'createFunction'));
  288. this.selectAllButton.set("onClick", lang.hitch(this, 'selectAll'));
  289. this.deselectAllButton.set("onClick", lang.hitch(this, 'deselectAll'));
  290. this.drawButton.set("onClick", lang.hitch(this, 'onDraw'));
  291. this.eraseButton.set("onClick", lang.hitch(this, 'onErase'));
  292. this.deleteButton.set("onClick", lang.hitch(this, 'onDelete'));
  293. this.dirty = false;
  294. this.graphWidth.set("onChange", lang.hitch(this, 'makeDirty'));
  295. this.graphHeight.set("onChange", lang.hitch(this, 'makeDirty'));
  296. this.graphMaxX.set("onChange", lang.hitch(this, 'makeDirty'));
  297. this.graphMinX.set("onChange", lang.hitch(this, 'makeDirty'));
  298. this.graphMaxY.set("onChange", lang.hitch(this, 'makeDirty'));
  299. this.graphMinY.set("onChange", lang.hitch(this, 'makeDirty'));
  300. this.windowOptionsInside.set("onClose", lang.hitch(this, 'checkDirty1'));
  301. this.funcNumber = 0;
  302. this.rowCount = 0;
  303. this.array = [];
  304. },
  305. startup: function(){
  306. // summary
  307. // make sure the parent has a close button if it needs to be able to close
  308. this.inherited(arguments);// this is super class startup
  309. // close is only valid if the parent is a widget with a close function
  310. var parent = registry.getEnclosingWidget(this.domNode.parentNode);
  311. if(parent && typeof parent.close == "function"){
  312. this.closeButton.set("onClick", lang.hitch(parent, 'close'));
  313. }else{
  314. domStyle.set(this.closeButton.domNode, { display: "none" }); // hide the button
  315. }
  316. // add one row at the start
  317. this.createFunction();
  318. // make the graph bounds appear initially
  319. this.array[0][this.checkboxIndex].set("checked", true);
  320. this.onDraw();
  321. this.erase(0);
  322. this.array[0][this.expressionIndex].value = "";
  323. }
  324. });
  325. return lang.mixin(calc, {
  326. draw: function(/*Chart*/ chart, /*Function*/ functionToGraph, params){
  327. // summary
  328. // graph a chart with the given function.
  329. // params
  330. // chart is a dojox.charting.Chart object, functionToGraph is a function with one numeric parameter (x or y typically)
  331. // and params is an Object the can contain the number of the graph in the chart it is (an integer), a boolean saying if the functionToGraph is a function of x (otherwise y)
  332. // and the color, which is an object with a stroke with a color's name eg: color:{stroke:"black"}
  333. params = lang.mixin({}, defaultParams, params);
  334. chart.fullGeometry();
  335. var x;
  336. var y;
  337. var points;
  338. if(params.fOfX==true){
  339. x = 'x';
  340. y = 'y';
  341. points = calc.generatePoints(functionToGraph, x, y, chart.axes.x.scaler.bounds.span, chart.axes.x.scaler.bounds.lower, chart.axes.x.scaler.bounds.upper, chart.axes.y.scaler.bounds.lower, chart.axes.y.scaler.bounds.upper);
  342. }else{
  343. x = 'y';
  344. y = 'x';
  345. points = calc.generatePoints(functionToGraph, x, y, chart.axes.y.scaler.bounds.span, chart.axes.y.scaler.bounds.lower, chart.axes.y.scaler.bounds.upper, chart.axes.x.scaler.bounds.lower, chart.axes.x.scaler.bounds.upper);
  346. }
  347. var i = 0;
  348. if(points.length > 0){
  349. for(; i < points.length; i++){
  350. if(points[i].length>0){
  351. chart.addSeries("Series "+params.graphNumber+"_"+i, points[i], params.color);
  352. }
  353. }
  354. }
  355. // you only need to remove the excess i's
  356. var name = "Series "+params.graphNumber+"_"+i;
  357. while(name in chart.runs){
  358. chart.removeSeries(name);
  359. i++;
  360. name = "Series "+params.graphNumber+"_"+i;
  361. }
  362. chart.render();
  363. return points;
  364. },
  365. generatePoints: function(/*Function*/ funcToGraph, /*String*/ x, /*String*/ y, /*Number*/ width, /*Number*/ minX, /*Number*/ maxX, /*Number*/ minY, /*Number*/ maxY){
  366. // summary:
  367. // create the points with information about the graph.
  368. // params:
  369. // funcToGraph is a function with one numeric parameter (x or y typically)
  370. // x and y are Strings which always have the values of "x" or "y". If y="x" and x="y" then it is creating points for the function as though it was a function of y
  371. // Number minX, Number maxX, Number minY, Number maxY are all bounds of the chart. If x="y" then maxY should be the maximum bound of x rather than y
  372. // Number width is the pixel width of the chart
  373. // output:
  374. // an array of arrays of points
  375. var pow2 = (1 << Math.ceil(Math.log(width) / log2));
  376. var
  377. dx = (maxX - minX) / pow2, // divide by 2^n instead of width to avoid loss of precision
  378. points = [], // [{x:value, y:value2},...]
  379. series = 0,
  380. slopeTrend,
  381. slopeTrendTemp;
  382. points[series] = [];
  383. var i = minX, k, p;
  384. for(var counter = 0; counter <= pow2; i += dx, counter++){
  385. p = {};
  386. p[x] = i;
  387. p[y] = funcToGraph({_name:x, _value:i, _graphing:true});//funcToGraph(i);
  388. if(p[x] == null || p[y] == null){
  389. return {};// someone pushed cancel in the val code
  390. }
  391. if(isNaN(p[y]) || isNaN(p[x])){
  392. continue;
  393. }
  394. points[series].push(p);
  395. if(points[series].length == 3){
  396. slopeTrend = getSlopePairTrend(slope(points[series][points[series].length - 3], points[series][points[series].length-2]), slope(points[series][points[series].length-2], points[series][points[series].length-1]));
  397. continue;
  398. }
  399. if(points[series].length < 4){
  400. continue;
  401. }
  402. slopeTrendTemp = getSlopePairTrend(slope(points[series][points[series].length - 3], points[series][points[series].length-2]), slope(points[series][points[series].length-2], points[series][points[series].length-1]));
  403. if(slopeTrend.inc != slopeTrendTemp.inc || slopeTrend.pos != slopeTrendTemp.pos){
  404. // var a = asymptoteSearch(funcToGraph, points[series][points[series].length - 2], points[series][points[series].length-1]);
  405. var a = asymptoteSearch(funcToGraph, points[series][points[series].length - 3], points[series][points[series].length-1]);
  406. p = points[series].pop();
  407. // this pop was added after changing the var a line above
  408. points[series].pop();
  409. for(var j = 0; j < a[0].length; j++){
  410. points[series].push(a[0][j]);
  411. }
  412. for(k = 1; k < a.length; k++){
  413. points[++series] = a.pop();
  414. }
  415. points[series].push(p);
  416. slopeTrend = slopeTrendTemp;
  417. }
  418. }
  419. while(points.length > 1){
  420. for(k = 0; k < points[1].length; k++){
  421. if(points[0][points[0].length - 1][x] == points[1][k][x]){
  422. continue;
  423. }
  424. points[0].push(points[1][k]);
  425. }
  426. points.splice(1, 1);
  427. }
  428. points = points[0];
  429. // make new series when it goes off the graph
  430. var s = 0;
  431. var points2 = [ [] ];
  432. for(k = 0; k < points.length; k++){
  433. var x1, y1, b, slope1;
  434. if(isNaN(points[k][y]) || isNaN(points[k][x])){
  435. while(isNaN(points[k][y]) || isNaN(points[k][x])){
  436. points.splice(k, 1);
  437. }
  438. points2[++s] = [];
  439. k--;
  440. }else if(points[k][y] > maxY || points[k][y] < minY){
  441. // make the last point's y equal maxY and find a matching x
  442. if(k > 0 && points[k - 1].y!=minY && points[k - 1].y!=maxY){
  443. slope1 = slope(points[k - 1], points[k]);
  444. if(slope1 > bigNumber){
  445. slope1 = bigNumber;
  446. }else if(slope1 < -bigNumber){
  447. slope1 = -bigNumber;
  448. }
  449. if(points[k][y] > maxY){
  450. y1 = maxY;
  451. }else{
  452. y1 = minY;
  453. }
  454. b = points[k][y] - slope1 * points[k][x];
  455. x1 = (y1 - b) / slope1;
  456. p = {};
  457. p[x] = x1;
  458. p[y] = funcToGraph(x1);//y1;//
  459. if(p[y]!=y1){
  460. p = findMinOrMaxY(funcToGraph, points[k - 1], points[k], y1);
  461. }
  462. points2[s].push(p);
  463. // setup the next series
  464. points2[++s] = []
  465. }
  466. var startK = k;
  467. while(k < points.length && (points[k][y] > maxY || points[k][y] < minY)){
  468. k++;
  469. }
  470. if(k >= points.length){
  471. if(points2[s].length == 0){
  472. points2.splice(s, 1);
  473. }
  474. break;
  475. }
  476. // connect the end graph
  477. if(k > 0 && points[k].y != minY && points[k].y != maxY){
  478. slope1 = slope(points[k - 1], points[k]);
  479. if(slope1 > bigNumber){
  480. slope1 = bigNumber;
  481. }else if(slope1 < -bigNumber){
  482. slope1 = -bigNumber;
  483. }
  484. if(points[k - 1][y] > maxY){
  485. y1 = maxY;
  486. }else{
  487. y1 = minY;
  488. }
  489. b = points[k][y] - slope1 * points[k][x];
  490. x1 = (y1 - b) / slope1;
  491. p = {};
  492. p[x] = x1;
  493. p[y] = funcToGraph(x1);//y1;//
  494. if(p[y]!=y1){
  495. p = findMinOrMaxY(funcToGraph, points[k - 1], points[k], y1);
  496. }
  497. points2[s].push(p);
  498. points2[s].push(points[k]);
  499. }
  500. }else{
  501. points2[s].push(points[k]);
  502. }
  503. }
  504. return points2;
  505. function findMinOrMaxY(funcToGraph, left, right, minMaxY){
  506. while(left<=right){
  507. var midX = (left[x]+right[x])/2;
  508. var mid = {};
  509. mid[x] = midX;
  510. mid[y] = funcToGraph(mid[x]);
  511. if(minMaxY==mid[y]||mid[x]==right[x]||mid[x]==left[x]){
  512. return mid;
  513. }
  514. var moveTowardsLarger = true;
  515. if(minMaxY<mid[y]){
  516. moveTowardsLarger = false;
  517. }
  518. if(mid[y]<right[y]){
  519. if(moveTowardsLarger){
  520. left = mid;
  521. }else{
  522. right = mid;
  523. }
  524. }else if(mid[y]<left[y]){
  525. if(!moveTowardsLarger){
  526. left = mid;
  527. }else{
  528. right = mid;
  529. }
  530. }
  531. }
  532. return NaN;
  533. }
  534. function asymptoteSearch(funcToGraph, pointStart, pointStop){
  535. var
  536. pointTemp = [ [], [] ],
  537. left = pointStart,
  538. right = pointStop,
  539. midpoint;
  540. while(left[x] <= right[x]){
  541. var midX = (left[x] + right[x]) / 2;
  542. midpoint = {};
  543. midpoint[x] = midX;
  544. midpoint[y] = funcToGraph(midX);
  545. var rx = nextNumber(midpoint[x]);
  546. var rightPoint = {};
  547. rightPoint[x] = rx;
  548. rightPoint[y] = funcToGraph(rx);
  549. if(Math.abs(rightPoint[y]) >= Math.abs(midpoint[y])){
  550. pointTemp[0].push(midpoint);
  551. left = rightPoint;
  552. }else{
  553. pointTemp[1].unshift(midpoint);
  554. if(right[x] == midpoint[x]){
  555. break;
  556. }
  557. right = midpoint;
  558. }
  559. }
  560. return pointTemp;
  561. }
  562. function getSlopePairTrend(slope1, slope2){
  563. var
  564. isInc = false,
  565. isPos = false;
  566. if(slope1 < slope2){
  567. isInc = true;
  568. }
  569. if(slope2 > 0){
  570. isPos = true;
  571. }
  572. return { inc: isInc, pos: isPos };
  573. }
  574. function nextNumber(v){
  575. var delta;
  576. if(v > -1 && v < 1){
  577. if(v < 0){ // special handling as we approach 0
  578. if(v >= -epsilon){
  579. delta = -v; // always stop at 0
  580. }else{
  581. delta = v / Math.ceil(v / epsilon); // divide distance to 0 into equal tiny chunks
  582. }
  583. }else{
  584. delta = epsilon;
  585. }
  586. }else{
  587. delta = Math.abs(v) * epsilon;
  588. }
  589. return v + delta;
  590. }
  591. function slope(p1, p2){
  592. return (p2[y] - p1[y]) / (p2[x] - p1[x]);
  593. }
  594. },
  595. Grapher: Grapher
  596. });
  597. });