API tools faq
paste
mramine364

drawing curves

mramine364
Feb 14th, 2016
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.27 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <link rel="stylesheet" href="css/index.css"/>
  5.     <title>Draw Function's Curve</title>
  6.     <script src="js/jquery.min.js"></script>
  7.     <script src="js/Chart.min.js"></script>
  8. </head>
  9. <style>
  10.     .input{
  11.         margin: 0 auto;
  12.         text-align: center;
  13.         padding: 0;
  14.         display: table;
  15.     }
  16.     .input>li{
  17.         display: table-cell;
  18.         padding: 0 10px;
  19.         position: relative;
  20.     }
  21.     .input > li:first-child  #fx{
  22.         min-width: 150px;
  23.     }
  24.     .input>li input[type="text"]{
  25.         width: 50px;
  26.         height: 25px;
  27.     }
  28.     .output{
  29.        
  30.     }
  31.     .output canvas#res{
  32.         margin: 15px auto;
  33.         display: block;
  34.     }
  35. </style>
  36. <body>
  37.    
  38. <div class="nav-main">
  39.     <div class="logo">
  40.         <a href="index.php">
  41.             Apps
  42.         </a>
  43.     </div>
  44.     <ul>
  45.         <li>
  46.             <a href="#" class="nav-item">
  47.                 Calcultor &#10095;</a>
  48.             <div class="nav-content">
  49.                 <div class="nav-sub">
  50.                     <ul>
  51.                         <li>
  52.                             <a href="calc.php">
  53.                                 Simple Calculator
  54.                             </a>
  55.                         </li>
  56.                         <li>
  57.                             <a href="calc_smart.php">
  58.                                 Smart Calculator
  59.                             </a>
  60.                         </li>
  61.                     </ul>
  62.                 </div>
  63.             </div>
  64.         </li>
  65.         <li>
  66.             <a href="#" class="nav-item">
  67.                 Algorithms &#10095;</a>
  68.             <div class="nav-content">
  69.                 <div class="nav-sub">
  70.                     <ul>
  71.                         <li>
  72.                             <a href="gcdex.php">
  73.                                 GCD Extended
  74.                             </a>
  75.                         </li>
  76.                     </ul>
  77.                 </div>
  78.             </div>
  79.         </li>
  80.         <li>
  81.             <a href="#" class="nav-item">
  82.                 Converters &#10095;</a>
  83.             <div class="nav-content">
  84.                 <div class="nav-sub">
  85.                     <ul>
  86.                         <li>
  87.                             <a href="base_converter.php">
  88.                                 Base Converter
  89.                             </a>
  90.                         </li>
  91.                         <li>
  92.                             <a href="angle_converter.php">
  93.                                 Angle Converter
  94.                             </a>
  95.                         </li>
  96.                     </ul>
  97.                 </div>
  98.             </div>
  99.         </li>
  100.         <li>
  101.             <a href="#" class="nav-item">
  102.                 Solvers &#10095;</a>
  103.             <div class="nav-content">
  104.                 <div class="nav-sub">
  105.                     <ul>
  106.                         <li>
  107.                             <a href="pell_equation.php">
  108.                                 Pell's Equation
  109.                             </a>
  110.                         </li>
  111.                         <li>
  112.                             <a href="modular_equation_1.php">
  113.                                 1st Degree Modular Equation
  114.                             </a>
  115.                         </li>
  116.                         <li>
  117.                             <a href="2nd_deg_eq.php">
  118.                                 Second Degree Equation
  119.                             </a>
  120.                         </li>
  121.                     </ul>
  122.                 </div>
  123.             </div>
  124.         </li>
  125.         <li>
  126.             <a href="#" class="nav-item">
  127.                 Cryptography &#10095;</a>
  128.             <div class="nav-content">
  129.                 <div class="nav-sub">
  130.                     <ul>
  131.                         <li>
  132.                             <a href="rsa_encryption.php">
  133.                                 RSA Encryption
  134.                             </a>
  135.                         </li>
  136.                         <li>
  137.                             <a href="base64_enc.php">
  138.                                 Base64 Encryption
  139.                             </a>
  140.                         </li>
  141.                     </ul>
  142.                 </div>
  143.             </div>
  144.         </li>
  145.     </ul>
  146. </div>
  147. <script src="js/dd.js"></script>    <div class="container">
  148.         <ul class="input">
  149.             <li>
  150.                 <div>
  151.                     <label for="fx">f(x)=</label>
  152.                     <input type="text" id="fx" value="exp(x)">
  153.                 </div>
  154.             </li>
  155.             <li>
  156.                 <div>
  157.                     <label for="min">[</label>
  158.                     <input type="text" id="min" value="-5" placeholder="xmin">
  159.                 </div>
  160.             </li>
  161.             <li>
  162.                 <div>
  163.                     <label for="max">, </label>
  164.                     <input type="text" id="max" value="5" placeholder="xmax">
  165.                     ]
  166.                 </div>
  167.             </li>
  168.             <li>
  169.                 <div>
  170.                     <input type="text" id="step" value="0.5" placeholder="step">
  171.                 </div>
  172.             </li>
  173.             <li>
  174.                 <div>
  175.                     <input type="button" id="draw" value="Draw">
  176.                 </div>
  177.             </li>
  178.         </ul>
  179.         <div class="output" id="canvas-parent">
  180.             <canvas id="res" width="540" height="400">
  181.                
  182.             </canvas>
  183.         </div>
  184.         <script>
  185.             function xs(min, max, step){
  186.                 var r = [], k=min;
  187.                 while( k <= max ){
  188.                     r.push(k);
  189.                     k += step;
  190.                 }
  191.                 return r;
  192.             }
  193.  
  194.             function ys(fx, xs){
  195.                 var r = [], k=0;
  196.                 while( k < xs.length ){
  197.                     r.push( sub(fx, xs[k]) );
  198.                     k++;
  199.                 }
  200.                 return r;
  201.             }
  202.  
  203.             function sub(fx, x){
  204.                 console.log(eval(fx));
  205.                 return eval(fx);
  206.             }
  207.  
  208.             function ftojf(fx) {
  209.                 var r= fx.replace(/cos/g,"Math.cos")
  210.                         .replace(/sin/g,"Math.sin")
  211.                         .replace(/tan/g,"Math.tan")
  212.                         .replace(/ln/g,"Math.log")
  213.                         .replace(/log/g,"Math.log10")
  214.                         .replace(/exp/g,"Math.exp")
  215.                         .replace(/sqrt/g,"Math.sqrt")
  216.                         .replace(/abs/g,"Math.abs")
  217.                         .replace(/pow/g,"Math.pow");
  218.                 console.log(r);
  219.                 return r;
  220.             }
  221.  
  222.  
  223.             var fx = $('#fx');
  224.             var draw = $('#draw');
  225.             var mi = $('#min');
  226.             var ma = $('#max');
  227.             var ste = $('#step');
  228.             var canv_p = $("#canvas-parent");
  229.             var ctx, data, myLineChart;
  230.  
  231.             draw.click(function(){
  232.                
  233.                 var vi= parseFloat(mi.val()), va=parseFloat(ma.val()),
  234.                     vte= parseFloat(ste.val()), lfx=ftojf(fx.val());
  235.                 if( check(vi, va, vte) ){
  236.                    
  237.                     canv_p.empty();
  238.                     canv_p.append("<canvas id='res' width='540' height='400'></canvas>");
  239.  
  240.                     var labels = xs(vi, va, vte);
  241.                     var datas = ys(lfx, labels);
  242.  
  243.                     ctx = document.getElementById("res").getContext("2d");
  244.                     data = {
  245.                         labels: labels,
  246.                             datasets: [
  247.                             {
  248.                                 label: "My First Curve",
  249.                                 fillColor: "transparent",
  250.                                 strokeColor: "rgba(220,0,0,1)",
  251.                                 pointColor: "transparent",
  252.                                 pointStrokeColor: "transparent",
  253.                                 pointHighlightFill: "#00f",
  254.                                 pointHighlightStroke: "transparent",
  255.                                 data: datas
  256.                             }
  257.                         ]
  258.                     };
  259.                     myLineChart = new Chart(ctx).Line(data);
  260.                 }
  261.             });        
  262.  
  263.             var isnbr = function(n){
  264.                 var str = n;
  265.                 var patt = /^-?(\d+|\d+\.\d+|\.\d+|\d+\.)$/g;
  266.                 var res = patt.test(str);
  267.                 return res;
  268.             }
  269.             var check = function (a, b, c) {
  270.                 if( a=="" || b=="" || c=="" ){
  271.                     return false;
  272.                 }
  273.                 else if( !isnbr(a) || !isnbr(b) || !isnbr(c) ){
  274.                     return false;
  275.                 }
  276.                 return true;
  277.             }
  278.         </script>
  279.     </div>
  280. </body>
  281. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!