Javascript Frequency Analyzer Using Chart Library

Question

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

I am currently trying to use the library of Google graphics that create SVG images. The chart should be updated approximately 10 times per second, and performance is not satisfactory. It takes the entire processor resource.

I am a little new to web development (especially in the graphic and technical aspects), so if you could point out the right direction for my research, I would appreciate it.

Answer 1

I ended up using the CanvasJs library, which seems to be one of the fastest. There is an option interactivityEnabled: false to disable interaction with the chart, which increases productivity.

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

Answer 2

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

I am on the ZingChart team! Let me know if you have any 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> 

Answer 3

Use the canvas element. You should be able to get 60 per second, and if it is a sound source, the Audio API provides a DSP for spectral analysis.

Here is an example of a spectrum visualizer