Need for JS app that displays waveform graphs

[philhagen]

I would like know a way to build an app or site that displays waveform graphs based on data from electrical grids. I imagine there are some JS libraries good for constructing an app or site that does this. I also would like to know if ReactJS would be good for such a venture? Any suggestions are welcome. Thank You

[Archibald]

Is the data a set of voltage samples taken at a specific sample rate? If not, please describe the form of the data.

[philhagen]

Hi thanks for the reply. The meter communicates the data parameters in real time by DNP 3.0/MOSBUS Protocols.

[Archibald]

Am I correct in thinking that the meter is an electrical power meter and that you wish to plot a graph showing the variation in power consumption over a given period of time? From your first post I thought you wanted to plot the 50Hz or 60Hz sinusiodal voltage waveform (which seemed rather pointless).

Do you have a series of meter readings in a JavaScript array?

[philhagen]

Hi, and thanks for the interest and help. I can take it from what you ask that we will need to have data in JSON or and array from the meter. I will see what options the meter has for sending he data in that format. When that data is available in that format what is the next thing to do with it?

[Archibald]

It does not matter what format the data is in but you will probably need to use JavaScript to derive the points to be plotted on your graph.

You have a choice of using <svg> or <canvas> element for your graph. There are many articles available comparing them. To plot a graph I would choose to use an <svg> element, partly for scalability.

Here is a very basic demonstation of using JavaScript to plot a graph within an <svg> element . . . .

[m_hutley]

As long as the data is in a well-described and either complete, or sparse-with-detectable-gap format, you can get it into whatever form is necessary for the output - in Archibald’s case, he’s using the data directly as coordinates in his SVG line (That’s what a path element inside an SVG does - defines a path by a series of movements of a cursor/pen).

There will need to be some mezzanine translation of the data to drawing instruction no matter what form the data comes in with, and no matter what form the output is to take; but Javascript can do that easily enough if we know what format is coming in/going out.