Interactive visualizations of time series using JavaScript and the HTML canvas tag

Overview

Build Status Coverage Status

dygraphs JavaScript charting library

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

Learn more about it at dygraphs.com.

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

Features

Minimal Example

<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" href="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
  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 cdnjs or from NPM (see below).

Usage with a module loader

Get dygraphs from NPM:

npm install dygraphs

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, clone the repo and run:

npm install
npm run build

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.

Comments
  • How to NOT synchronize the Y axis ?

    How to NOT synchronize the Y axis ?

    Sorry to post here, but i couldn't find a better place... Github is really puzzling me !

    Is there a way to NOT synchonize the Y axis ? I have very different Y axis scales and synchonizing makes the out of range curves disappear.

    Thanks,

    opened by tk5ep 30
  • UTC datetime ticks and labels (fix issue 498)

    UTC datetime ticks and labels (fix issue 498)

    Add the feature of placing and displaying time labels according to UTC instead of local time. Provide a new option labelsDateUTC, and adapt the label and value date formatters, and the date tick computation accordingly:

    • The option labelsDateUTC is coherent whith other options like labelsKMG.
    • The date tick computation is simpler and homogeneous, and always places the ticks at nice instants.
    • When using local time, ticks are properly generated on DST transitions (with some minor differences with regard to the original implementation).

    This is a better implementation of some ideas in pull request #291, where only the labels are formatted according to UTC. In this version, the ticks are also placed according to UTC at nice calendar positions.

    opened by joanpau 28
  • Add multi-axis support for more than two axes.

    Add multi-axis support for more than two axes.

    I have implemented multi-axis support which allows any number of independent axes to be defined. Only one axis can be shown at a time though, so it is by default coloured to that of the associated data series.

    When the "showAxis" option is used, specifying a data series, separate independent axes are generated for each. This allows separate value ranges to be set for each data series as well as allowing some axes to be be defined with an integer y axis.

    Please see tests/multi-y-axis.html for examples of it's use.

    • Add "showAxis" option to display an independant Y axis.
    • Add "colourShownAxis" option to colour a shownAxis the same as it's data series.
    • add "integerYAxis" to only display integer y-axis labels.
    opened by nealie 24
  • Datahandler and Unified Data Format

    Datahandler and Unified Data Format

    Hey Dan and Robert,

    this is the pull request for my proposal: https://docs.google.com/document/d/1IWmX4oDbQbVtUoRNzSRG3yMpoBQ7LseVCQhGnuOZz_A/edit?pli=1#

    Lint runs without any issues and so do all of the tests. (Including additional ones I added)

    As you can see I have done some performance tweaks and this solution is now is faster than the current version in every aspect. This implementation may still be extended and changed here and there but it is fully functional and introduces the new structure which fixes some bugs and is a great benefit for future feature development, at least in my point of view. I would really appreciate if we could think about pulling it in the near future as an internal change and only add external options later when you have the feeling that everything is the way it should be.

    The problem for me in the moment is that I have to merge every changes you do on the master and this is quite a bit of work. I think my proposal is in the right stadium to be integrated and further developed on your code base.

    What do you think?

    Best Regards

    David

    opened by davideberlein 23
  • per-axis grid options

    per-axis grid options

    Added new Features:

    • The gridline options may now be set on a per-axis basis.
    • Now both y and y2 can have separate gridlines.
    • Added new gridline option "gridLinePattern" working the same as the strokePattern for the series.
    • Added option description for the already present option "independentTicks"
    • Added examples and tests to verify the new functionality.
    opened by davideberlein 22
  • Fix for Issue 137 - y-axis zoom being lost

    Fix for Issue 137 - y-axis zoom being lost

    This path fixes Issue 137 where once a graph it zoomed on the y-axis and the data updated, the zoom is lost.

    It also has a fix for the zooCallback where the wrong y-axis data was being passed.

    I have also added some flags: zoomed, zoomedX and zoomedY that simply show if a graph has been zoomed. I was previously able to detect a x-zoom programmatically but have found no way to do this for the y-zoom, so I added these flags which makes my code nice and simple.

    opened by nealie 21
  • added includeInScaling option to exclude series from y-axis scaling

    added includeInScaling option to exclude series from y-axis scaling

    I visualize central heating data which combines the on/off state of the heater with a temperature sensor. for the visualization of the on/off data I've written my own plotter, but because the source data is 0 or 1, while the temperature is around 20, the binary data should be excluded from ranging the y-axis

    opened by mberntsen 20
  • Start down path of new build system:

    Start down path of new build system:

    • Move tests to karma test runner and mocha framework, also adding chai assertions
    • Add gulp tasks for testing, watching, concatting and compressing
    • Update travis file to use new build system
    • Remove jstestDriver stuff
    • Reorganize a bit so that it's easier to see what's going on
    • Create a dist folder to hold the output of builds (should probably look at having a bower branch/repository where these are held, instead of master)

    I'm pretty sure we don't want to push this to master, but that's where this was diffed against.

    opened by cthrax 19
  • Allow zooms to go 200px past the edge.

    Allow zooms to go 200px past the edge.

    This requires registering mousemove/mouseup on document, rather than the canvas. This is a bit scary! But the tests pass, and this is generally pretty well-tested code.

    This gives a 200px buffer on any side of the chart.

    Here's a demo.

    Fixes #323.

    opened by danvk 19
  • RangeSelector slowing things down quite badly

    RangeSelector slowing things down quite badly

    From [email protected] on April 30, 2013 20:46:43

    Hi there,

    I'm using this wonderful library for plotting a fairly large amount of data (100,000 data points).

    Dygraphs itself handles it very well, and it's all pretty fast and snappy --- until I enable the RangeSelector, which pretty much gets things grinding to a halt.

    I know this is a very broad complaint -- you're welcome to say: well, then, fix it! -- but there seems to be a large discrepancy in terms of performance. Is this a know issue?

    Thanks and best wishes,

    Florian

    Original issue: http://code.google.com/p/dygraphs/issues/detail?id=468

    imported 6–10 stars bug Performance Range Selector 
    opened by danvk 19
  • Refactoring to fix stacked graphs with NaNs.

    Refactoring to fix stacked graphs with NaNs.

    For stacked graphs, draw gaps for just the specific parts of series that are missing data, and use interpolation to help ensure that the overall graph shape doesn't get distorted for missing points.

    This replaces https://github.com/danvk/dygraphs/pull/139 "Fix NaN handling for stacked graphs" which had aggressively propagated NaNs to ensure that graphs don't get drawn with incorrect stacking.

    Fixes issue 446 - Improve handling of NaNs in stacked graphs.

    Detailed changes:

    • Remove layouts_.datasets, instead create point object arrays directly from gatherDatasets_(). This was necessary since the pre-stacked datasets aren't able to store the additional data needed for handling gaps.
    • For stacked graphs, track yval_stacked/y_stacked separately from yval as point properties.
    • Remove unstackPointAtIndex which is now no longer necessary, since the points keep the original yval. This helps ensure that the returned values keep their original NaN value and don't expose the interpolated stacked values used for drawing gaps.
    • Remove evaluateWithError, evaluateLineCharts and Dygraph.seriesToPoints_ now handle error bars directly.
    • In gatherDatasets_, remove the unconditional copy of rolledSeries, the refactoring appears to have fixed the bug related to zooming with error bars on. (I could reproduce it in the original code by zooming dygraphs/tests/custom-bars.html.) For date windows (horizontal zoom), use .splice() instead of manually coping.
    opened by klausw 15
  • Idea: do not bake dygraphs into the tests

    Idea: do not bake dygraphs into the tests

    What needs to be changed to make tests.js not contain dygraphs itself? (Other than adding the extra <script…></script> tag to also load dygraphs.js to the two HTML files.)

    This separation would allow nice things, like running the tests against the minified version as well.

    opened by mirabilos 0
  • Changing `interactionModel` through `updateOptions` does not work

    Changing `interactionModel` through `updateOptions` does not work

    What was expected: g.updateOptions({ interactionModel: ... }) changes g's interaction model. What happened: Interaction model stays unchanged.

    A comment in dygraph-interaction-model.js:625-633 suggests that using g.updateOptions() to change the current interactionModel is possible:

    /**
     * Default interation model for dygraphs. You can refer to specific elements of
     * this when constructing your own interaction model, e.g.:
     * g.updateOptions( {
     *   interactionModel: {
     *     mousedown: DygraphInteraction.defaultInteractionModel.mousedown
     *   }
     * } );
     */
    

    However, dygraphs.js' structure does not allow for the dynamic change of interaction model, as it is set up in createDragInterface_(), which is only ever called once, in __init__(), and not when options are updated.

    Furthermore, createDragInterface_() calls into addAndTrackEvent(), and there is no way of removing a previously added event callback aside from removing them all with removeTrackedEvents_(); thus calling createDragInterface_() again is unsuitable. That said the event it adds are wrapped (to bind this), so could be extended to act as proxies to the current, uncached interaction model.

    opened by ElementW 0
  • Improper data source detection

    Improper data source detection

    Dygraphs automatically detects if a CSV is the data source by means of checking the file name for a line break. If a line break isn't present, then it decides it's a CSV and looks for the file on the system.

    Instead of having this automatic detection, it would make more sense to specify the data source.

    This would make it possible to use JavaScript strings containing CSV data as a data source. Currently these variables are treated as files rather than strings and are searched for on the system. (returning 404)

    opened by kbidata 1
  • drawAxis have no clue

    drawAxis have no clue

    I ask for the solvation of my problem to always show y2 axis.

    Here is the article at stackoverflow without a result.

    https://stackoverflow.com/questions/71143168/dygraph-y2-axis-was-never-shown

    If I need different data series filled with data sets to show the right axis, then drawAxis is obsolete at the moment. But this shrink the functionality of dygraph to generate the same view to more than one dygraph in a site.

    Next issue is related to the actual situation. If the y2 axis isn't shown, the dygraph automatically fill the space and disrespect the formerly set width of the canvas. The space of the second axis is not subtracted from the single axis dygraph.

    These two problems in once steel me two weeks. Please fix it.

    opened by vlxhzb 0
  • Reset `axisLabelFormatter` to default

    Reset `axisLabelFormatter` to default

    Hi. I saw there is an axisLabelFormatter option here to format the tick values that appear along an axis. It works just fine, however, I am wondering if there is a way to reset that option (go back to use the default formatter of Dygraphs) once I set it previously. I tried to set axisLabelFormatter to undefined or null but got this error in the console.

    Uncaught TypeError: Cannot read properties of undefined (reading 'call')
        at getDateAxis (vendor.js:419283)
        at dateTicker (vendor.js:418918)
        at Dygraph.push.10681.Dygraph.addXTicks_ (vendor.js:422821)
        at Dygraph.push.10681.Dygraph.drawGraph_ (vendor.js:423184)
        at Dygraph.push.10681.Dygraph.predraw_ (vendor.js:422901)
        at Dygraph.push.10681.Dygraph.resize (vendor.js:424139)
        at resizeHandler_ (vendor.js:421653)
        at ZoneDelegate.invokeTask (polyfills.js:668)
        at Zone.runTask (polyfills.js:356)
        at ZoneTask.invokeTask [as invoke] (polyfills.js:820)
    

    Any suggestion? Thank you.

    opened by btilongnguyen 0
  • Y range reset on synchronize

    Y range reset on synchronize

    https://dygraphs.com/tests/synchronize.html When deselecting the checkbox to unsync the Y axis; the graphs all reset when a new zoom is made. The Y-axis also zooms out on every selection in another graph. I would expect the Y-axis to stay the same when another graph is zoomed but the graphs just reset and redraw.

    Shouldn't the behavoir be: when a graph is zoomed in the y-direction and another graph is zoomed in the x-direction, only the x-direction is updated in all of the sync graphs and leave the y-zoom alone?

    opened by davidporter 0
Releases(v2.1.2)
  • v2.1.2(Dec 15, 2022)

    Intermediate release to test the current development state and the releasing process, also starting packaging for the Debian operating system. The full changes will be listed with the 2.2.0 release.

    As it is “in beta state”, this release was pushed to NPM with the next tag, not the latest tag, so you’ll have to pass that or the explicit version number to install.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Dec 8, 2017)

    New features

    • Double click event can be captured and cancelled by plugins (#840)
    • setAnnotations's second parameter is now an optional boolean (#851)
    • Add pixelRatio option, which may allow improved performance on smaller screens by controlling the canvas' pixel ratio (#877)
    • X-axis label and tick logic can now operate at millisecond-level granularity (#893)

    Bug fixes

    • Repair a bug in "Custom interaction modals" demo (#825)

    Internal refactors/fixes

    • Fix various spelling mistakes (#844)
    • Fix a couple of type signatures in dygraph-externs.js (#859)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jan 11, 2017)

    Breaking changes

    • JS files were renamed to dygraph.js and dygraph.min.js.
    • There's now a dygraph.css file that you must include.
    • Dropped support for OldIE and other non-standard browsers. dygraphs works in IE11. I'm not sure about IE9 and IE10.
    • Double-click to unzoom zooms all the way out (and ignores valueRange).
    • Dropped old-style per-axis/per-series options.

    New features

    • Add a legendFormatter option #683
    • this is the Dygraph object in all callbacks
    • pass through (row, col) to valueFormatter
    • Option to not sync range in extras/synchronizer.js
    • Additional options for styling the range selector
    • getRowForX method
    • setVisibility can set the visibility of multiple series at once.
    • crosshair plugin extra
    • rebase/straw broom plugin (#590)
    • highlightSeriesBackgroundColor option
    • yAxisExtremes() method.
    • Passing strings in native format now throws. (Previously it kinda sorta worked.)

    Bug fixes

    • Selections are always cleared with animations
    • synchronizer calls previously-set callbacks
    • synchronizer only syncs when graphs are ready
    • Reset on synchronized graphs failed #524
    • fix to improve synchronizer performance #658
    • binary search bug fix in synchronizer
    • Fix range selection when chart is located inside fullscreen element #576
    • fillAlpha can be set per-series when fillGraph is set.
    • xRangePad was ignored on unzoom #657
    • Allow selected points where canvas-y coordinate is 0 (#692)
    • Using valueRange with Logscale and yRangePad has unexpected results #661
    • With "drawGapEdgePoints", unwanted point often drawn at beginning of chart #745

    Other user-visible changes

    • “legend: follow” positioning changes

    Internal refactors

    • Code moved into a “src/“ directory
    • Tests use Mocha instead of jstd
    • dygraphs is split into ES6 modules and uses some ES6 features (e.g. arrows and destructuring).
    • dygraphs is built using babel & browserify
    • Code coverage is tracked continuously
    • Bundle size is now tracked continuously
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Dec 3, 2014)

    • dygraphs is now "retina" compatible.
    • Dramatically improved performance for filled charts (i.e. fillGraph)
    • More sensible date ticks: "Jan 08"→"Jan 2008", "29Jan"→"29 Jan"
    • Using a non-existent option now throws (w/ dygraph-combined-dev.js)
    • x-axis log scales
    • The labelsUTC option forces UTC formatting for all labels.
    • The new DataHandler system allows for more flexibility in data loading.
    • this is set to the dygraph in all callbacks.
    • dygraphs has shrunk, because we moved some stuff into "extras" (133kb→122kb)

    This will be the last major release to support browsers without a native implementation. See blog post for more details.

    Source code(tar.gz)
    Source code(zip)
Owner
Dan Vanderkam
Software Developer @sidewalklabs, Author of _Effective TypeScript_.
Dan Vanderkam
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
A platform for creating interactive data visualizations

owid-grapher This is the project we use at Our World in Data to create embeddable visualizations like this one (click for interactive): ⚠️ This projec

Our World in Data 1.1k Jan 4, 2023
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
A javascript library that extends D3.js to enable fast and beautiful visualizations.

d3plus D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations. Installi

D3plus 1.6k Dec 2, 2022
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
Pretty time-series line graphs

Morris.js - pretty time-series line graphs Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It's a very simple API for dr

null 7k Dec 24, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Repo for various Tesla internal data visualizations

teslarender Repo for various Tesla internal data visualizations $ http-server -g -c0 -p8899 Access at: http://localhost:8899/?http://fn.lc/s/depthre

Tristan Rice 29 Dec 15, 2022
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Utkarsh Verma 78 Dec 24, 2022
JavaScript toolkit for creating interactive real-time graphs

Rickshaw Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock Table of Contents Getting Started Ins

Shutterstock 6.5k Dec 28, 2022
JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A

null 18 Nov 12, 2022