JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Dygraphs

    Github

    Interactive visualizations of time series using JavaScript and the HTML canvas tag. The dygraphs JavaScript library produces interactive, zoomable charts of time series.
    Filed under 

    • 🔾64%Overall
    • ★3,142
    • ⏳4.6 days
    • 🕩607
    • 👥2

    dygraphs JavaScript charting library

    The dygraphs JavaScript library produces interactive, zoomable charts of time series:

    sample graph

    Learn more about it at dygraphs.com.

    Get help with dygraphs on Stack Overflow (preferred) and Google Groups.

    Features

    Minimal Example

    <html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" type="text/css" href="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
  Dygraph.onDOMready(function onDOMready() {  // or jQuery $() etc.
    g = new Dygraph(
        document.getElementById("graphdiv"),  // containing div
        "Date,Temperature\n" +                // the data series
        "2008-05-07,75\n" +
        "2008-05-08,70\n" +
        "2008-05-09,80\n",
        { }                                   // the options
      );
  });
//--><!]]></script>
</body>
</html>

    Learn more by reading the tutorial and seeing demonstrations of what dygraphs can do in the gallery. You can get dygraph.js and dygraph.css from UNPKG, cdnjs or from NPM (see below).

    Usage with a module loader

    Get dygraphs from NPM:

    npm install dygraphs

    Do not install from the git repository! Always use a tarball install, which contains the prebuilt files; npm fails to build the source code on install from github. (The tarball from the GitHub Registry is fine.)

    You'll find pre-built JS & CSS files in node_modules/dygraphs/dist/. If you're using a module bundler like browserify or webpack, you can import dygraphs:

    import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');

const g = new Dygraph('graphdiv', data, { /* options */ });

    Check out the dygraphs-es6 repo for a fully-worked example.

    Development

    To get going, install the following Debian packages…

    • jq
    • mksh
    • pax
    • python3

    … clone the repo and run:

    npm install
npm run build-jsonly

    Then open tests/demo.html in your browser.

    Read more about the dygraphs development process in the developer guide.

    License(s)

    dygraphs is available under the MIT license, included in LICENSE.txt.

    Show All