dygraphs

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> .KEYW {color: #933;} .COMM {color: #bbb; font-style: italic;} .NUMB {color: #393;} .STRN {color: #393;} .REGX {color: #339;} .line {border-right: 1px dotted #666; color: #666; font-style: normal;} </style></head><body><pre> 1 /** 2 * @license 3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com) 4 * MIT-licenced: https://opensource.org/licenses/MIT 5 */ 6 7 /** 8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or 9 * string. Dygraph can handle multiple series with or without high/low bands. 10 * The date/value ranges will be automatically set. Dygraph uses the 11 * <canvas> tag, so it only works in FF1.5+. 12 * See the source or https://dygraphs.com/ for more information. 13 * @author danvdk@gmail.com (Dan Vanderkam) 14 */ 15 16 /* 17 Usage: 18 <div id="graphdiv" style="width:800px; height:500px;"></div> 19 <script type="text/javascript"><![CDATA[//><!]]></script> 26 27 The CSV file is of the form 28 29 Date,SeriesA,SeriesB,SeriesC 30 YYYY-MM-DD,A1,B1,C1 31 YYYY-MM-DD,A2,B2,C2 32 33 If the 'errorBars' option is set in the constructor, the input should be of 34 the form 35 Date,SeriesA,SeriesB,... 36 YYYY-MM-DD,A1,sigmaA1,B1,sigmaB1,... 37 YYYY-MM-DD,A2,sigmaA2,B2,sigmaB2,... 38 39 If the 'fractions' option is set, the input should be of the form: 40 41 Date,SeriesA,SeriesB,... 42 YYYY-MM-DD,A1/B1,A2/B2,... 43 YYYY-MM-DD,A1/B1,A2/B2,... 44 45 And high/low bands will be calculated automatically using a binomial distribution. 46 47 For further documentation and examples, see http://dygraphs.com/ 48 */ 49 50 import DygraphLayout from './dygraph-layout'; 51 import DygraphCanvasRenderer from './dygraph-canvas'; 52 import DygraphOptions from './dygraph-options'; 53 import DygraphInteraction from './dygraph-interaction-model'; 54 import * as DygraphTickers from './dygraph-tickers'; 55 import * as utils from './dygraph-utils'; 56 import DEFAULT_ATTRS from './dygraph-default-attrs'; 57 import OPTIONS_REFERENCE from './dygraph-options-reference'; 58 import IFrameTarp from './iframe-tarp'; 59 60 import DefaultHandler from './datahandler/default'; 61 import ErrorBarsHandler from './datahandler/bars-error'; 62 import CustomBarsHandler from './datahandler/bars-custom'; 63 import DefaultFractionHandler from './datahandler/default-fractions'; 64 import FractionsBarsHandler from './datahandler/bars-fractions'; 65 import BarsHandler from './datahandler/bars'; 66 67 import AnnotationsPlugin from './plugins/annotations'; 68 import AxesPlugin from './plugins/axes'; 69 import ChartLabelsPlugin from './plugins/chart-labels'; 70 import GridPlugin from './plugins/grid'; 71 import LegendPlugin from './plugins/legend'; 72 import RangeSelectorPlugin from './plugins/range-selector'; 73 74 import GVizChart from './dygraph-gviz'; 75 76 "use strict"; 77 78 /** 79 * @class Creates an interactive, zoomable chart. 80 * @name Dygraph 81 * 82 * @constructor 83 * @param {div | String} div A div or the id of a div into which to construct 84 * the chart. Must not have any padding. 85 * @param {String | Function} file A file containing CSV data or a function 86 * that returns this data. The most basic expected format for each line is 87 * "YYYY/MM/DD,val1,val2,...". For more information, see 88 * http://dygraphs.com/data.html. 89 * @param {Object} attrs Various other attributes, e.g. errorBars determines 90 * whether the input data contains error ranges. For a complete list of 91 * options, see http://dygraphs.com/options.html. 92 */ 93 var Dygraph = function Dygraph(div, data, opts) { 94 this.__init__(div, data, opts); 95 }; 96 97 Dygraph.NAME = "Dygraph"; 98 Dygraph.VERSION = "2.2.1"; 99 100 // internal autoloader workaround 101 var _addrequire = {}; 102 Dygraph._require = function require(what) { 103 return (what in _addrequire ? _addrequire[what] : Dygraph._require._b(what)); 104 }; 105 Dygraph._require._b = null; // set by xfrmmodmap-dy.js 106 Dygraph._require.add = function add(what, towhat) { 107 _addrequire[what] = towhat; 108 }; 109 110 // Various default values 111 Dygraph.DEFAULT_ROLL_PERIOD = 1; 112 Dygraph.DEFAULT_WIDTH = 480; 113 Dygraph.DEFAULT_HEIGHT = 320; 114 115 // For max 60 Hz. animation: 116 Dygraph.ANIMATION_STEPS = 12; 117 Dygraph.ANIMATION_DURATION = 200; 118 119 /** 120 * Standard plotters. These may be used by clients. 121 * Available plotters are: 122 * - Dygraph.Plotters.linePlotter: draws central lines (most common) 123 * - Dygraph.Plotters.errorPlotter: draws high/low bands 124 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph) 125 * 126 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter]. 127 * This causes all the lines to be drawn over all the fills/bands. 128 */ 129 Dygraph.Plotters = DygraphCanvasRenderer._Plotters; 130 131 // Used for initializing annotation CSS rules only once. 132 Dygraph.addedAnnotationCSS = false; 133 134 /** 135 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit 136 * and context <canvas> inside of it. See the constructor for details. 137 * on the parameters. 138 * @param {Element} div the Element to render the graph into. 139 * @param {string | Function} file Source data 140 * @param {Object} attrs Miscellaneous other options 141 * @private 142 */ 143 Dygraph.prototype.__init__ = function(div, file, attrs) { 144 this.is_initial_draw_ = true; 145 this.readyFns_ = []; 146 147 // Support two-argument constructor 148 if (attrs === null || attrs === undefined) { attrs = {}; } 149 150 attrs = Dygraph.copyUserAttrs_(attrs); 151 152 if (typeof(div) == 'string') { 153 div = document.getElementById(div); 154 } 155 156 if (!div) { 157 throw new Error('Constructing dygraph with a non-existent div!'); 158 } 159 160 // Copy the important bits into the object 161 // TODO(danvk): most of these should just stay in the attrs_ dictionary. 162 this.maindiv_ = div; 163 this.file_ = file; 164 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD; 165 this.previousVerticalX_ = -1; 166 this.fractions_ = attrs.fractions || false; 167 this.dateWindow_ = attrs.dateWindow || null; 168 169 this.annotations_ = []; 170 171 // Clear the div. This ensure that, if multiple dygraphs are passed the same 172 // div, then only one will be drawn. 173 div.innerHTML = ""; 174 175 const resolved = window.getComputedStyle(div, null); 176 if (resolved.paddingLeft !== "0px" || 177 resolved.paddingRight !== "0px" || 178 resolved.paddingTop !== "0px" || 179 resolved.paddingBottom !== "0px") 180 console.error('Main div contains padding; graph will misbehave'); 181 182 // For historical reasons, the 'width' and 'height' options trump all CSS 183 // rules _except_ for an explicit 'width' or 'height' on the div. 184 // As an added convenience, if the div has zero height (like <div></div> does 185 // without any styles), then we use a default height/width. 186 if (div.style.width === '' && attrs.width) { 187 div.style.width = attrs.width + "px"; 188 } 189 if (div.style.height === '' && attrs.height) { 190 div.style.height = attrs.height + "px"; 191 } 192 if (div.style.height === '' && div.clientHeight === 0) { 193 div.style.height = Dygraph.DEFAULT_HEIGHT + "px"; 194 if (div.style.width === '') { 195 div.style.width = Dygraph.DEFAULT_WIDTH + "px"; 196 } 197 } 198 // These will be zero if the dygraph's div is hidden. In that case, 199 // use the user-specified attributes if present. If not, use zero 200 // and assume the user will call resize to fix things later. 201 this.width_ = div.clientWidth || attrs.width || 0; 202 this.height_ = div.clientHeight || attrs.height || 0; 203 204 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_. 205 if (attrs.stackedGraph) { 206 attrs.fillGraph = true; 207 // TODO(nikhilk): Add any other stackedGraph checks here. 208 } 209 210 // DEPRECATION WARNING: All option processing should be moved from 211 // attrs_ and user_attrs_ to options_, which holds all this information. 212 // 213 // Dygraphs has many options, some of which interact with one another. 214 // To keep track of everything, we maintain two sets of options: 215 // 216 // this.user_attrs_ only options explicitly set by the user. 217 // this.attrs_ defaults, options derived from user_attrs_, data. 218 // 219 // Options are then accessed this.attr_('attr'), which first looks at 220 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent 221 // defaults without overriding behavior that the user specifically asks for. 222 this.user_attrs_ = {}; 223 utils.update(this.user_attrs_, attrs); 224 225 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified. 226 this.attrs_ = {}; 227 utils.updateDeep(this.attrs_, DEFAULT_ATTRS); 228 229 this.boundaryIds_ = []; 230 this.setIndexByName_ = {}; 231 this.datasetIndex_ = []; 232 233 this.registeredEvents_ = []; 234 this.eventListeners_ = {}; 235 236 this.attributes_ = new DygraphOptions(this); 237 238 // Create the containing DIV and other interactive elements 239 this.createInterface_(); 240 241 // Activate plugins. 242 this.plugins_ = []; 243 var plugins = Dygraph.PLUGINS.concat(this.getOption('plugins')); 244 for (var i = 0; i < plugins.length; i++) { 245 // the plugins option may contain either plugin classes or instances. 246 // Plugin instances contain an activate method. 247 var Plugin = plugins[i]; // either a constructor or an instance. 248 var pluginInstance; 249 if (typeof(Plugin.activate) !== 'undefined') { 250 pluginInstance = Plugin; 251 } else { 252 pluginInstance = new Plugin(); 253 } 254 255 var pluginDict = { 256 plugin: pluginInstance, 257 events: {}, 258 options: {}, 259 pluginOptions: {} 260 }; 261 262 var handlers = pluginInstance.activate(this); 263 for (var eventName in handlers)<span class="WHIT