Draw graphics online

It all started with the fact that about three or four years ago I wrote my own parser and calculator of mathematical expressions - jExpressions - in Java.

And so, relatively recently, in the light of the mastering of Java EE technology, the idea arose of drawing a graphical drawing tool based on this parser.

The parser at that time had a rather exotic syntax for calling functions (eg exp # 3 instead of exp (3); beta # 1: 2 instead of beta (1,2)).
Also from time to time bugs flew.
')
After several hours of doping and deregulation, jExpressions version 1.0 came into being.

After that, it was possible to get down to business.


Drawing charts are arranged as follows:

1. The servlet calculates the function values ​​for the Nth number of points (250 for simple and 1000 for parametric) and returns the result in json format.
2. The webpage receives json from the servlet and draws a graph using the Flot plugin.

Function code processRequest () servlet:

private void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain;charset=UTF-8"); PrintWriter out = response.getWriter(); String result = "{ \"result\" : "; String func = request.getParameter("func"); String var = request.getParameter("variable"); String begin = request.getParameter("begin"); String end = request.getParameter("end"); if (func==null||var==null||begin==null||end==null) { result += "\"error\", \"err\" : \"param\"}"; out.println(result); return; } // upd: //Double x0 = Double.parseDouble(begin); //Double x1 = Double.parseDouble(end); Double x0; Double x1; try { x0 = Double.parseDouble(begin); x1 = Double.parseDouble(end); } catch (Exception e) { result += "\"error\", \"err\" : \"param\"}"; out.println(result); return; } int num = 0; try { Parser parser = new Parser(); num = parser.setAlias(var); //     long time0 = System.nanoTime(); Expr expr = parser.parseExpr(parser.prepareExpr(func)); //       String xArr = "["; String yArr = "["; long time1 = System.nanoTime(); for (int i=0; i<=points; i++) { if (i>0) { xArr += ", "; yArr += ", "; } Double x = x0 + ((x1-x0)/points)*i; parser.setVar(num, x); //    Double y = expr.evaluate(); //   xArr += x.toString(); yArr += y.toString(); } long time2 = System.nanoTime(); Integer parse_time = (int)((time1-time0)/1e6); Integer calc_time = (int)((time2-time1)/1e6); Integer total_time = (int)((time2-time0)/1e6); System.out.println("Parse time: "+parse_time.toString() +"; Calc time: "+calc_time.toString()); xArr += "]"; yArr += "]"; result += "\"ok\", \"time\" : \""+total_time.toString() +"\", \"x\" : \""+xArr+"\", \"y\" : \""+yArr+"\"}"; } catch (BadVarException e) { result += "\"error\", \"err\" : \"badvar\"}"; } catch (Exception e) { result += "\"error\", \"err\" : \"wrong\"}"; } finally { out.print(result); } } 

js-code to build graphics:

 window.getResult = function(func,variable,begin,end){ $('#draw').prop('disabled',true); $('#info').text(' ...'); $.post('/functions/calc', {func: func, variable: variable, begin: begin, end: end}, function(data){ window.result = $.parseJSON(data); if (result.result == 'error') { if (result.err == 'wrong') $('#info').text('  '); if (result.err == 'badvar') $('#info').text('  '); $('#draw').prop('disabled',false); return; } window.xArr = $.parseJSON(result.x); result.y = result.y .split('-Infinity').join('null') .split('Infinity').join('null') .split('NaN').join('null'); window.yArr = $.parseJSON(result.y); window.data = []; for (i=0; i<xArr.length; i++) { y = window.yArr[i]; window.data[i] = [window.xArr[i],window.yArr[i]]; } window.drawFunc(); var millis = result.time%1000; var sec = (result.time-millis)/1000; $('#info').text('  '+sec+'.'+millis+' '); $('#draw').prop('disabled',false); }); }; window.drawFunc = function() { var data_arr = []; data_arr[0] = {data:window.data, color:'#f00'}; $.plot($('#graph'),data_arr); }; 

The result can be seen here (simple functions) and here (parametric).

Note: it works rather slowly, as the server is spinning on the Raspberry Pi.