Getting started with dygraphs

Remarks#

This section provides an overview of what dygraphs is, and why a developer might want to use it.

It should also mention any large subjects within dygraphs, and link out to the related topics. Since the Documentation for dygraphs is new, you may need to create initial versions of those related topics.

Installation or Setup

Create a file called hello.html with the following content:

<!doctype html>
<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css">
</head>
<body>
    <div id="chart-div"></div>
    <script type="text/javascript">
        g = new Dygraph(
            document.getElementById('chart-div'),
            [
              [0, 0, 0],
              [1, 1, 1],
              [2, 2, 4],
              [3, 3, 9]
            ], {
              labels: ['X', 'Apples', 'Oranges']
            });
    </script>
</body>
</html>

This loads the dygraphs JavaScript and CSS from a CDN.

The bit in the <script> tag creates the chart. It specifies a data set with two series: “Apples” and “Oranges”, as well as the x-axis.

For more, see the dygraphs tutorial