javascript - Canvas.js slows down -


the problem:

the problem encountering each "jquery event" click, canvas.js diagram slows down proporsjonal click? believe $(document).ready(function(){ responsible. 10 clicks slows down applciation 10 times. keep in mind have 5 canvas.js diagrams (tables). canvas.js

table1.js (the same code structure goes other diagrams, table2,table3 etc).

(function table1(){   $(document).ready(function(){              var dps = []; // data          var chart = new canvasjs.chart("table1",         {            title:{             text: "exhaust temperature"             data: [           {                     type: "spline",             name: "temp cylinder 1",             showinlegend: "true",             legendtext: "temp cylinder 1",             datapoints: dps1           }         });          var xval = 0;          var updateinterval = 50;          var datalength = 50;       var updatechart = function (count) {             count = count || 1;             // count number of times loop runs generate random datapoints.             (var j = 0; j < count; j++) {                     dps.push({                     x: xval,                     y: exts[1]                        });                 xval++;             };              if (dps.length > datalength )             {                 dps.shift();                          }             chart.render();             };         // generates first set of datapoints         updatechart(datalength);          // update chart after specified time.          setinterval(function(){updatechart()}, updateinterval);   });   }()); 

this jquery event responsible showing , hiding diagrams, keep in mind user can view 1 diagram @ time.

    $('[data-row]').on('click', function() {          var row = $(this).attr('data-row');          $('.active').removeclass('active');          $('#table' + row).addclass('active');            if (row == 1){             $.getscript("table1.js", function(){});              table1();          } else if (row == 2) {             $.getscript("table2.js", function(){});              table2();          } else if (row == 3) {             $.getscript("table3.js", function(){});              table3();            }      });  


Comments