Javascript frequency analyzer using chart library

Question

I'm currently trying to make a frequency analyzer using web technologies, especially Meteor.

For now, I tried to use the Google Charts library that create SVG pictures. The chart needs to be refreshed about 10 times by second and the performance aren't satisfying. It takes all the CPU resource.

I'm a bit new to web development (especially in graphical and performances issues) so if you could point into the right direction to make my research, I'd appreciate it.

Answer 1

I ended up using the library CanvasJs which appears to be one of the fastest. There is an option interactivityEnabled: false to disable interactions with the chart which increase performance.

Even if there is yet no direct Meteor integration, just put the js file in the ./client/compatibility and it works fine.

Answer 2

You could very easily accomplish this with ZingChart. We don't have a Meteor integration (yet), but the demo below should be a good start for you. Run the snippet below to see it live.

I'm on the ZingChart team! Let me know if you have questions.

var MAXVALUES = 100;
var myConfig = {
 type: "line", 
 series : [
   {
     values : []
   }
 ]
};

zingchart.render({ 
  id : 'myChart', 
  data : myConfig, 
  height: 400, 
  width: 600 
});


var myValues = [];

setInterval(function(){
  myValues.push( Math.floor(Math.random() * 10 ) );
  
  if(myValues.length == MAXVALUES+1){
    myValues.shift();
  }
  console.log(myValues)
  zingchart.exec('myChart', 'setseriesvalues', {
    values : [myValues]
  })
},60)

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>