Graphs implementation using Dygraphs

Dygraphs is a fast, flexible open source JavaScript charting library.
Dygraphs allows user to easy covert a text data into a graph or chart. It allows users to explore and interpret dense data sets.


Features

  • Handles huge data sets: dygraphs plots millions of points without getting bogged down.

  • Interactive out of the box: zoom, pan and mouseover are on by default.

  • Strong support for error bars / confidence intervals.

  • Highly customizable: using options and custom callbacks, you can make dygraphs do almost anything.

  • dygraphs is highly compatible: it works in all major browsers (including IE8). You can even pinch to zoom on mobile/tablet devices!

  • There's an active community developing and supporting dygraphs.


Implemention of dygraphs

To use dygraphs, include the dygraph-combined.js  JavaScript file and instantiate a Dygraph object.

Here's a basic example to get things started:

   <html>
        <head>
        <script type="text/javascript"src="dygraph-combined.js"></script>
        </head>
        <body>
            <div id="graphdiv"></div>
            <script type="text/javascript">
                g = new Dygraph(
                // containing div
                document.getElementById("graphdiv"),

                // CSV or path to a CSV file.
                "Date,Temperature\n" +
                "2008-05-07,75\n" +
                "2008-05-08,70\n" +
                "2008-05-09,80\n"  );
            </script>
        </body>
    </html>

Output

There are several options availabe to the user to modify the look and feel of the graph. You can find more examples here: http://dygraphs.com/gallery/

Reference:

http://dygraphs.com

Categories: HTML JavaScript

Copyright © 2016 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.