Copyright (c) 2006-, Dan Vanderkam.
http://code.google.com/p/dygraphs/
-The dygraphs JavaScript library produces produces interactive, zoomable charts of time series based on CSV files.
+The dygraphs JavaScript library produces produces interactive, zoomable charts of time series.
Features
- Plots time series without using an external server or Flash
- Interactive zoom
- Adjustable averaging period
- Customizable click-through actions
+- Compatible with the Google Visualization API
Caveats
- Requires Firefox 1.5+ or Safari/WebKit? 1.3+.
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
-<div id="graphdiv" style="width:400px; height:300px;"></div>
+<div id="graphdiv"></div>
<script type="text/javascript">
g = new DateGraph(
document.getElementById("graphdiv"), // containing div
- function() { // function or path to CSV file.
- return "20080507,75\n" +
- "20080508,70\n" +
- "20080509,80\n";
- },
- [ "Temperature" ], // names of data series
- {} // additional options (see wiki)
+ "Date,Temperature\n" + // the data series
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n";
+ }
);
</script>
</body>
<a href="http://code.google.com/p/dygraphs/">code.google.com/p/dygraphs</a></p>
</center>
-<p>The dygraphs JavaScript library produces produces interactive, zoomable charts of time series based on CSV files.</p>
+<p>The dygraphs JavaScript library produces produces interactive, zoomable charts of time series.</p>
<h3>Features</h3>
<ul>
<li>Interactive zoom</li>
<li>Adjustable averaging period</li>
<li>Customizable click-through actions</li>
+ <li>Compatible with the Google Visualization API</li>
</ul>
<h3>Caveats</h3>
<h2>Usage</h2>
-<p>The
DateGraph library depends on two other JS libraries: <a href="http://www.mochikit.com/">MochiKit</a> and <a href="http://www.liquidx.net/plotkit/">PlotKit</a>. Rather than tracking down copies of these libraries, I recommend using a packed version of dygraphs that combines all three libraries into a single JS file. Either grab this file from dygraph project's <a href="http://code.google.com/p/dygraphs/downloads/list">downloads</a> page or create it yourself by <a href="http://code.google.com/p/dygraphs/source/checkout">checking out</a> a copy of the code and running:
+<p>The
dygraphs library depends on two other JS libraries: <a href="http://www.mochikit.com/">MochiKit</a> and <a href="http://www.liquidx.net/plotkit/">PlotKit</a>. Rather than tracking down copies of these libraries, I recommend using a packed version of dygraphs that combines all three libraries into a single JS file. Either grab this file from dygraph project's <a href="http://code.google.com/p/dygraphs/downloads/list">downloads</a> page or create it yourself by <a href="http://code.google.com/p/dygraphs/source/checkout">checking out</a> a copy of the code and running:
<pre>./generate-combined.sh</pre>
<script type="text/javascript" src="combined.js"></script>
</head>
<body>
-<div id="graphdiv" style="width:400px; height:300px;"></div>
+<div id="graphdiv"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("graphdiv"), // containing div
- function() { // function or path to CSV file.
- return "20080507,75\n" +
- "20080508,70\n" +
- "20080509,80\n";
- },
- [ "Temperature" ], // names of data series
- {} // additional options (see below)
+ "Date,Temperature\n" + // CSV or path to a CSV file.
+ "20080507,75\n" +
+ "20080508,70\n" +
+ "20080509,80\n",
);
</script>
</body>
</html>
</pre>
</td><td valign=top>
- <div id="graphdiv" style="width:400px; height:300px;"></div>
+ <div id="graphdiv"></div>
<script type="text/javascript">
- g = new DateGraph(
- document.getElementById("graphdiv"),
- function() { // function or path to CSV file.
- return "20080507,75\n" +
- "20080508,70\n" +
- "20080509,80\n";
- },
- [ "Temperature" ], // names of data series
- {} // additional options
- );
+ g = new Dygraph(
+ document.getElementById("graphdiv"), // containing div
+ "Date,Temperature\n" + // CSV or path to a CSV file.
+ "20080507,75\n" +
+ "20080508,70\n" +
+ "20080509,80\n"
+ );
</script>
</td></tr></table>
-<p>In order to keep this example self-contained, the second parameter is a function that returns CSV data. These lines <i>must</i> begin with a date in the form <i>YYYYMMDD</i>. In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor is a string, it will be interpreted as the path to a CSV file. The D
ateGraph will perform an XMLHttpRequest to retrieve this file and display the data when it becomes available. Make sure your CSV file is readable and serving from a place that understands XMLHttpRequest's! In particular, you cannot specify a CSV file using <code>"file:///"</code>. Here's an example: (data from <a href="http://www.wunderground.com/history/airport/KNUQ/2007/1/1/CustomHistory.html?dayend=31&monthend=12&yearend=2007&req_city=NA&req_state=NA&req_statename=NA">Weather Underground</a>)</p>
+<p>In order to keep this example self-contained, the second parameter is a function that returns CSV data. These lines <i>must</i> begin with a date in the form <i>YYYYMMDD</i>. In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor is a string, it will be interpreted as the path to a CSV file. The D
ygraph will perform an XMLHttpRequest to retrieve this file and display the data when it becomes available. Make sure your CSV file is readable and serving from a place that understands XMLHttpRequest's! In particular, you cannot specify a CSV file using <code>"file:///"</code>. Here's an example: (data from <a href="http://www.wunderground.com/history/airport/KNUQ/2007/1/1/CustomHistory.html?dayend=31&monthend=12&yearend=2007&req_city=NA&req_state=NA&req_statename=NA">Weather Underground</a>)</p>
<table>
<tr><th>HTML</th>
<body>
<div id="graphdiv" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("graphdiv"),
"temperatures.csv", // path to CSV file
- null, // labels in top line of CSV file
- {}
+ {} // additional options
);
</script>
</body>
</td><td valign=top>
<div id="graphdiv2" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g2 = new DateGraph(
+ g2 = new Dygraph(
document.getElementById("graphdiv2"),
- "temperatures.csv", null, {}
+ "temperatures.csv", {}
);
</script>
</td></tr></table>
<p>Click <a href="temperatures.csv">here</a> to view the <code>temperatures.csv</code> file. There are a few things to note here:</p>
<ul>
- <li>Because the third parameter to the DateGraph constructor was <code>null</code>, the labels were taken from the first line of the data instead. The first line of <code>temperatures.csv</code> is <code>Date,High,Low</code>.</li>
- <li>DateGraph automatically chose two different, easily-distinguishable colors for the two data series.</li>
+ <li>The Dygraph sent off an XHR to get the temperatures.csv file.</li>
+ <li>The labels were taken from the first line of <code>temperatures.csv</code>, which is <code>Date,High,Low</code>.</li>
+ <li>The Dygraph automatically chose two different, easily-distinguishable colors for the two data series.</li>
<li>The labels on the x-axis have switched from days to months. If you zoom in, they'll switch to weeks and then days.</li>
- <li>Some heuristics are used to determine a good vertical range for the data. The idea is to make all the data visible and have human-friendly values on the axis (i.e. 200 instead of 193.4). Generally this works well, but in this case the vertical range is way too large.</li>
+ <li>Some heuristics are used to determine a good vertical range for the data. The idea is to make all the data visible and have human-friendly values on the axis (i.e. 200 instead of 193.4). Generally this works well.</li>
<li>The data is very spiky. A moving average would be easier to interpret.</li>
</ul>
-<p>These last two problems can be fixed by specifying the appropriate options in the fourth parameter to the DateGraph constructor. To set the number of days for a moving average, use the <b>rollPeriod</b> option. To set the range of the y-axis, use the <b>valueRange</b> option. Here's how it's done:</p>
+<p>This problem can be fixed by specifying the appropriate options in the "additional options" parameter to the Dygraph constructor. To set the number of days for a moving average, use the <b>rollPeriod</b> option. Here's how it's done:</p>
<table>
<tr><th>HTML</th>
<body>
<div id="graphdiv" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("graphdiv"),
- "temperatures.csv", null,
+ "temperatures.csv",
{ rollPeriod: 7,
showRoller: true,
- valueRange: [25, 100]
}
);
</script>
</td><td valign=top>
<div id="graphdiv3" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g3 = new DateGraph(
+ g3 = new Dygraph(
document.getElementById("graphdiv3"),
- "temperatures.csv", null,
+ "temperatures.csv",
{ rollPeriod: 7,
showRoller: true,
- valueRange: [25, 100]
}
);
</script>
<p>A rolling average can be set using the text box in the lower left-hand corner of the graph (the showRoller attribute is what makes this appear).</p>
<h2>Error Bars</h2>
-<p>Another significant feature of the dygraphs library is the ability to display error bars around data series. One standard deviation must be specified for each data point. A +/-<i>n</i> sigma band will be drawn around the data series at that point. If a moving average is being displayed, DateGraph will compute the standard deviation of the average at each point. (i.e. <i>σ</i> = sqrt((<i>σ_1</i>^2 + <i>σ_2</i>^2 + ... + <i>σ_n</i>^2)/<i>n</i>))</p>
+<p>Another significant feature of the dygraphs library is the ability to display error bars around data series. One standard deviation must be specified for each data point. A +/-<i>n</i> sigma band will be drawn around the data series at that point. If a moving average is being displayed, dygraphs will compute the standard deviation of the average at each point. (i.e. <i>σ</i> = sqrt((<i>σ_1</i>^2 + <i>σ_2</i>^2 + ... + <i>σ_n</i>^2)/<i>n</i>))</p>
<p>Here's a demonstration. There are two data series. One is <code>N(100,10)</code> with a standard deviation of 10 specified at each point. The other is <code>N(80,20)</code> with a standard deviation of 20 specified at each point. The CSV file was generated using Octave and can be viewed <a href="twonormals.csv">here</a>.</p>
></div>
<script type="text/javascript">
$ = document.getElementById;
-g = new DateGraph(
+g = new Dygraph(
$("graphdiv"),
"twonormals.csv",
- null,
{ rollPeriod: 7,
showRoller: true,
errorBars: true,
<div id="graphdiv4" style="width:800px; height:400px;"></div>
<script type="text/javascript">
$ = document.getElementById;
-new DateGraph(
+new Dygraph(
document.getElementById("graphdiv4"),
"twonormals.csv",
- null,
{ rollPeriod: 14,
showRoller: true,
errorBars: true,
<div id=dow_chart style="width:1000px; height:400px;"></div>
<script type="text/javascript">
// From http://www.econstats.com/eqty/eq_d_mi_3.csv
- dow = new DateGraph(
+ dow = new Dygraph(
document.getElementById('dow_chart'),
"dow.txt",
- null,
{
showRoller: true,
customBars: true,
<h2>Other Options</h2>
-<p>These are the options that can be passed in through the fourth parameter of the DateGraph constructor.</p>
+<p>These are the options that can be passed in through the optional third parameter of the Dygraph constructor.</p>
<table class=thinborder width=1000>
<tr><th>Name</th><th>Sample Value</th><th>Description</th></tr>
</tr>
</table>
-<p>Any options you specify also get passed on to PlotKit's <a href="http://media.liquidx.net/js/plotkit-doc/PlotKit.Renderer.html">Renderer</a> class. DateGraph will override some of these (e.g. strokeColor), but others may be useful. The <code>padding</code> property is an example of this.</p>
+<p>Any options you specify also get passed on to PlotKit's <a href="http://media.liquidx.net/js/plotkit-doc/PlotKit.Renderer.html">Renderer</a> class. dygraphs will override some of these (e.g. strokeColor), but others may be useful. The <code>padding</code> property is an example of this.</p>
<h2>Common Gotchas</h2>
<p>Here are a few problems that I've frequently run into while using the
href="http://www.getfirebug.com/">Firebug</a>.</li>
<li>Make sure your CSV files are in the correct format. They must be of the
- form <code>YYYYMMDD,series1,series2,...</code>. If you're specifying the
- names of each data series in the CSV file itself, make sure that you pass
- <code>null</code> as the third parameter to the DateGraph constructor to let
- the library know that. And if you set the <code>errorBars</code> property,
- make sure you alternate data series and standard deviations.</li>
+ form <code>YYYYMMDD,series1,series2,...</code>. And if you set the
+ <code>errorBars</code> property, make sure you alternate data series and
+ standard deviations.</li>
<li>dygraphs are not happy when placed inside a <code><center></code>
tag. This applies to the CSS <code>text-align</code> property as well. If you
- want to center a DateGraph, put it inside a table with "align=center"
+ want to center a Dygraph, put it inside a table with "align=center"
set.</li>
- <li>If you specify the <code>colors</code> property or name the data series
- using the third parameter of the DateGraph constructor, make sure the number
- of data series agree in all places: <code>colors</code>, third parameter and
- in each line of the CSV file itself.</li>
-
<li>Don't set the <code>dateWindow</code> property to a date. It expects
milliseconds since epoch, which can be obtained from a JavaScript Date
object's valueOf method.</li>
/**
* @fileoverview Subclasses various parts of PlotKit to meet the additional
- * needs of DateGraph: grid overlays and error bars
+ * needs of Dygraph: grid overlays and error bars
*/
// Subclass PlotKit.Layout to add:
// 2. Copy error terms for PlotKit.CanvasRenderer._renderLineChart
/**
- * Creates a new DateGraphLayout object. Options are the same as those allowed
+ * Creates a new DygraphLayout object. Options are the same as those allowed
* by the PlotKit.Layout constructor.
* @param {Object} options Options for PlotKit.Layout
- * @return {Object} The DateGraphLayout object
+ * @return {Object} The DygraphLayout object
*/
-DateGraphLayout = function(options) {
+DygraphLayout = function(options) {
PlotKit.Layout.call(this, "line", options);
};
-DateGraphLayout.prototype = new PlotKit.Layout();
+DygraphLayout.prototype = new PlotKit.Layout();
/**
* Behaves the same way as PlotKit.Layout, but also copies the errors
* @private
*/
-DateGraphLayout.prototype.evaluateWithError = function() {
+DygraphLayout.prototype.evaluateWithError = function() {
this.evaluate();
if (!this.options.errorBars) return;
/**
* Convenience function to remove all the data sets from a graph
*/
-DateGraphLayout.prototype.removeAllDatasets = function() {
+DygraphLayout.prototype.removeAllDatasets = function() {
delete this.datasets;
this.datasets = new Array();
};
* Change the values of various layout options
* @param {Object} new_options an associative array of new properties
*/
-DateGraphLayout.prototype.updateOptions = function(new_options) {
+DygraphLayout.prototype.updateOptions = function(new_options) {
MochiKit.Base.update(this.options, new_options ? new_options : {});
};
/**
* Sets some PlotKit.CanvasRenderer options
* @param {Object} element The canvas to attach to
- * @param {Layout} layout The DateGraphLayout object for this graph.
+ * @param {Layout} layout The DygraphLayout object for this graph.
* @param {Object} options Options to pass on to CanvasRenderer
*/
-DateGraphCanvasRenderer = function(element, layout, options) {
+DygraphCanvasRenderer = function(element, layout, options) {
PlotKit.CanvasRenderer.call(this, element, layout, options);
this.options.shouldFill = false;
this.options.shouldStroke = true;
// TODO(danvk) This shouldn't be necessary: effects should be overlaid
this.options.drawBackground = false;
};
-DateGraphCanvasRenderer.prototype = new PlotKit.CanvasRenderer();
+DygraphCanvasRenderer.prototype = new PlotKit.CanvasRenderer();
/**
* Draw an X/Y grid on top of the existing plot
*/
-DateGraphCanvasRenderer.prototype.render = function() {
+DygraphCanvasRenderer.prototype.render = function() {
// Draw the new X/Y grid
var ctx = this.element.getContext("2d");
if (this.options.drawYGrid) {
/**
* Overrides the CanvasRenderer method to draw error bars
*/
-DateGraphCanvasRenderer.prototype._renderLineChart = function() {
+DygraphCanvasRenderer.prototype._renderLineChart = function() {
var context = this.element.getContext("2d");
var colorCount = this.options.colorScheme.length;
var colorScheme = this.options.colorScheme;
return rval;
}};
}});
-MochiKit.Iter.EXPORT_OK=["iteratorRegistry","arrayLikeIter","hasIterateNext","iterateNextIter",];
+MochiKit.Iter.EXPORT_OK=["iteratorRegistry","arrayLikeIter","hasIterateNext","iterateNextIter"];
MochiKit.Iter.EXPORT=["StopIteration","registerIteratorFactory","iter","count","cycle","repeat","next","izip","ifilter","ifilterfalse","islice","imap","applymap","chain","takewhile","dropwhile","tee","list","reduce","range","sum","exhaust","forEach","every","sorted","reversed","some","iextend","groupby","groupby_as_array"];
MochiKit.Iter.__new__=function(){
var m=MochiKit.Base;
Date.ext={};Date.ext.util={};Date.ext.util.xPad=function(x,pad,r){if(typeof (r)=="undefined"){r=10}for(;parseInt(x,10)<r&&r>1;r/=10){x=pad.toString()+x}return x.toString()};Date.prototype.locale="en-GB";if(document.getElementsByTagName("html")&&document.getElementsByTagName("html")[0].lang){Date.prototype.locale=document.getElementsByTagName("html")[0].lang}Date.ext.locales={};Date.ext.locales.en={a:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],A:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],b:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],B:["January","February","March","April","May","June","July","August","September","October","November","December"],c:"%a %d %b %Y %T %Z",p:["AM","PM"],P:["am","pm"],x:"%d/%m/%y",X:"%T"};Date.ext.locales["en-US"]=Date.ext.locales.en;Date.ext.locales["en-US"].c="%a %d %b %Y %r %Z";Date.ext.locales["en-US"].x="%D";Date.ext.locales["en-US"].X="%r";Date.ext.locales["en-GB"]=Date.ext.locales.en;Date.ext.locales["en-AU"]=Date.ext.locales["en-GB"];Date.ext.formats={a:function(d){return Date.ext.locales[d.locale].a[d.getDay()]},A:function(d){return Date.ext.locales[d.locale].A[d.getDay()]},b:function(d){return Date.ext.locales[d.locale].b[d.getMonth()]},B:function(d){return Date.ext.locales[d.locale].B[d.getMonth()]},c:"toLocaleString",C:function(d){return Date.ext.util.xPad(parseInt(d.getFullYear()/100,10),0)},d:["getDate","0"],e:["getDate"," "],g:function(d){return Date.ext.util.xPad(parseInt(Date.ext.util.G(d)/100,10),0)},G:function(d){var y=d.getFullYear();var V=parseInt(Date.ext.formats.V(d),10);var W=parseInt(Date.ext.formats.W(d),10);if(W>V){y++}else{if(W===0&&V>=52){y--}}return y},H:["getHours","0"],I:function(d){var I=d.getHours()%12;return Date.ext.util.xPad(I===0?12:I,0)},j:function(d){var ms=d-new Date(""+d.getFullYear()+"/1/1 GMT");ms+=d.getTimezoneOffset()*60000;var doy=parseInt(ms/60000/60/24,10)+1;return Date.ext.util.xPad(doy,0,100)},m:function(d){return Date.ext.util.xPad(d.getMonth()+1,0)},M:["getMinutes","0"],p:function(d){return Date.ext.locales[d.locale].p[d.getHours()>=12?1:0]},P:function(d){return Date.ext.locales[d.locale].P[d.getHours()>=12?1:0]},S:["getSeconds","0"],u:function(d){var dow=d.getDay();return dow===0?7:dow},U:function(d){var doy=parseInt(Date.ext.formats.j(d),10);var rdow=6-d.getDay();var woy=parseInt((doy+rdow)/7,10);return Date.ext.util.xPad(woy,0)},V:function(d){var woy=parseInt(Date.ext.formats.W(d),10);var dow1_1=(new Date(""+d.getFullYear()+"/1/1")).getDay();var idow=woy+(dow1_1>4||dow1_1<=1?0:1);if(idow==53&&(new Date(""+d.getFullYear()+"/12/31")).getDay()<4){idow=1}else{if(idow===0){idow=Date.ext.formats.V(new Date(""+(d.getFullYear()-1)+"/12/31"))}}return Date.ext.util.xPad(idow,0)},w:"getDay",W:function(d){var doy=parseInt(Date.ext.formats.j(d),10);var rdow=7-Date.ext.formats.u(d);var woy=parseInt((doy+rdow)/7,10);return Date.ext.util.xPad(woy,0,10)},y:function(d){return Date.ext.util.xPad(d.getFullYear()%100,0)},Y:"getFullYear",z:function(d){var o=d.getTimezoneOffset();var H=Date.ext.util.xPad(parseInt(Math.abs(o/60),10),0);var M=Date.ext.util.xPad(o%60,0);return(o>0?"-":"+")+H+M},Z:function(d){return d.toString().replace(/^.*\(([^)]+)\)$/,"$1")},"%":function(d){return"%"}};Date.ext.aggregates={c:"locale",D:"%m/%d/%y",h:"%b",n:"\n",r:"%I:%M:%S %p",R:"%H:%M",t:"\t",T:"%H:%M:%S",x:"locale",X:"locale"};Date.ext.aggregates.z=Date.ext.formats.z(new Date());Date.ext.aggregates.Z=Date.ext.formats.Z(new Date());Date.ext.unsupported={};Date.prototype.strftime=function(fmt){if(!(this.locale in Date.ext.locales)){if(this.locale.replace(/-[a-zA-Z]+$/,"") in Date.ext.locales){this.locale=this.locale.replace(/-[a-zA-Z]+$/,"")}else{this.locale="en-GB"}}var d=this;while(fmt.match(/%[cDhnrRtTxXzZ]/)){fmt=fmt.replace(/%([cDhnrRtTxXzZ])/g,function(m0,m1){var f=Date.ext.aggregates[m1];return(f=="locale"?Date.ext.locales[d.locale][m1]:f)})}var str=fmt.replace(/%([aAbBCdegGHIjmMpPSuUVwWyY%])/g,function(m0,m1){var f=Date.ext.formats[m1];if(typeof (f)=="string"){return d[f]()}else{if(typeof (f)=="function"){return f.call(d,d)}else{if(typeof (f)=="object"&&typeof (f[0])=="string"){return Date.ext.util.xPad(d[f[0]](),f[1])}else{return m1}}}});d=null;return str};
-DateGraphLayout=function(_1){
+DygraphLayout=function(_1){
PlotKit.Layout.call(this,"line",_1);
};
-DateGraphLayout.prototype=new PlotKit.Layout();
-DateGraphLayout.prototype.evaluateWithError=function(){
+DygraphLayout.prototype=new PlotKit.Layout();
+DygraphLayout.prototype.evaluateWithError=function(){
this.evaluate();
if(!this.options.errorBars){
return;
}
}
};
-DateGraphLayout.prototype.removeAllDatasets=function(){
+DygraphLayout.prototype.removeAllDatasets=function(){
delete this.datasets;
this.datasets=new Array();
};
-DateGraphLayout.prototype.updateOptions=function(_9){
+DygraphLayout.prototype.updateOptions=function(_9){
MochiKit.Base.update(this.options,_9?_9:{});
};
-DateGraphCanvasRenderer=function(_10,_11,_12){
+DygraphCanvasRenderer=function(_10,_11,_12){
PlotKit.CanvasRenderer.call(this,_10,_11,_12);
this.options.shouldFill=false;
this.options.shouldStroke=true;
MochiKit.Base.update(this.options,_12);
this.options.drawBackground=false;
};
-DateGraphCanvasRenderer.prototype=new PlotKit.CanvasRenderer();
-DateGraphCanvasRenderer.prototype.render=function(){
+DygraphCanvasRenderer.prototype=new PlotKit.CanvasRenderer();
+DygraphCanvasRenderer.prototype.render=function(){
var ctx=this.element.getContext("2d");
if(this.options.drawYGrid){
var _14=this.layout.yticks;
this._renderLineChart();
this._renderLineAxis();
};
-DateGraphCanvasRenderer.prototype._renderLineChart=function(){
+DygraphCanvasRenderer.prototype._renderLineChart=function(){
var _17=this.element.getContext("2d");
var _18=this.options.colorScheme.length;
var _19=this.options.colorScheme;
_23(_27,this)(_17);
_17.restore();
};
-DateGraph=function(div,_49,_50,_51){
+Dygraph=function(div,_49,_50){
if(arguments.length>0){
-this.__init__(div,_49,_50,_51);
+if(arguments.length==4){
+this.warn("Using deprecated four-argument dygraph constructor");
+this.__old_init__(div,_49,arguments[2],arguments[3]);
+}else{
+this.__init__(div,_49,_50);
+}
}
};
-DateGraph.NAME="DateGraph";
-DateGraph.VERSION="1.1";
-DateGraph.__repr__=function(){
+Dygraph.NAME="Dygraph";
+Dygraph.VERSION="1.2";
+Dygraph.__repr__=function(){
return "["+this.NAME+" "+this.VERSION+"]";
};
-DateGraph.toString=function(){
+Dygraph.toString=function(){
return this.__repr__();
};
-DateGraph.DEFAULT_ROLL_PERIOD=1;
-DateGraph.DEFAULT_WIDTH=480;
-DateGraph.DEFAULT_HEIGHT=320;
-DateGraph.DEFAULT_STROKE_WIDTH=1;
-DateGraph.AXIS_LINE_WIDTH=0.3;
-DateGraph.DEFAULT_ATTRS={highlightCircleSize:3,pixelsPerXLabel:60,pixelsPerYLabel:30,labelsDivWidth:250,labelsDivStyles:{}};
-DateGraph.prototype.__init__=function(div,_52,_53,_54){
+Dygraph.DEFAULT_ROLL_PERIOD=1;
+Dygraph.DEFAULT_WIDTH=480;
+Dygraph.DEFAULT_HEIGHT=320;
+Dygraph.AXIS_LINE_WIDTH=0.3;
+Dygraph.DEFAULT_ATTRS={highlightCircleSize:3,pixelsPerXLabel:60,pixelsPerYLabel:30,labelsDivWidth:250,labelsDivStyles:{},labelsSeparateLines:false,labelsKMB:false,strokeWidth:1,showRoller:false,xValueFormatter:Dygraph.dateString_,xValueParser:Dygraph.dateParser,xTicker:Dygraph.dateTicker,sigma:2,errorBars:false,fractions:false,wilsonInterval:true,customBars:false};
+Dygraph.DEBUG=1;
+Dygraph.INFO=2;
+Dygraph.WARNING=3;
+Dygraph.ERROR=3;
+Dygraph.prototype.__old_init__=function(div,_51,_52,_53){
+if(_52!=null){
+var _54=["Date"];
+for(var i=0;i<_52.length;i++){
+_54.push(_52[i]);
+}
+MochiKit.Base.update(_53,{"labels":_54});
+}
+this.__init__(div,_51,_53);
+};
+Dygraph.prototype.__init__=function(div,_55,_56){
+if(_56==null){
+_56={};
+}
this.maindiv_=div;
-this.labels_=_53;
-this.file_=_52;
-this.rollPeriod_=_54.rollPeriod||DateGraph.DEFAULT_ROLL_PERIOD;
+this.file_=_55;
+this.rollPeriod_=_56.rollPeriod||Dygraph.DEFAULT_ROLL_PERIOD;
this.previousVerticalX_=-1;
+this.fractions_=_56.fractions||false;
+this.dateWindow_=_56.dateWindow||null;
+this.valueRange_=_56.valueRange||null;
+this.wilsonInterval_=_56.wilsonInterval||true;
+this.customBars_=_56.customBars||false;
+if(div.style.width==""){
+div.style.width=Dygraph.DEFAULT_WIDTH+"px";
+}
+if(div.style.height==""){
+div.style.height=Dygraph.DEFAULT_HEIGHT+"px";
+}
this.width_=parseInt(div.style.width,10);
this.height_=parseInt(div.style.height,10);
-this.errorBars_=_54.errorBars||false;
-this.fractions_=_54.fractions||false;
-this.strokeWidth_=_54.strokeWidth||DateGraph.DEFAULT_STROKE_WIDTH;
-this.dateWindow_=_54.dateWindow||null;
-this.valueRange_=_54.valueRange||null;
-this.labelsSeparateLines=_54.labelsSeparateLines||false;
-this.labelsDiv_=_54.labelsDiv||null;
-this.labelsKMB_=_54.labelsKMB||false;
-this.xValueParser_=_54.xValueParser||DateGraph.prototype.dateParser;
-this.xValueFormatter_=_54.xValueFormatter||DateGraph.prototype.dateString_;
-this.xTicker_=_54.xTicker||DateGraph.prototype.dateTicker;
-this.sigma_=_54.sigma||2;
-this.wilsonInterval_=_54.wilsonInterval||true;
-this.customBars_=_54.customBars||false;
+this.user_attrs_={};
+MochiKit.Base.update(this.user_attrs_,_56);
this.attrs_={};
-MochiKit.Base.update(this.attrs_,DateGraph.DEFAULT_ATTRS);
-MochiKit.Base.update(this.attrs_,_54);
-if(typeof this.attrs_.pixelsPerXLabel=="undefined"){
-this.attrs_.pixelsPerXLabel=60;
-}
-this.labelsFromCSV_=(this.labels_==null);
-if(this.labels_==null){
-this.labels_=[];
-}
-this.clickCallback_=_54.clickCallback||null;
-this.zoomCallback_=_54.zoomCallback||null;
+MochiKit.Base.update(this.attrs_,Dygraph.DEFAULT_ATTRS);
+this.labelsFromCSV_=(this.attr_("labels")==null);
this.createInterface_();
-this.layoutOptions_={"errorBars":(this.errorBars_||this.customBars_),"xOriginIsZero":false};
-MochiKit.Base.update(this.layoutOptions_,_54);
-this.setColors_(_54);
-this.layout_=new DateGraphLayout(this.layoutOptions_);
-this.renderOptions_={colorScheme:this.colors_,strokeColor:null,strokeWidth:this.strokeWidth_,axisLabelFontSize:14,axisLineWidth:DateGraph.AXIS_LINE_WIDTH};
-MochiKit.Base.update(this.renderOptions_,_54);
-this.plotter_=new DateGraphCanvasRenderer(this.hidden_,this.layout_,this.renderOptions_);
+this.layoutOptions_={"errorBars":(this.attr_("errorBars")||this.customBars_),"xOriginIsZero":false};
+MochiKit.Base.update(this.layoutOptions_,this.attrs_);
+MochiKit.Base.update(this.layoutOptions_,this.user_attrs_);
+this.layout_=new DygraphLayout(this.layoutOptions_);
+this.renderOptions_={colorScheme:this.colors_,strokeColor:null,strokeWidth:this.attr_("strokeWidth"),axisLabelFontSize:14,axisLineWidth:Dygraph.AXIS_LINE_WIDTH};
+MochiKit.Base.update(this.renderOptions_,this.attrs_);
+MochiKit.Base.update(this.renderOptions_,this.user_attrs_);
+this.plotter_=new DygraphCanvasRenderer(this.hidden_,this.layout_,this.renderOptions_);
this.createStatusMessage_();
this.createRollInterface_();
this.createDragInterface_();
this.start_();
};
-DateGraph.prototype.rollPeriod=function(){
+Dygraph.prototype.attr_=function(_57){
+if(typeof (this.user_attrs_[_57])!="undefined"){
+return this.user_attrs_[_57];
+}else{
+if(typeof (this.attrs_[_57])!="undefined"){
+return this.attrs_[_57];
+}else{
+return null;
+}
+}
+};
+Dygraph.prototype.log=function(_58,_59){
+if(typeof (console)!="undefined"){
+switch(_58){
+case Dygraph.DEBUG:
+console.debug("dygraphs: "+_59);
+break;
+case Dygraph.INFO:
+console.info("dygraphs: "+_59);
+break;
+case Dygraph.WARNING:
+console.warn("dygraphs: "+_59);
+break;
+case Dygraph.ERROR:
+console.error("dygraphs: "+_59);
+break;
+}
+}
+};
+Dygraph.prototype.info=function(_60){
+this.log(Dygraph.INFO,_60);
+};
+Dygraph.prototype.warn=function(_61){
+this.log(Dygraph.WARNING,_61);
+};
+Dygraph.prototype.error=function(_62){
+this.log(Dygraph.ERROR,_62);
+};
+Dygraph.prototype.rollPeriod=function(){
return this.rollPeriod_;
};
-DateGraph.prototype.createInterface_=function(){
-var _55=this.maindiv_;
+Dygraph.prototype.createInterface_=function(){
+var _63=this.maindiv_;
this.graphDiv=MochiKit.DOM.DIV({style:{"width":this.width_+"px","height":this.height_+"px"}});
-appendChildNodes(_55,this.graphDiv);
-var _56=MochiKit.DOM.CANVAS;
-this.canvas_=_56({style:{"position":"absolute"},width:this.width_,height:this.height_});
+appendChildNodes(_63,this.graphDiv);
+var _64=MochiKit.DOM.CANVAS;
+this.canvas_=_64({style:{"position":"absolute"},width:this.width_,height:this.height_});
appendChildNodes(this.graphDiv,this.canvas_);
this.hidden_=this.createPlotKitCanvas_(this.canvas_);
connect(this.hidden_,"onmousemove",this,function(e){
this.mouseOut_(e);
});
};
-DateGraph.prototype.createPlotKitCanvas_=function(_58){
+Dygraph.prototype.createPlotKitCanvas_=function(_66){
var h=document.createElement("canvas");
h.style.position="absolute";
-h.style.top=_58.style.top;
-h.style.left=_58.style.left;
+h.style.top=_66.style.top;
+h.style.left=_66.style.left;
h.width=this.width_;
h.height=this.height_;
MochiKit.DOM.appendChildNodes(this.graphDiv,h);
return h;
};
-DateGraph.prototype.setColors_=function(_60){
-var num=this.labels_.length;
+Dygraph.prototype.setColors_=function(){
+var num=this.attr_("labels").length-1;
this.colors_=[];
-if(!_60.colors){
-var sat=_60.colorSaturation||1;
-var val=_60.colorValue||0.5;
+var _69=this.attr_("colors");
+if(!_69){
+var sat=this.attr_("colorSaturation")||1;
+var val=this.attr_("colorValue")||0.5;
for(var i=1;i<=num;i++){
var hue=(1*i/(1+num));
this.colors_.push(MochiKit.Color.Color.fromHSV(hue,sat,val));
}
}else{
for(var i=0;i<num;i++){
-var _65=_60.colors[i%_60.colors.length];
-this.colors_.push(MochiKit.Color.Color.fromString(_65));
-}
+var _73=_69[i%_69.length];
+this.colors_.push(MochiKit.Color.Color.fromString(_73));
}
-};
-DateGraph.prototype.createStatusMessage_=function(){
-if(!this.labelsDiv_){
-var _66=this.attrs_.labelsDivWidth;
-var _67={"style":{"position":"absolute","fontSize":"14px","zIndex":10,"width":_66+"px","top":"0px","left":this.width_-_66+"px","background":"white","textAlign":"left","overflow":"hidden"}};
-MochiKit.Base.update(_67["style"],this.attrs_.labelsDivStyles);
-this.labelsDiv_=MochiKit.DOM.DIV(_67);
-MochiKit.DOM.appendChildNodes(this.graphDiv,this.labelsDiv_);
}
+this.renderOptions_.colorScheme=this.colors_;
+MochiKit.Base.update(this.plotter_.options,this.renderOptions_);
+MochiKit.Base.update(this.layoutOptions_,this.user_attrs_);
+MochiKit.Base.update(this.layoutOptions_,this.attrs_);
};
-DateGraph.prototype.createRollInterface_=function(){
-var _68=this.plotter_.options.padding;
-if(typeof this.attrs_.showRoller=="undefined"){
-this.attrs_.showRoller=false;
-}
-var _69=this.attrs_.showRoller?"block":"none";
-var _70={"type":"text","size":"2","value":this.rollPeriod_,"style":{"position":"absolute","zIndex":10,"top":(this.height_-25-_68.bottom)+"px","left":(_68.left+1)+"px","display":_69}};
-var _71=MochiKit.DOM.INPUT(_70);
+Dygraph.prototype.createStatusMessage_=function(){
+if(!this.attr_("labelsDiv")){
+var _74=this.attr_("labelsDivWidth");
+var _75={"style":{"position":"absolute","fontSize":"14px","zIndex":10,"width":_74+"px","top":"0px","left":this.width_-_74+"px","background":"white","textAlign":"left","overflow":"hidden"}};
+MochiKit.Base.update(_75["style"],this.attr_("labelsDivStyles"));
+var div=MochiKit.DOM.DIV(_75);
+MochiKit.DOM.appendChildNodes(this.graphDiv,div);
+this.attrs_.labelsDiv=div;
+}
+};
+Dygraph.prototype.createRollInterface_=function(){
+var _76=this.plotter_.options.padding;
+var _77=this.attr_("showRoller")?"block":"none";
+var _78={"type":"text","size":"2","value":this.rollPeriod_,"style":{"position":"absolute","zIndex":10,"top":(this.height_-25-_76.bottom)+"px","left":(_76.left+1)+"px","display":_77}};
+var _79=MochiKit.DOM.INPUT(_78);
var pa=this.graphDiv;
-MochiKit.DOM.appendChildNodes(pa,_71);
-connect(_71,"onchange",this,function(){
-this.adjustRoll(_71.value);
+MochiKit.DOM.appendChildNodes(pa,_79);
+connect(_79,"onchange",this,function(){
+this.adjustRoll(_79.value);
});
-return _71;
-};
-DateGraph.prototype.createDragInterface_=function(){
-var _73=this;
-var _74=false;
-var _75=null;
-var _76=null;
-var _77=null;
-var _78=null;
-var _79=null;
+return _79;
+};
+Dygraph.prototype.createDragInterface_=function(){
+var _81=this;
+var _82=false;
+var _83=null;
+var _84=null;
+var _85=null;
+var _86=null;
+var _87=null;
var px=0;
var py=0;
-var _82=function(e){
+var _90=function(e){
return e.mouse().page.x-px;
};
-var _83=function(e){
+var _91=function(e){
return e.mouse().page.y-py;
};
-connect(this.hidden_,"onmousemove",function(_84){
-if(_74){
-_77=_82(_84);
-_78=_83(_84);
-_73.drawZoomRect_(_75,_77,_79);
-_79=_77;
+connect(this.hidden_,"onmousemove",function(_92){
+if(_82){
+_85=_90(_92);
+_86=_91(_92);
+_81.drawZoomRect_(_83,_85,_87);
+_87=_85;
}
});
-connect(this.hidden_,"onmousedown",function(_85){
-_74=true;
-px=PlotKit.Base.findPosX(_73.canvas_);
-py=PlotKit.Base.findPosY(_73.canvas_);
-_75=_82(_85);
-_76=_83(_85);
+connect(this.hidden_,"onmousedown",function(_93){
+_82=true;
+px=PlotKit.Base.findPosX(_81.canvas_);
+py=PlotKit.Base.findPosY(_81.canvas_);
+_83=_90(_93);
+_84=_91(_93);
});
-connect(document,"onmouseup",this,function(_86){
-if(_74){
-_74=false;
-_75=null;
-_76=null;
+connect(document,"onmouseup",this,function(_94){
+if(_82){
+_82=false;
+_83=null;
+_84=null;
}
});
-connect(this.hidden_,"onmouseout",this,function(_87){
-if(_74){
-_77=null;
-_78=null;
+connect(this.hidden_,"onmouseout",this,function(_95){
+if(_82){
+_85=null;
+_86=null;
}
});
-connect(this.hidden_,"onmouseup",this,function(_88){
-if(_74){
-_74=false;
-_77=_82(_88);
-_78=_83(_88);
-var _89=Math.abs(_77-_75);
-var _90=Math.abs(_78-_76);
-if(_89<2&&_90<2&&_73.clickCallback_!=null&&_73.lastx_!=undefined){
-_73.clickCallback_(_88,new Date(_73.lastx_));
+connect(this.hidden_,"onmouseup",this,function(_96){
+if(_82){
+_82=false;
+_85=_90(_96);
+_86=_91(_96);
+var _97=Math.abs(_85-_83);
+var _98=Math.abs(_86-_84);
+if(_97<2&&_98<2&&_81.attr_("clickCallback")!=null&&_81.lastx_!=undefined){
+_81.attr_("clickCallback")(_96,new Date(_81.lastx_));
}
-if(_89>=10){
-_73.doZoom_(Math.min(_75,_77),Math.max(_75,_77));
+if(_97>=10){
+_81.doZoom_(Math.min(_83,_85),Math.max(_83,_85));
}else{
-_73.canvas_.getContext("2d").clearRect(0,0,_73.canvas_.width,_73.canvas_.height);
+_81.canvas_.getContext("2d").clearRect(0,0,_81.canvas_.width,_81.canvas_.height);
}
-_75=null;
-_76=null;
+_83=null;
+_84=null;
}
});
-connect(this.hidden_,"ondblclick",this,function(_91){
-_73.dateWindow_=null;
-_73.drawGraph_(_73.rawData_);
-var _92=_73.rawData_[0][0];
-var _93=_73.rawData_[_73.rawData_.length-1][0];
-if(_73.zoomCallback_){
-_73.zoomCallback_(_92,_93);
+connect(this.hidden_,"ondblclick",this,function(_99){
+_81.dateWindow_=null;
+_81.drawGraph_(_81.rawData_);
+var _100=_81.rawData_[0][0];
+var _101=_81.rawData_[_81.rawData_.length-1][0];
+if(_81.attr_("zoomCallback")){
+_81.attr_("zoomCallback")(_100,_101);
}
});
};
-DateGraph.prototype.drawZoomRect_=function(_94,_95,_96){
+Dygraph.prototype.drawZoomRect_=function(_102,endX,_104){
var ctx=this.canvas_.getContext("2d");
-if(_96){
-ctx.clearRect(Math.min(_94,_96),0,Math.abs(_94-_96),this.height_);
+if(_104){
+ctx.clearRect(Math.min(_102,_104),0,Math.abs(_102-_104),this.height_);
}
-if(_95&&_94){
+if(endX&&_102){
ctx.fillStyle="rgba(128,128,128,0.33)";
-ctx.fillRect(Math.min(_94,_95),0,Math.abs(_95-_94),this.height_);
+ctx.fillRect(Math.min(_102,endX),0,Math.abs(endX-_102),this.height_);
}
};
-DateGraph.prototype.doZoom_=function(_97,_98){
-var _99=this.layout_.points;
-var _100=null;
-var _101=null;
-for(var i=0;i<_99.length;i++){
-var cx=_99[i].canvasx;
-var x=_99[i].xval;
-if(cx<_97&&(_100==null||x>_100)){
-_100=x;
+Dygraph.prototype.doZoom_=function(lowX,_106){
+var _107=this.layout_.points;
+var _108=null;
+var _109=null;
+for(var i=0;i<_107.length;i++){
+var cx=_107[i].canvasx;
+var x=_107[i].xval;
+if(cx<lowX&&(_108==null||x>_108)){
+_108=x;
}
-if(cx>_98&&(_101==null||x<_101)){
-_101=x;
+if(cx>_106&&(_109==null||x<_109)){
+_109=x;
}
}
-if(_100==null){
-_100=_99[0].xval;
+if(_108==null){
+_108=_107[0].xval;
}
-if(_101==null){
-_101=_99[_99.length-1].xval;
+if(_109==null){
+_109=_107[_107.length-1].xval;
}
-this.dateWindow_=[_100,_101];
+this.dateWindow_=[_108,_109];
this.drawGraph_(this.rawData_);
-if(this.zoomCallback_){
-this.zoomCallback_(_100,_101);
+if(this.attr_("zoomCallback")){
+this.attr_("zoomCallback")(_108,_109);
}
};
-DateGraph.prototype.mouseMove_=function(_103){
-var _104=_103.mouse().page.x-PlotKit.Base.findPosX(this.hidden_);
-var _105=this.layout_.points;
-var _106=-1;
-var _107=-1;
-var _108=1e+100;
+Dygraph.prototype.mouseMove_=function(_111){
+var _112=_111.mouse().page.x-PlotKit.Base.findPosX(this.hidden_);
+var _113=this.layout_.points;
+var _114=-1;
+var _115=-1;
+var _116=1e+100;
var idx=-1;
-for(var i=0;i<_105.length;i++){
-var dist=Math.abs(_105[i].canvasx-_104);
-if(dist>_108){
+for(var i=0;i<_113.length;i++){
+var dist=Math.abs(_113[i].canvasx-_112);
+if(dist>_116){
break;
}
-_108=dist;
+_116=dist;
idx=i;
}
if(idx>=0){
-_106=_105[idx].xval;
+_114=_113[idx].xval;
}
-if(_104>_105[_105.length-1].canvasx){
-_106=_105[_105.length-1].xval;
+if(_112>_113[_113.length-1].canvasx){
+_114=_113[_113.length-1].xval;
}
-var _111=[];
-for(var i=0;i<_105.length;i++){
-if(_105[i].xval==_106){
-_111.push(_105[i]);
+var _119=[];
+for(var i=0;i<_113.length;i++){
+if(_113[i].xval==_114){
+_119.push(_113[i]);
}
}
-var _112=this.attrs_.highlightCircleSize;
+var _120=this.attr_("highlightCircleSize");
var ctx=this.canvas_.getContext("2d");
if(this.previousVerticalX_>=0){
var px=this.previousVerticalX_;
-ctx.clearRect(px-_112-1,0,2*_112+2,this.height_);
+ctx.clearRect(px-_120-1,0,2*_120+2,this.height_);
}
-if(_111.length>0){
-var _104=_111[0].canvasx;
-var _113=this.xValueFormatter_(_106)+":";
+if(_119.length>0){
+var _112=_119[0].canvasx;
+var _121=this.attr_("xValueFormatter")(_114,this)+":";
var clen=this.colors_.length;
-for(var i=0;i<_111.length;i++){
-if(this.labelsSeparateLines){
-_113+="<br/>";
+for(var i=0;i<_119.length;i++){
+if(this.attr_("labelsSeparateLines")){
+_121+="<br/>";
}
-var _115=_111[i];
-_113+=" <b><font color='"+this.colors_[i%clen].toHexString()+"'>"+_115.name+"</font></b>:"+this.round_(_115.yval,2);
+var _123=_119[i];
+_121+=" <b><font color='"+this.colors_[i%clen].toHexString()+"'>"+_123.name+"</font></b>:"+this.round_(_123.yval,2);
}
-this.labelsDiv_.innerHTML=_113;
-this.lastx_=_106;
+this.attr_("labelsDiv").innerHTML=_121;
+this.lastx_=_114;
ctx.save();
-for(var i=0;i<_111.length;i++){
+for(var i=0;i<_119.length;i++){
ctx.beginPath();
ctx.fillStyle=this.colors_[i%clen].toRGBString();
-ctx.arc(_104,_111[i%clen].canvasy,_112,0,360,false);
+ctx.arc(_112,_119[i%clen].canvasy,_120,0,360,false);
ctx.fill();
}
ctx.restore();
-this.previousVerticalX_=_104;
+this.previousVerticalX_=_112;
}
};
-DateGraph.prototype.mouseOut_=function(_116){
+Dygraph.prototype.mouseOut_=function(_124){
var ctx=this.canvas_.getContext("2d");
ctx.clearRect(0,0,this.width_,this.height_);
-this.labelsDiv_.innerHTML="";
+this.attr_("labelsDiv").innerHTML="";
};
-DateGraph.zeropad=function(x){
+Dygraph.zeropad=function(x){
if(x<10){
return "0"+x;
}else{
return ""+x;
}
};
-DateGraph.prototype.hmsString_=function(date){
-var _118=DateGraph.zeropad;
+Dygraph.prototype.hmsString_=function(date){
+var _126=Dygraph.zeropad;
var d=new Date(date);
if(d.getSeconds()){
-return _118(d.getHours())+":"+_118(d.getMinutes())+":"+_118(d.getSeconds());
+return _126(d.getHours())+":"+_126(d.getMinutes())+":"+_126(d.getSeconds());
}else{
if(d.getMinutes()){
-return _118(d.getHours())+":"+_118(d.getMinutes());
+return _126(d.getHours())+":"+_126(d.getMinutes());
}else{
-return _118(d.getHours());
+return _126(d.getHours());
}
}
};
-DateGraph.prototype.dateString_=function(date){
-var _120=DateGraph.zeropad;
+Dygraph.dateString_=function(date,self){
+var _129=Dygraph.zeropad;
var d=new Date(date);
var year=""+d.getFullYear();
-var _122=_120(d.getMonth()+1);
-var day=_120(d.getDate());
+var _131=_129(d.getMonth()+1);
+var day=_129(d.getDate());
var ret="";
var frac=d.getHours()*3600+d.getMinutes()*60+d.getSeconds();
if(frac){
-ret=" "+this.hmsString_(date);
+ret=" "+self.hmsString_(date);
}
-return year+"/"+_122+"/"+day+ret;
+return year+"/"+_131+"/"+day+ret;
};
-DateGraph.prototype.round_=function(num,_126){
-var _127=Math.pow(10,_126);
-return Math.round(num*_127)/_127;
+Dygraph.prototype.round_=function(num,_135){
+var _136=Math.pow(10,_135);
+return Math.round(num*_136)/_136;
};
-DateGraph.prototype.loadedEvent_=function(data){
+Dygraph.prototype.loadedEvent_=function(data){
this.rawData_=this.parseCSV_(data);
this.drawGraph_(this.rawData_);
};
-DateGraph.prototype.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
-DateGraph.prototype.quarters=["Jan","Apr","Jul","Oct"];
-DateGraph.prototype.addXTicks_=function(){
-var _129,endDate;
+Dygraph.prototype.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+Dygraph.prototype.quarters=["Jan","Apr","Jul","Oct"];
+Dygraph.prototype.addXTicks_=function(){
+var _138,endDate;
if(this.dateWindow_){
-_129=this.dateWindow_[0];
+_138=this.dateWindow_[0];
endDate=this.dateWindow_[1];
}else{
-_129=this.rawData_[0][0];
+_138=this.rawData_[0][0];
endDate=this.rawData_[this.rawData_.length-1][0];
}
-var _130=this.xTicker_(_129,endDate);
-this.layout_.updateOptions({xTicks:_130});
-};
-DateGraph.SECONDLY=0;
-DateGraph.TEN_SECONDLY=1;
-DateGraph.THIRTY_SECONDLY=2;
-DateGraph.MINUTELY=3;
-DateGraph.TEN_MINUTELY=4;
-DateGraph.THIRTY_MINUTELY=5;
-DateGraph.HOURLY=6;
-DateGraph.SIX_HOURLY=7;
-DateGraph.DAILY=8;
-DateGraph.WEEKLY=9;
-DateGraph.MONTHLY=10;
-DateGraph.QUARTERLY=11;
-DateGraph.BIANNUAL=12;
-DateGraph.ANNUAL=13;
-DateGraph.DECADAL=14;
-DateGraph.NUM_GRANULARITIES=15;
-DateGraph.SHORT_SPACINGS=[];
-DateGraph.SHORT_SPACINGS[DateGraph.SECONDLY]=1000*1;
-DateGraph.SHORT_SPACINGS[DateGraph.TEN_SECONDLY]=1000*10;
-DateGraph.SHORT_SPACINGS[DateGraph.THIRTY_SECONDLY]=1000*30;
-DateGraph.SHORT_SPACINGS[DateGraph.MINUTELY]=1000*60;
-DateGraph.SHORT_SPACINGS[DateGraph.TEN_MINUTELY]=1000*60*10;
-DateGraph.SHORT_SPACINGS[DateGraph.THIRTY_MINUTELY]=1000*60*30;
-DateGraph.SHORT_SPACINGS[DateGraph.HOURLY]=1000*3600;
-DateGraph.SHORT_SPACINGS[DateGraph.HOURLY]=1000*3600*6;
-DateGraph.SHORT_SPACINGS[DateGraph.DAILY]=1000*86400;
-DateGraph.SHORT_SPACINGS[DateGraph.WEEKLY]=1000*604800;
-DateGraph.prototype.NumXTicks=function(_131,_132,_133){
-if(_133<DateGraph.MONTHLY){
-var _134=DateGraph.SHORT_SPACINGS[_133];
-return Math.floor(0.5+1*(_132-_131)/_134);
-}else{
-var _135=1;
-var _136=12;
-if(_133==DateGraph.QUARTERLY){
-_136=3;
-}
-if(_133==DateGraph.BIANNUAL){
-_136=2;
-}
-if(_133==DateGraph.ANNUAL){
-_136=1;
-}
-if(_133==DateGraph.DECADAL){
-_136=1;
-_135=10;
-}
-var _137=365.2524*24*3600*1000;
-var _138=1*(_132-_131)/_137;
-return Math.floor(0.5+1*_138*_136/_135);
-}
-};
-DateGraph.prototype.GetXAxis=function(_139,_140,_141){
-var _142=[];
-if(_141<DateGraph.MONTHLY){
-var _143=DateGraph.SHORT_SPACINGS[_141];
-var _144="%d%b";
-if(_141<DateGraph.HOURLY){
-_139=_143*Math.floor(0.5+_139/_143);
-}
-for(var t=_139;t<=_140;t+=_143){
+var _139=this.attr_("xTicker")(_138,endDate,this);
+this.layout_.updateOptions({xTicks:_139});
+};
+Dygraph.SECONDLY=0;
+Dygraph.TEN_SECONDLY=1;
+Dygraph.THIRTY_SECONDLY=2;
+Dygraph.MINUTELY=3;
+Dygraph.TEN_MINUTELY=4;
+Dygraph.THIRTY_MINUTELY=5;
+Dygraph.HOURLY=6;
+Dygraph.SIX_HOURLY=7;
+Dygraph.DAILY=8;
+Dygraph.WEEKLY=9;
+Dygraph.MONTHLY=10;
+Dygraph.QUARTERLY=11;
+Dygraph.BIANNUAL=12;
+Dygraph.ANNUAL=13;
+Dygraph.DECADAL=14;
+Dygraph.NUM_GRANULARITIES=15;
+Dygraph.SHORT_SPACINGS=[];
+Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY]=1000*1;
+Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY]=1000*10;
+Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY]=1000*30;
+Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY]=1000*60;
+Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY]=1000*60*10;
+Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY]=1000*60*30;
+Dygraph.SHORT_SPACINGS[Dygraph.HOURLY]=1000*3600;
+Dygraph.SHORT_SPACINGS[Dygraph.HOURLY]=1000*3600*6;
+Dygraph.SHORT_SPACINGS[Dygraph.DAILY]=1000*86400;
+Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY]=1000*604800;
+Dygraph.prototype.NumXTicks=function(_140,_141,_142){
+if(_142<Dygraph.MONTHLY){
+var _143=Dygraph.SHORT_SPACINGS[_142];
+return Math.floor(0.5+1*(_141-_140)/_143);
+}else{
+var _144=1;
+var _145=12;
+if(_142==Dygraph.QUARTERLY){
+_145=3;
+}
+if(_142==Dygraph.BIANNUAL){
+_145=2;
+}
+if(_142==Dygraph.ANNUAL){
+_145=1;
+}
+if(_142==Dygraph.DECADAL){
+_145=1;
+_144=10;
+}
+var _146=365.2524*24*3600*1000;
+var _147=1*(_141-_140)/_146;
+return Math.floor(0.5+1*_147*_145/_144);
+}
+};
+Dygraph.prototype.GetXAxis=function(_148,_149,_150){
+var _151=[];
+if(_150<Dygraph.MONTHLY){
+var _152=Dygraph.SHORT_SPACINGS[_150];
+var _153="%d%b";
+if(_150<Dygraph.HOURLY){
+_148=_152*Math.floor(0.5+_148/_152);
+}
+for(var t=_148;t<=_149;t+=_152){
var d=new Date(t);
var frac=d.getHours()*3600+d.getMinutes()*60+d.getSeconds();
-if(frac==0||_141>=DateGraph.DAILY){
-_142.push({v:t,label:new Date(t+3600*1000).strftime(_144)});
+if(frac==0||_150>=Dygraph.DAILY){
+_151.push({v:t,label:new Date(t+3600*1000).strftime(_153)});
}else{
-_142.push({v:t,label:this.hmsString_(t)});
+_151.push({v:t,label:this.hmsString_(t)});
}
}
}else{
-var _146;
-var _147=1;
-if(_141==DateGraph.MONTHLY){
-_146=[0,1,2,3,4,5,6,7,8,9,10,11,12];
+var _155;
+var _156=1;
+if(_150==Dygraph.MONTHLY){
+_155=[0,1,2,3,4,5,6,7,8,9,10,11,12];
}else{
-if(_141==DateGraph.QUARTERLY){
-_146=[0,3,6,9];
+if(_150==Dygraph.QUARTERLY){
+_155=[0,3,6,9];
}else{
-if(_141==DateGraph.BIANNUAL){
-_146=[0,6];
+if(_150==Dygraph.BIANNUAL){
+_155=[0,6];
}else{
-if(_141==DateGraph.ANNUAL){
-_146=[0];
+if(_150==Dygraph.ANNUAL){
+_155=[0];
}else{
-if(_141==DateGraph.DECADAL){
-_146=[0];
-_147=10;
+if(_150==Dygraph.DECADAL){
+_155=[0];
+_156=10;
}
}
}
}
}
-var _148=new Date(_139).getFullYear();
-var _149=new Date(_140).getFullYear();
-var _150=DateGraph.zeropad;
-for(var i=_148;i<=_149;i++){
-if(i%_147!=0){
+var _157=new Date(_148).getFullYear();
+var _158=new Date(_149).getFullYear();
+var _159=Dygraph.zeropad;
+for(var i=_157;i<=_158;i++){
+if(i%_156!=0){
continue;
}
-for(var j=0;j<_146.length;j++){
-var _151=i+"/"+_150(1+_146[j])+"/01";
-var t=Date.parse(_151);
-if(t<_139||t>_140){
+for(var j=0;j<_155.length;j++){
+var _160=i+"/"+_159(1+_155[j])+"/01";
+var t=Date.parse(_160);
+if(t<_148||t>_149){
continue;
}
-_142.push({v:t,label:new Date(t).strftime("%b %y")});
+_151.push({v:t,label:new Date(t).strftime("%b %y")});
}
}
}
-return _142;
+return _151;
};
-DateGraph.prototype.dateTicker=function(_152,_153){
-var _154=-1;
-for(var i=0;i<DateGraph.NUM_GRANULARITIES;i++){
-var _155=this.NumXTicks(_152,_153,i);
-if(this.width_/_155>=this.attrs_.pixelsPerXLabel){
-_154=i;
+Dygraph.dateTicker=function(_161,_162,self){
+var _163=-1;
+for(var i=0;i<Dygraph.NUM_GRANULARITIES;i++){
+var _164=self.NumXTicks(_161,_162,i);
+if(self.width_/_164>=self.attr_("pixelsPerXLabel")){
+_163=i;
break;
}
}
-if(_154>=0){
-return this.GetXAxis(_152,_153,_154);
+if(_163>=0){
+return self.GetXAxis(_161,_162,_163);
}else{
}
};
-DateGraph.prototype.numericTicks=function(minV,maxV){
-var _158=[1,2,5];
-var _159,low_val,high_val,nTicks;
+Dygraph.numericTicks=function(minV,maxV,self){
+var _167=[1,2,5];
+var _168,low_val,high_val,nTicks;
+var _169=self.attr_("pixelsPerYLabel");
for(var i=-10;i<50;i++){
-var _160=Math.pow(10,i);
-for(var j=0;j<_158.length;j++){
-_159=_160*_158[j];
-low_val=Math.floor(minV/_159)*_159;
-high_val=Math.ceil(maxV/_159)*_159;
-nTicks=(high_val-low_val)/_159;
-var _161=this.height_/nTicks;
-if(_161>this.attrs_.pixelsPerYLabel){
+var _170=Math.pow(10,i);
+for(var j=0;j<_167.length;j++){
+_168=_170*_167[j];
+low_val=Math.floor(minV/_168)*_168;
+high_val=Math.ceil(maxV/_168)*_168;
+nTicks=(high_val-low_val)/_168;
+var _171=self.height_/nTicks;
+if(_171>_169){
break;
}
}
-if(_161>this.attrs_.pixelsPerYLabel){
+if(_171>_169){
break;
}
}
-var _162=[];
+var _172=[];
for(var i=0;i<nTicks;i++){
-var _163=low_val+i*_159;
-var _164=this.round_(_163,2);
-if(this.labelsKMB_){
+var _173=low_val+i*_168;
+var _174=self.round_(_173,2);
+if(self.attr_("labelsKMB")){
var k=1000;
-if(_163>=k*k*k){
-_164=this.round_(_163/(k*k*k),1)+"B";
+if(_173>=k*k*k){
+_174=self.round_(_173/(k*k*k),1)+"B";
}else{
-if(_163>=k*k){
-_164=this.round_(_163/(k*k),1)+"M";
+if(_173>=k*k){
+_174=self.round_(_173/(k*k),1)+"M";
}else{
-if(_163>=k){
-_164=this.round_(_163/k,1)+"K";
+if(_173>=k){
+_174=self.round_(_173/k,1)+"K";
}
}
}
}
-_162.push({label:_164,v:_163});
+_172.push({label:_174,v:_173});
}
-return _162;
+return _172;
};
-DateGraph.prototype.addYTicks_=function(minY,maxY){
-var _168=this.numericTicks(minY,maxY);
-this.layout_.updateOptions({yAxis:[minY,maxY],yTicks:_168});
+Dygraph.prototype.addYTicks_=function(minY,maxY){
+var _178=Dygraph.numericTicks(minY,maxY,this);
+this.layout_.updateOptions({yAxis:[minY,maxY],yTicks:_178});
};
-DateGraph.prototype.drawGraph_=function(data){
+Dygraph.prototype.drawGraph_=function(data){
var maxY=null;
this.layout_.removeAllDatasets();
+this.setColors_();
for(var i=1;i<data[0].length;i++){
-var _169=[];
+var _179=[];
for(var j=0;j<data.length;j++){
var date=data[j][0];
-_169[j]=[date,data[j][i]];
+_179[j]=[date,data[j][i]];
}
-_169=this.rollingAverage(_169,this.rollPeriod_);
-var bars=this.errorBars_||this.customBars_;
+_179=this.rollingAverage(_179,this.rollPeriod_);
+var bars=this.attr_("errorBars")||this.customBars_;
if(this.dateWindow_){
var low=this.dateWindow_[0];
var high=this.dateWindow_[1];
-var _173=[];
-for(var k=0;k<_169.length;k++){
-if(_169[k][0]>=low&&_169[k][0]<=high){
-_173.push(_169[k]);
-var y=bars?_169[k][1][0]:_169[k][1];
+var _183=[];
+for(var k=0;k<_179.length;k++){
+if(_179[k][0]>=low&&_179[k][0]<=high){
+_183.push(_179[k]);
+var y=bars?_179[k][1][0]:_179[k][1];
if(maxY==null||y>maxY){
maxY=y;
}
}
}
-_169=_173;
+_179=_183;
+}else{
+if(!this.customBars_){
+for(var j=0;j<_179.length;j++){
+var y=bars?_179[j][1][0]:_179[j][1];
+if(maxY==null||y>maxY){
+maxY=bars?y+_179[j][1][1]:y;
+}
+}
}else{
-for(var j=0;j<_169.length;j++){
-var y=bars?_169[j][1][0]:_169[j][1];
+for(var j=0;j<_179.length;j++){
+var y=_179[j][1][0];
+var high=_179[j][1][2];
+if(high>y){
+y=high;
+}
if(maxY==null||y>maxY){
-maxY=bars?y+_169[j][1][1]:y;
+maxY=y;
+}
}
}
}
if(bars){
var vals=[];
-for(var j=0;j<_169.length;j++){
-vals[j]=[_169[j][0],_169[j][1][0],_169[j][1][1],_169[j][1][2]];
+for(var j=0;j<_179.length;j++){
+vals[j]=[_179[j][0],_179[j][1][0],_179[j][1][1],_179[j][1][2]];
}
-this.layout_.addDataset(this.labels_[i-1],vals);
+this.layout_.addDataset(this.attr_("labels")[i],vals);
}else{
-this.layout_.addDataset(this.labels_[i-1],_169);
+this.layout_.addDataset(this.attr_("labels")[i],_179);
}
}
if(this.valueRange_!=null){
this.plotter_.render();
this.canvas_.getContext("2d").clearRect(0,0,this.canvas_.width,this.canvas_.height);
};
-DateGraph.prototype.rollingAverage=function(_175,_176){
-if(_175.length<2){
-return _175;
+Dygraph.prototype.rollingAverage=function(_185,_186){
+if(_185.length<2){
+return _185;
}
-var _176=Math.min(_176,_175.length-1);
-var _177=[];
-var _178=this.sigma_;
+var _186=Math.min(_186,_185.length-1);
+var _187=[];
+var _188=this.attr_("sigma");
if(this.fractions_){
var num=0;
var den=0;
var mult=100;
-for(var i=0;i<_175.length;i++){
-num+=_175[i][1][0];
-den+=_175[i][1][1];
-if(i-_176>=0){
-num-=_175[i-_176][1][0];
-den-=_175[i-_176][1][1];
-}
-var date=_175[i][0];
-var _181=den?num/den:0;
-if(this.errorBars_){
+for(var i=0;i<_185.length;i++){
+num+=_185[i][1][0];
+den+=_185[i][1][1];
+if(i-_186>=0){
+num-=_185[i-_186][1][0];
+den-=_185[i-_186][1][1];
+}
+var date=_185[i][0];
+var _191=den?num/den:0;
+if(this.attr_("errorBars")){
if(this.wilsonInterval_){
if(den){
-var p=_181<0?0:_181,n=den;
-var pm=_178*Math.sqrt(p*(1-p)/n+_178*_178/(4*n*n));
-var _184=1+_178*_178/den;
-var low=(p+_178*_178/(2*den)-pm)/_184;
-var high=(p+_178*_178/(2*den)+pm)/_184;
-_177[i]=[date,[p*mult,(p-low)*mult,(high-p)*mult]];
+var p=_191<0?0:_191,n=den;
+var pm=_188*Math.sqrt(p*(1-p)/n+_188*_188/(4*n*n));
+var _194=1+_188*_188/den;
+var low=(p+_188*_188/(2*den)-pm)/_194;
+var high=(p+_188*_188/(2*den)+pm)/_194;
+_187[i]=[date,[p*mult,(p-low)*mult,(high-p)*mult]];
}else{
-_177[i]=[date,[0,0,0]];
+_187[i]=[date,[0,0,0]];
}
}else{
-var _185=den?_178*Math.sqrt(_181*(1-_181)/den):1;
-_177[i]=[date,[mult*_181,mult*_185,mult*_185]];
+var _195=den?_188*Math.sqrt(_191*(1-_191)/den):1;
+_187[i]=[date,[mult*_191,mult*_195,mult*_195]];
}
}else{
-_177[i]=[date,mult*_181];
+_187[i]=[date,mult*_191];
}
}
}else{
var low=0;
var mid=0;
var high=0;
-var _187=0;
-for(var i=0;i<_175.length;i++){
-var data=_175[i][1];
+var _197=0;
+for(var i=0;i<_185.length;i++){
+var data=_185[i][1];
var y=data[1];
-_177[i]=[_175[i][0],[y,y-data[0],data[2]-y]];
+_187[i]=[_185[i][0],[y,y-data[0],data[2]-y]];
low+=data[0];
mid+=y;
high+=data[2];
-_187+=1;
-if(i-_176>=0){
-var prev=_175[i-_176];
+_197+=1;
+if(i-_186>=0){
+var prev=_185[i-_186];
low-=prev[1][0];
mid-=prev[1][1];
high-=prev[1][2];
-_187-=1;
+_197-=1;
}
-_177[i]=[_175[i][0],[1*mid/_187,1*(mid-low)/_187,1*(high-mid)/_187]];
+_187[i]=[_185[i][0],[1*mid/_197,1*(mid-low)/_197,1*(high-mid)/_197]];
}
}else{
-var _189=Math.min(_176-1,_175.length-2);
-if(!this.errorBars_){
-for(var i=0;i<_189;i++){
+var _199=Math.min(_186-1,_185.length-2);
+if(!this.attr_("errorBars")){
+for(var i=0;i<_199;i++){
var sum=0;
for(var j=0;j<i+1;j++){
-sum+=_175[j][1];
+sum+=_185[j][1];
}
-_177[i]=[_175[i][0],sum/(i+1)];
+_187[i]=[_185[i][0],sum/(i+1)];
}
-for(var i=Math.min(_176-1,_175.length-2);i<_175.length;i++){
+for(var i=Math.min(_186-1,_185.length-2);i<_185.length;i++){
var sum=0;
-for(var j=i-_176+1;j<i+1;j++){
-sum+=_175[j][1];
+for(var j=i-_186+1;j<i+1;j++){
+sum+=_185[j][1];
}
-_177[i]=[_175[i][0],sum/_176];
+_187[i]=[_185[i][0],sum/_186];
}
}else{
-for(var i=0;i<_189;i++){
+for(var i=0;i<_199;i++){
var sum=0;
-var _191=0;
+var _201=0;
for(var j=0;j<i+1;j++){
-sum+=_175[j][1][0];
-_191+=Math.pow(_175[j][1][1],2);
+sum+=_185[j][1][0];
+_201+=Math.pow(_185[j][1][1],2);
}
-var _185=Math.sqrt(_191)/(i+1);
-_177[i]=[_175[i][0],[sum/(i+1),_178*_185,_178*_185]];
+var _195=Math.sqrt(_201)/(i+1);
+_187[i]=[_185[i][0],[sum/(i+1),_188*_195,_188*_195]];
}
-for(var i=Math.min(_176-1,_175.length-2);i<_175.length;i++){
+for(var i=Math.min(_186-1,_185.length-2);i<_185.length;i++){
var sum=0;
-var _191=0;
-for(var j=i-_176+1;j<i+1;j++){
-sum+=_175[j][1][0];
-_191+=Math.pow(_175[j][1][1],2);
+var _201=0;
+for(var j=i-_186+1;j<i+1;j++){
+sum+=_185[j][1][0];
+_201+=Math.pow(_185[j][1][1],2);
}
-var _185=Math.sqrt(_191)/_176;
-_177[i]=[_175[i][0],[sum/_176,_178*_185,_178*_185]];
+var _195=Math.sqrt(_201)/_186;
+_187[i]=[_185[i][0],[sum/_186,_188*_195,_188*_195]];
}
}
}
}
-return _177;
+return _187;
};
-DateGraph.prototype.dateParser=function(_192){
-var _193;
-if(_192.length==10&&_192.search("-")!=-1){
-_193=_192.replace("-","/","g");
-while(_193.search("-")!=-1){
-_193=_193.replace("-","/");
+Dygraph.dateParser=function(_202,self){
+var _203;
+var d;
+if(_202.length==10&&_202.search("-")!=-1){
+_203=_202.replace("-","/","g");
+while(_203.search("-")!=-1){
+_203=_203.replace("-","/");
}
-return Date.parse(_193);
+d=Date.parse(_203);
}else{
-if(_192.length==8){
-_193=_192.substr(0,4)+"/"+_192.substr(4,2)+"/"+_192.substr(6,2);
-return Date.parse(_193);
+if(_202.length==8){
+_203=_202.substr(0,4)+"/"+_202.substr(4,2)+"/"+_202.substr(6,2);
+d=Date.parse(_203);
}else{
-return Date.parse(_192);
+d=Date.parse(_202);
+}
}
+if(!d||isNaN(d)){
+self.error("Couldn't parse "+_202+" as a date");
}
+return d;
};
-DateGraph.prototype.parseCSV_=function(data){
+Dygraph.prototype.detectTypeFromString_=function(str){
+var _205=false;
+if(str.indexOf("-")>=0||str.indexOf("/")>=0||isNaN(parseFloat(str))){
+_205=true;
+}else{
+if(str.length==8&&str>"19700101"&&str<"20371231"){
+_205=true;
+}
+}
+if(_205){
+this.attrs_.xValueFormatter=Dygraph.dateString_;
+this.attrs_.xValueParser=Dygraph.dateParser;
+this.attrs_.xTicker=Dygraph.dateTicker;
+}else{
+this.attrs_.xValueFormatter=function(x){
+return x;
+};
+this.attrs_.xValueParser=function(x){
+return parseFloat(x);
+};
+this.attrs_.xTicker=Dygraph.numericTicks;
+}
+};
+Dygraph.prototype.parseCSV_=function(data){
var ret=[];
-var _194=data.split("\n");
-var _195=this.labelsFromCSV_?1:0;
+var _206=data.split("\n");
+var _207=0;
if(this.labelsFromCSV_){
-var _196=_194[0].split(",");
-_196.shift();
-this.labels_=_196;
-this.setColors_(this.attrs_);
-this.renderOptions_.colorScheme=this.colors_;
-MochiKit.Base.update(this.plotter_.options,this.renderOptions_);
-MochiKit.Base.update(this.layoutOptions_,this.attrs_);
-}
-for(var i=_195;i<_194.length;i++){
-var line=_194[i];
+_207=1;
+this.attrs_.labels=_206[0].split(",");
+}
+var _208;
+var _209=false;
+var _210=this.attr_("labels").length;
+for(var i=_207;i<_206.length;i++){
+var line=_206[i];
if(line.length==0){
continue;
}
-var _198=line.split(",");
-if(_198.length<2){
+var _212=line.split(",");
+if(_212.length<2){
continue;
}
-var _199=[];
-_199[0]=this.xValueParser_(_198[0]);
+var _213=[];
+if(!_209){
+this.detectTypeFromString_(_212[0]);
+_208=this.attr_("xValueParser");
+_209=true;
+}
+_213[0]=_208(_212[0],this);
if(this.fractions_){
-for(var j=1;j<_198.length;j++){
-var vals=_198[j].split("/");
-_199[j]=[parseFloat(vals[0]),parseFloat(vals[1])];
+for(var j=1;j<_212.length;j++){
+var vals=_212[j].split("/");
+_213[j]=[parseFloat(vals[0]),parseFloat(vals[1])];
}
}else{
-if(this.errorBars_){
-for(var j=1;j<_198.length;j+=2){
-_199[(j+1)/2]=[parseFloat(_198[j]),parseFloat(_198[j+1])];
+if(this.attr_("errorBars")){
+for(var j=1;j<_212.length;j+=2){
+_213[(j+1)/2]=[parseFloat(_212[j]),parseFloat(_212[j+1])];
}
}else{
if(this.customBars_){
-for(var j=1;j<_198.length;j++){
-var vals=_198[j].split(";");
-_199[j]=[parseFloat(vals[0]),parseFloat(vals[1]),parseFloat(vals[2])];
+for(var j=1;j<_212.length;j++){
+var vals=_212[j].split(";");
+_213[j]=[parseFloat(vals[0]),parseFloat(vals[1]),parseFloat(vals[2])];
}
}else{
-for(var j=1;j<_198.length;j++){
-_199[j]=parseFloat(_198[j]);
+for(var j=1;j<_212.length;j++){
+_213[j]=parseFloat(_212[j]);
+}
}
}
}
+ret.push(_213);
+if(_213.length!=_210){
+this.error("Number of columns in line "+i+" ("+_213.length+") does not agree with number of labels ("+_210+") "+line);
}
-ret.push(_199);
}
return ret;
};
-DateGraph.prototype.parseDataTable_=function(data){
+Dygraph.prototype.parseArray_=function(data){
+if(data.length==0){
+this.error("Can't plot empty data set");
+return null;
+}
+if(data[0].length==0){
+this.error("Data set cannot contain an empty row");
+return null;
+}
+if(this.attr_("labels")==null){
+this.warn("Using default labels. Set labels explicitly via 'labels' "+"in the options parameter");
+this.attrs_.labels=["X"];
+for(var i=1;i<data[0].length;i++){
+this.attrs_.labels.push("Y"+i);
+}
+}
+if(MochiKit.Base.isDateLike(data[0][0])){
+this.attrs_.xValueFormatter=Dygraph.dateString_;
+this.attrs_.xTicker=Dygraph.dateTicker;
+var _214=MochiKit.Base.clone(data);
+for(var i=0;i<data.length;i++){
+if(_214[i].length==0){
+this.error("Row "<<(1+i)<<" of data is empty");
+return null;
+}
+if(_214[i][0]==null||typeof (_214[i][0].getTime)!="function"){
+this.error("x value in row "<<(1+i)<<" is not a Date");
+return null;
+}
+_214[i][0]=_214[i][0].getTime();
+}
+return _214;
+}else{
+this.attrs_.xValueFormatter=function(x){
+return x;
+};
+this.attrs_.xTicker=Dygraph.numericTicks;
+return data;
+}
+};
+Dygraph.prototype.parseDataTable_=function(data){
var cols=data.getNumberOfColumns();
var rows=data.getNumberOfRows();
-var _202=[];
+var _217=[];
for(var i=0;i<cols;i++){
-_202.push(data.getColumnLabel(i));
+_217.push(data.getColumnLabel(i));
}
-_202.shift();
-this.labels_=_202;
-this.setColors_(this.attrs_);
-this.renderOptions_.colorScheme=this.colors_;
-MochiKit.Base.update(this.plotter_.options,this.renderOptions_);
-MochiKit.Base.update(this.layoutOptions_,this.attrs_);
-var _203=data.getColumnType(0);
-if(_203!="date"&&_203!="number"){
-alert("only 'date' and 'number' types are supported for column 1"+"of DataTable input (Got '"+_203+"')");
+this.attrs_.labels=_217;
+var _218=data.getColumnType(0);
+if(_218=="date"){
+this.attrs_.xValueFormatter=Dygraph.dateString_;
+this.attrs_.xValueParser=Dygraph.dateParser;
+this.attrs_.xTicker=Dygraph.dateTicker;
+}else{
+if(_218!="number"){
+this.attrs_.xValueFormatter=function(x){
+return x;
+};
+this.attrs_.xValueParser=function(x){
+return parseFloat(x);
+};
+this.attrs_.xTicker=Dygraph.numericTicks;
+}else{
+this.error("only 'date' and 'number' types are supported for column 1"+"of DataTable input (Got '"+_218+"')");
return null;
}
+}
var ret=[];
for(var i=0;i<rows;i++){
var row=[];
-if(_203=="date"){
+if(_218=="date"){
row.push(data.getValue(i,0).getTime());
}else{
row.push(data.getValue(i,0));
}
return ret;
};
-DateGraph.prototype.start_=function(){
+Dygraph.prototype.start_=function(){
if(typeof this.file_=="function"){
this.loadedEvent_(this.file_());
}else{
+if(MochiKit.Base.isArrayLike(this.file_)){
+this.rawData_=this.parseArray_(this.file_);
+this.drawGraph_(this.rawData_);
+}else{
if(typeof this.file_=="object"&&typeof this.file_.getColumnRange=="function"){
this.rawData_=this.parseDataTable_(this.file_);
this.drawGraph_(this.rawData_);
}else{
+if(typeof this.file_=="string"){
+if(this.file_.indexOf("\n")>=0){
+this.loadedEvent_(this.file_);
+}else{
var req=new XMLHttpRequest();
-var _206=this;
+var _221=this;
req.onreadystatechange=function(){
if(req.readyState==4){
if(req.status==200){
-_206.loadedEvent_(req.responseText);
+_221.loadedEvent_(req.responseText);
}
}
};
req.open("GET",this.file_,true);
req.send(null);
}
+}else{
+this.error("Unknown data format: "+(typeof this.file_));
}
-};
-DateGraph.prototype.updateOptions=function(_207){
-if(_207.errorBars){
-this.errorBars_=_207.errorBars;
}
-if(_207.customBars){
-this.customBars_=_207.customBars;
}
-if(_207.strokeWidth){
-this.strokeWidth_=_207.strokeWidth;
}
-if(_207.rollPeriod){
-this.rollPeriod_=_207.rollPeriod;
+};
+Dygraph.prototype.updateOptions=function(_222){
+if(_222.customBars){
+this.customBars_=_222.customBars;
}
-if(_207.dateWindow){
-this.dateWindow_=_207.dateWindow;
+if(_222.rollPeriod){
+this.rollPeriod_=_222.rollPeriod;
}
-if(_207.valueRange){
-this.valueRange_=_207.valueRange;
+if(_222.dateWindow){
+this.dateWindow_=_222.dateWindow;
}
-MochiKit.Base.update(this.attrs_,_207);
-if(typeof (_207.labels)!="undefined"){
-this.labels_=_207.labels;
-this.labelsFromCSV_=(_207.labels==null);
+if(_222.valueRange){
+this.valueRange_=_222.valueRange;
}
-this.layout_.updateOptions({"errorBars":this.errorBars_});
-if(_207["file"]&&_207["file"]!=this.file_){
-this.file_=_207["file"];
+MochiKit.Base.update(this.user_attrs_,_222);
+this.labelsFromCSV_=(this.attr_("labels")==null);
+this.layout_.updateOptions({"errorBars":this.attr_("errorBars")});
+if(_222["file"]&&_222["file"]!=this.file_){
+this.file_=_222["file"];
this.start_();
}else{
this.drawGraph_(this.rawData_);
}
};
-DateGraph.prototype.adjustRoll=function(_208){
-this.rollPeriod_=_208;
+Dygraph.prototype.adjustRoll=function(_223){
+this.rollPeriod_=_223;
this.drawGraph_(this.rawData_);
};
-DateGraph.GVizChart=function(_209){
-this.container=_209;
+Dygraph.GVizChart=function(_224){
+this.container=_224;
};
-DateGraph.GVizChart.prototype.draw=function(data,_210){
+Dygraph.GVizChart.prototype.draw=function(data,_225){
this.container.innerHTML="";
-this.date_graph=new DateGraph(this.container,data,null,_210||{});
+this.date_graph=new Dygraph(this.container,data,_225);
};
+DateGraph=Dygraph;
/**
* @fileoverview Creates an interactive, zoomable graph based on a CSV file or
- * string. DateGraph can handle multiple series with or without error bars. The
- * date/value ranges will be automatically set. DateGraph uses the
+ * string. Dygraph can handle multiple series with or without error bars. The
+ * date/value ranges will be automatically set. Dygraph uses the
* <canvas> tag, so it only works in FF1.5+.
* @author danvdk@gmail.com (Dan Vanderkam)
Usage:
<div id="graphdiv" style="width:800px; height:500px;"></div>
<script type="text/javascript">
- new DateGraph(document.getElementById("graphdiv"),
- "datafile.csv",
- ["Series 1", "Series 2"],
- { }); // options
+ new Dygraph(document.getElementById("graphdiv"),
+ "datafile.csv", // CSV file with headers
+ { }); // options
</script>
The CSV file is of the form
+ Date,SeriesA,SeriesB,SeriesC
YYYYMMDD,A1,B1,C1
YYYYMMDD,A2,B2,C2
- If null is passed as the third parameter (series names), then the first line
- of the CSV file is assumed to contain names for each series.
-
If the 'errorBars' option is set in the constructor, the input should be of
the form
+ Date,SeriesA,SeriesB,...
YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
If the 'fractions' option is set, the input should be of the form:
+ Date,SeriesA,SeriesB,...
YYYYMMDD,A1/B1,A2/B2,...
YYYYMMDD,A1/B1,A2/B2,...
And error bars will be calculated automatically using a binomial distribution.
- For further documentation and examples, see http://www/~danvk/dg/
+ For further documentation and examples, see http://www.danvk.org/dygraphs
*/
* returns this data. The expected format for each line is
* YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
* YYYYMMDD,val1,stddev1,val2,stddev2,...
- * @param {Array.<String>} labels Labels for the data series
* @param {Object} attrs Various other attributes, e.g. errorBars determines
* whether the input data contains error ranges.
*/
-DateGraph = function(div, file, labels, attrs) {
- if (arguments.length > 0)
- this.__init__(div, file, labels, attrs);
+Dygraph = function(div, data, opts) {
+ if (arguments.length > 0) {
+ if (arguments.length == 4) {
+ // Old versions of dygraphs took in the series labels as a constructor
+ // parameter. This doesn't make sense anymore, but it's easy to continue
+ // to support this usage.
+ this.warn("Using deprecated four-argument dygraph constructor");
+ this.__old_init__(div, data, arguments[2], arguments[3]);
+ } else {
+ this.__init__(div, data, opts);
+ }
+ }
};
-DateGraph.NAME = "DateGraph";
-DateGraph.VERSION = "1.1";
-DateGraph.__repr__ = function() {
+Dygraph.NAME = "Dygraph";
+Dygraph.VERSION = "1.2";
+Dygraph.__repr__ = function() {
return "[" + this.NAME + " " + this.VERSION + "]";
};
-DateGraph.toString = function() {
+Dygraph.toString = function() {
return this.__repr__();
};
// Various default values
-DateGraph.DEFAULT_ROLL_PERIOD = 1;
-DateGraph.DEFAULT_WIDTH = 480;
-DateGraph.DEFAULT_HEIGHT = 320;
-DateGraph.DEFAULT_STROKE_WIDTH = 1.0;
-DateGraph.AXIS_LINE_WIDTH = 0.3;
+Dygraph.DEFAULT_ROLL_PERIOD = 1;
+Dygraph.DEFAULT_WIDTH = 480;
+Dygraph.DEFAULT_HEIGHT = 320;
+Dygraph.AXIS_LINE_WIDTH = 0.3;
// Default attribute values.
-DateGraph.DEFAULT_ATTRS = {
+Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
pixelsPerXLabel: 60,
pixelsPerYLabel: 30,
+
labelsDivWidth: 250,
labelsDivStyles: {
// TODO(danvk): move defaults from createStatusMessage_ here.
- }
+ },
+ labelsSeparateLines: false,
+ labelsKMB: false,
+
+ strokeWidth: 1.0,
// TODO(danvk): default padding
+
+ showRoller: false,
+ xValueFormatter: Dygraph.dateString_,
+ xValueParser: Dygraph.dateParser,
+ xTicker: Dygraph.dateTicker,
+
+ sigma: 2.0,
+ errorBars: false,
+ fractions: false,
+ wilsonInterval: true, // only relevant if fractions is true
+ customBars: false
+};
+
+// Various logging levels.
+Dygraph.DEBUG = 1;
+Dygraph.INFO = 2;
+Dygraph.WARNING = 3;
+Dygraph.ERROR = 3;
+
+Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
+ // Labels is no longer a constructor parameter, since it's typically set
+ // directly from the data source. It also conains a name for the x-axis,
+ // which the previous constructor form did not.
+ if (labels != null) {
+ var new_labels = ["Date"];
+ for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
+ MochiKit.Base.update(attrs, { 'labels': new_labels });
+ }
+ this.__init__(div, file, attrs);
};
/**
- * Initializes the DateGraph. This creates a new DIV and constructs the PlotKit
+ * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
* and interaction <canvas> inside of it. See the constructor for details
* on the parameters.
* @param {String | Function} file Source data
* @param {Object} attrs Miscellaneous other options
* @private
*/
-DateGraph.prototype.__init__ = function(div, file, labels, attrs) {
+Dygraph.prototype.__init__ = function(div, file, attrs) {
+ // Support two-argument constructor
+ if (attrs == null) { attrs = {}; }
+
// Copy the important bits into the object
// TODO(danvk): most of these should just stay in the attrs_ dictionary.
this.maindiv_ = div;
- this.labels_ = labels;
this.file_ = file;
- this.rollPeriod_ = attrs.rollPeriod || DateGraph.DEFAULT_ROLL_PERIOD;
+ this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
this.previousVerticalX_ = -1;
- this.width_ = parseInt(div.style.width, 10);
- this.height_ = parseInt(div.style.height, 10);
- this.errorBars_ = attrs.errorBars || false;
this.fractions_ = attrs.fractions || false;
- this.strokeWidth_ = attrs.strokeWidth || DateGraph.DEFAULT_STROKE_WIDTH;
this.dateWindow_ = attrs.dateWindow || null;
this.valueRange_ = attrs.valueRange || null;
- this.labelsSeparateLines = attrs.labelsSeparateLines || false;
- this.labelsDiv_ = attrs.labelsDiv || null;
- this.labelsKMB_ = attrs.labelsKMB || false;
- this.xValueParser_ = attrs.xValueParser || DateGraph.prototype.dateParser;
- this.xValueFormatter_ = attrs.xValueFormatter ||
- DateGraph.prototype.dateString_;
- this.xTicker_ = attrs.xTicker || DateGraph.prototype.dateTicker;
- this.sigma_ = attrs.sigma || 2.0;
this.wilsonInterval_ = attrs.wilsonInterval || true;
this.customBars_ = attrs.customBars || false;
- this.attrs_ = {};
- MochiKit.Base.update(this.attrs_, DateGraph.DEFAULT_ATTRS);
- MochiKit.Base.update(this.attrs_, attrs);
-
- if (typeof this.attrs_.pixelsPerXLabel == 'undefined') {
- this.attrs_.pixelsPerXLabel = 60;
+ // If the div isn't already sized then give it a default size.
+ if (div.style.width == '') {
+ div.style.width = Dygraph.DEFAULT_WIDTH + "px";
+ }
+ if (div.style.height == '') {
+ div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
}
+ this.width_ = parseInt(div.style.width, 10);
+ this.height_ = parseInt(div.style.height, 10);
- // Make a note of whether labels will be pulled from the CSV file.
- this.labelsFromCSV_ = (this.labels_ == null);
- if (this.labels_ == null)
- this.labels_ = [];
+ // Dygraphs has many options, some of which interact with one another.
+ // To keep track of everything, we maintain two sets of options:
+ //
+ // this.user_attrs_ only options explicitly set by the user.
+ // this.attrs_ defaults, options derived from user_attrs_, data.
+ //
+ // Options are then accessed this.attr_('attr'), which first looks at
+ // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
+ // defaults without overriding behavior that the user specifically asks for.
+ this.user_attrs_ = {};
+ MochiKit.Base.update(this.user_attrs_, attrs);
- // Prototype of the callback is "void clickCallback(event, date)"
- this.clickCallback_ = attrs.clickCallback || null;
+ this.attrs_ = {};
+ MochiKit.Base.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
- // Prototype of zoom callback is "void dragCallback(minDate, maxDate)"
- this.zoomCallback_ = attrs.zoomCallback || null;
+ // Make a note of whether labels will be pulled from the CSV file.
+ this.labelsFromCSV_ = (this.attr_("labels") == null);
// Create the containing DIV and other interactive elements
this.createInterface_();
// Create the PlotKit grapher
- this.layoutOptions_ = { 'errorBars': (this.errorBars_ || this.customBars_),
+ // TODO(danvk): why does the Layout need its own set of options?
+ this.layoutOptions_ = { 'errorBars': (this.attr_("errorBars") ||
+ this.customBars_),
'xOriginIsZero': false };
- MochiKit.Base.update(this.layoutOptions_, attrs);
- this.setColors_(attrs);
+ MochiKit.Base.update(this.layoutOptions_, this.attrs_);
+ MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
- this.layout_ = new DateGraphLayout(this.layoutOptions_);
+ this.layout_ = new DygraphLayout(this.layoutOptions_);
+ // TODO(danvk): why does the Renderer need its own set of options?
this.renderOptions_ = { colorScheme: this.colors_,
strokeColor: null,
- strokeWidth: this.strokeWidth_,
+ strokeWidth: this.attr_("strokeWidth"),
axisLabelFontSize: 14,
- axisLineWidth: DateGraph.AXIS_LINE_WIDTH };
- MochiKit.Base.update(this.renderOptions_, attrs);
- this.plotter_ = new DateGraphCanvasRenderer(this.hidden_, this.layout_,
- this.renderOptions_);
+ axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
+ MochiKit.Base.update(this.renderOptions_, this.attrs_);
+ MochiKit.Base.update(this.renderOptions_, this.user_attrs_);
+ this.plotter_ = new DygraphCanvasRenderer(this.hidden_, this.layout_,
+ this.renderOptions_);
this.createStatusMessage_();
this.createRollInterface_();
this.start_();
};
+Dygraph.prototype.attr_ = function(name) {
+ if (typeof(this.user_attrs_[name]) != 'undefined') {
+ return this.user_attrs_[name];
+ } else if (typeof(this.attrs_[name]) != 'undefined') {
+ return this.attrs_[name];
+ } else {
+ return null;
+ }
+};
+
+// TODO(danvk): any way I can get the line numbers to be this.warn call?
+Dygraph.prototype.log = function(severity, message) {
+ if (typeof(console) != 'undefined') {
+ switch (severity) {
+ case Dygraph.DEBUG:
+ console.debug('dygraphs: ' + message);
+ break;
+ case Dygraph.INFO:
+ console.info('dygraphs: ' + message);
+ break;
+ case Dygraph.WARNING:
+ console.warn('dygraphs: ' + message);
+ break;
+ case Dygraph.ERROR:
+ console.error('dygraphs: ' + message);
+ break;
+ }
+ }
+}
+Dygraph.prototype.info = function(message) {
+ this.log(Dygraph.INFO, message);
+}
+Dygraph.prototype.warn = function(message) {
+ this.log(Dygraph.WARNING, message);
+}
+Dygraph.prototype.error = function(message) {
+ this.log(Dygraph.ERROR, message);
+}
+
/**
* Returns the current rolling period, as set by the user or an option.
* @return {Number} The number of days in the rolling window
*/
-DateGraph.prototype.rollPeriod = function() {
+Dygraph.prototype.rollPeriod = function() {
return this.rollPeriod_;
}
/**
- * Generates interface elements for the DateGraph: a containing div, a div to
+ * Generates interface elements for the Dygraph: a containing div, a div to
* display the current point, and a textbox to adjust the rolling average
* period.
* @private
*/
-DateGraph.prototype.createInterface_ = function() {
+Dygraph.prototype.createInterface_ = function() {
// Create the all-enclosing graph div
var enclosing = this.maindiv_;
/**
* Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
- * this particular canvas. All DateGraph work is done on this.canvas_.
- * @param {Object} canvas The DateGraph canvas to over which to overlay the plot
+ * this particular canvas. All Dygraph work is done on this.canvas_.
+ * @param {Object} canvas The Dygraph canvas to over which to overlay the plot
* @return {Object} The newly-created canvas
* @private
*/
-DateGraph.prototype.createPlotKitCanvas_ = function(canvas) {
+Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
var h = document.createElement("canvas");
h.style.position = "absolute";
h.style.top = canvas.style.top;
* color wheel. Saturation/Value are customizable, and the hue is
* equally-spaced around the color wheel. If a custom set of colors is
* specified, that is used instead.
- * @param {Object} attrs Various attributes, e.g. saturation and value
* @private
*/
-DateGraph.prototype.setColors_ = function(attrs) {
- var num = this.labels_.length;
+Dygraph.prototype.setColors_ = function() {
+ // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
+ // away with this.renderOptions_.
+ var num = this.attr_("labels").length - 1;
this.colors_ = [];
- if (!attrs.colors) {
- var sat = attrs.colorSaturation || 1.0;
- var val = attrs.colorValue || 0.5;
+ var colors = this.attr_('colors');
+ if (!colors) {
+ var sat = this.attr_('colorSaturation') || 1.0;
+ var val = this.attr_('colorValue') || 0.5;
for (var i = 1; i <= num; i++) {
var hue = (1.0*i/(1+num));
this.colors_.push( MochiKit.Color.Color.fromHSV(hue, sat, val) );
}
} else {
for (var i = 0; i < num; i++) {
- var colorStr = attrs.colors[i % attrs.colors.length];
+ var colorStr = colors[i % colors.length];
this.colors_.push( MochiKit.Color.Color.fromString(colorStr) );
}
}
+
+ // TODO(danvk): update this w/r/t/ the new options system.
+ this.renderOptions_.colorScheme = this.colors_;
+ MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
+ MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
+ MochiKit.Base.update(this.layoutOptions_, this.attrs_);
}
/**
* been specified.
* @private
*/
-DateGraph.prototype.createStatusMessage_ = function(){
- if (!this.labelsDiv_) {
- var divWidth = this.attrs_.labelsDivWidth;
+Dygraph.prototype.createStatusMessage_ = function(){
+ if (!this.attr_("labelsDiv")) {
+ var divWidth = this.attr_('labelsDivWidth');
var messagestyle = { "style": {
"position": "absolute",
"fontSize": "14px",
"background": "white",
"textAlign": "left",
"overflow": "hidden"}};
- MochiKit.Base.update(messagestyle["style"], this.attrs_.labelsDivStyles);
- this.labelsDiv_ = MochiKit.DOM.DIV(messagestyle);
- MochiKit.DOM.appendChildNodes(this.graphDiv, this.labelsDiv_);
+ MochiKit.Base.update(messagestyle["style"], this.attr_('labelsDivStyles'));
+ var div = MochiKit.DOM.DIV(messagestyle);
+ MochiKit.DOM.appendChildNodes(this.graphDiv, div);
+ this.attrs_.labelsDiv = div;
}
};
* @return {Object} The newly-created text box
* @private
*/
-DateGraph.prototype.createRollInterface_ = function() {
+Dygraph.prototype.createRollInterface_ = function() {
var padding = this.plotter_.options.padding;
- if (typeof this.attrs_.showRoller == 'undefined') {
- this.attrs_.showRoller = false;
- }
- var display = this.attrs_.showRoller ? "block" : "none";
+ var display = this.attr_('showRoller') ? "block" : "none";
var textAttr = { "type": "text",
"size": "2",
"value": this.rollPeriod_,
* events. Uses MochiKit.Signal to attach all the event handlers.
* @private
*/
-DateGraph.prototype.createDragInterface_ = function() {
+Dygraph.prototype.createDragInterface_ = function() {
var self = this;
// Tracks whether the mouse is down right now
var regionHeight = Math.abs(dragEndY - dragStartY);
if (regionWidth < 2 && regionHeight < 2 &&
- self.clickCallback_ != null &&
+ self.attr_('clickCallback') != null &&
self.lastx_ != undefined) {
- self.clickCallback_(event, new Date(self.lastx_));
+ // TODO(danvk): pass along more info about the point.
+ self.attr_('clickCallback')(event, new Date(self.lastx_));
}
if (regionWidth >= 10) {
self.drawGraph_(self.rawData_);
var minDate = self.rawData_[0][0];
var maxDate = self.rawData_[self.rawData_.length - 1][0];
- if (self.zoomCallback_) {
- self.zoomCallback_(minDate, maxDate);
+ if (self.attr_("zoomCallback")) {
+ self.attr_("zoomCallback")(minDate, maxDate);
}
});
};
* function. Used to avoid excess redrawing
* @private
*/
-DateGraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
+Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
var ctx = this.canvas_.getContext("2d");
// Clean up from the previous rect if necessary
* @param {Number} highX The rightmost pixel value that should be visible.
* @private
*/
-DateGraph.prototype.doZoom_ = function(lowX, highX) {
+Dygraph.prototype.doZoom_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
var points = this.layout_.points;
var minDate = null;
this.dateWindow_ = [minDate, maxDate];
this.drawGraph_(this.rawData_);
- if (this.zoomCallback_) {
- this.zoomCallback_(minDate, maxDate);
+ if (this.attr_("zoomCallback")) {
+ this.attr_("zoomCallback")(minDate, maxDate);
}
};
* @param {Object} event The mousemove event from the browser.
* @private
*/
-DateGraph.prototype.mouseMove_ = function(event) {
+Dygraph.prototype.mouseMove_ = function(event) {
var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_);
var points = this.layout_.points;
}
// Clear the previously drawn vertical, if there is one
- var circleSize = this.attrs_.highlightCircleSize;
+ var circleSize = this.attr_('highlightCircleSize');
var ctx = this.canvas_.getContext("2d");
if (this.previousVerticalX_ >= 0) {
var px = this.previousVerticalX_;
var canvasx = selPoints[0].canvasx;
// Set the status message to indicate the selected point(s)
- var replace = this.xValueFormatter_(lastx) + ":";
+ var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
var clen = this.colors_.length;
for (var i = 0; i < selPoints.length; i++) {
- if (this.labelsSeparateLines) {
+ if (this.attr_("labelsSeparateLines")) {
replace += "<br/>";
}
var point = selPoints[i];
+ point.name + "</font></b>:"
+ this.round_(point.yval, 2);
}
- this.labelsDiv_.innerHTML = replace;
+ this.attr_("labelsDiv").innerHTML = replace;
// Save last x position for callbacks.
this.lastx_ = lastx;
* @param {Object} event the mouseout event from the browser.
* @private
*/
-DateGraph.prototype.mouseOut_ = function(event) {
+Dygraph.prototype.mouseOut_ = function(event) {
// Get rid of the overlay data
var ctx = this.canvas_.getContext("2d");
ctx.clearRect(0, 0, this.width_, this.height_);
- this.labelsDiv_.innerHTML = "";
+ this.attr_("labelsDiv").innerHTML = "";
};
-DateGraph.zeropad = function(x) {
+Dygraph.zeropad = function(x) {
if (x < 10) return "0" + x; else return "" + x;
}
* @return {String} A time of the form "HH:MM:SS"
* @private
*/
-DateGraph.prototype.hmsString_ = function(date) {
- var zeropad = DateGraph.zeropad;
+Dygraph.prototype.hmsString_ = function(date) {
+ var zeropad = Dygraph.zeropad;
var d = new Date(date);
if (d.getSeconds()) {
return zeropad(d.getHours()) + ":" +
* @param {Number} date The JavaScript date (ms since epoch)
* @return {String} A date of the form "YYYY/MM/DD"
* @private
+ * TODO(danvk): why is this part of the prototype?
*/
-DateGraph.prototype.dateString_ = function(date) {
- var zeropad = DateGraph.zeropad;
+Dygraph.dateString_ = function(date, self) {
+ var zeropad = Dygraph.zeropad;
var d = new Date(date);
// Get the year:
var ret = "";
var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
- if (frac) ret = " " + this.hmsString_(date);
+ if (frac) ret = " " + self.hmsString_(date);
return year + "/" + month + "/" + day + ret;
};
* @return {Number} The rounded number
* @private
*/
-DateGraph.prototype.round_ = function(num, places) {
+Dygraph.prototype.round_ = function(num, places) {
var shift = Math.pow(10, places);
return Math.round(num * shift)/shift;
};
* @param {String} data Raw CSV data to be plotted
* @private
*/
-DateGraph.prototype.loadedEvent_ = function(data) {
+Dygraph.prototype.loadedEvent_ = function(data) {
this.rawData_ = this.parseCSV_(data);
this.drawGraph_(this.rawData_);
};
-DateGraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-DateGraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
+Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
/**
* Add ticks on the x-axis representing years, months, quarters, weeks, or days
* @private
*/
-DateGraph.prototype.addXTicks_ = function() {
+Dygraph.prototype.addXTicks_ = function() {
// Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
var startDate, endDate;
if (this.dateWindow_) {
endDate = this.rawData_[this.rawData_.length - 1][0];
}
- var xTicks = this.xTicker_(startDate, endDate);
+ var xTicks = this.attr_('xTicker')(startDate, endDate, this);
this.layout_.updateOptions({xTicks: xTicks});
};
// Time granularity enumeration
-DateGraph.SECONDLY = 0;
-DateGraph.TEN_SECONDLY = 1;
-DateGraph.THIRTY_SECONDLY = 2;
-DateGraph.MINUTELY = 3;
-DateGraph.TEN_MINUTELY = 4;
-DateGraph.THIRTY_MINUTELY = 5;
-DateGraph.HOURLY = 6;
-DateGraph.SIX_HOURLY = 7;
-DateGraph.DAILY = 8;
-DateGraph.WEEKLY = 9;
-DateGraph.MONTHLY = 10;
-DateGraph.QUARTERLY = 11;
-DateGraph.BIANNUAL = 12;
-DateGraph.ANNUAL = 13;
-DateGraph.DECADAL = 14;
-DateGraph.NUM_GRANULARITIES = 15;
-
-DateGraph.SHORT_SPACINGS = [];
-DateGraph.SHORT_SPACINGS[DateGraph.SECONDLY] = 1000 * 1;
-DateGraph.SHORT_SPACINGS[DateGraph.TEN_SECONDLY] = 1000 * 10;
-DateGraph.SHORT_SPACINGS[DateGraph.THIRTY_SECONDLY] = 1000 * 30;
-DateGraph.SHORT_SPACINGS[DateGraph.MINUTELY] = 1000 * 60;
-DateGraph.SHORT_SPACINGS[DateGraph.TEN_MINUTELY] = 1000 * 60 * 10;
-DateGraph.SHORT_SPACINGS[DateGraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
-DateGraph.SHORT_SPACINGS[DateGraph.HOURLY] = 1000 * 3600;
-DateGraph.SHORT_SPACINGS[DateGraph.HOURLY] = 1000 * 3600 * 6;
-DateGraph.SHORT_SPACINGS[DateGraph.DAILY] = 1000 * 86400;
-DateGraph.SHORT_SPACINGS[DateGraph.WEEKLY] = 1000 * 604800;
+Dygraph.SECONDLY = 0;
+Dygraph.TEN_SECONDLY = 1;
+Dygraph.THIRTY_SECONDLY = 2;
+Dygraph.MINUTELY = 3;
+Dygraph.TEN_MINUTELY = 4;
+Dygraph.THIRTY_MINUTELY = 5;
+Dygraph.HOURLY = 6;
+Dygraph.SIX_HOURLY = 7;
+Dygraph.DAILY = 8;
+Dygraph.WEEKLY = 9;
+Dygraph.MONTHLY = 10;
+Dygraph.QUARTERLY = 11;
+Dygraph.BIANNUAL = 12;
+Dygraph.ANNUAL = 13;
+Dygraph.DECADAL = 14;
+Dygraph.NUM_GRANULARITIES = 15;
+
+Dygraph.SHORT_SPACINGS = [];
+Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
+Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
+Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
+Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
+Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
+Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
+Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
+Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600 * 6;
+Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
+Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
// NumXTicks()
//
// If we used this time granularity, how many ticks would there be?
// This is only an approximation, but it's generally good enough.
//
-DateGraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
- if (granularity < DateGraph.MONTHLY) {
+Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
+ if (granularity < Dygraph.MONTHLY) {
// Generate one tick mark for every fixed interval of time.
- var spacing = DateGraph.SHORT_SPACINGS[granularity];
+ var spacing = Dygraph.SHORT_SPACINGS[granularity];
return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
} else {
var year_mod = 1; // e.g. to only print one point every 10 years.
var num_months = 12;
- if (granularity == DateGraph.QUARTERLY) num_months = 3;
- if (granularity == DateGraph.BIANNUAL) num_months = 2;
- if (granularity == DateGraph.ANNUAL) num_months = 1;
- if (granularity == DateGraph.DECADAL) { num_months = 1; year_mod = 10; }
+ if (granularity == Dygraph.QUARTERLY) num_months = 3;
+ if (granularity == Dygraph.BIANNUAL) num_months = 2;
+ if (granularity == Dygraph.ANNUAL) num_months = 1;
+ if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
var msInYear = 365.2524 * 24 * 3600 * 1000;
var num_years = 1.0 * (end_time - start_time) / msInYear;
//
// Returns an array containing {v: millis, label: label} dictionaries.
//
-DateGraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
+Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
var ticks = [];
- if (granularity < DateGraph.MONTHLY) {
+ if (granularity < Dygraph.MONTHLY) {
// Generate one tick mark for every fixed interval of time.
- var spacing = DateGraph.SHORT_SPACINGS[granularity];
+ var spacing = Dygraph.SHORT_SPACINGS[granularity];
var format = '%d%b'; // e.g. "1 Jan"
// TODO(danvk): be smarter about making sure this really hits a "nice" time.
- if (granularity < DateGraph.HOURLY) {
+ if (granularity < Dygraph.HOURLY) {
start_time = spacing * Math.floor(0.5 + start_time / spacing);
}
for (var t = start_time; t <= end_time; t += spacing) {
var d = new Date(t);
var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
- if (frac == 0 || granularity >= DateGraph.DAILY) {
+ if (frac == 0 || granularity >= Dygraph.DAILY) {
// the extra hour covers DST problems.
ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
} else {
var months;
var year_mod = 1; // e.g. to only print one point every 10 years.
- if (granularity == DateGraph.MONTHLY) {
+ if (granularity == Dygraph.MONTHLY) {
months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
- } else if (granularity == DateGraph.QUARTERLY) {
+ } else if (granularity == Dygraph.QUARTERLY) {
months = [ 0, 3, 6, 9 ];
- } else if (granularity == DateGraph.BIANNUAL) {
+ } else if (granularity == Dygraph.BIANNUAL) {
months = [ 0, 6 ];
- } else if (granularity == DateGraph.ANNUAL) {
+ } else if (granularity == Dygraph.ANNUAL) {
months = [ 0 ];
- } else if (granularity == DateGraph.DECADAL) {
+ } else if (granularity == Dygraph.DECADAL) {
months = [ 0 ];
year_mod = 10;
}
var start_year = new Date(start_time).getFullYear();
var end_year = new Date(end_time).getFullYear();
- var zeropad = DateGraph.zeropad;
+ var zeropad = Dygraph.zeropad;
for (var i = start_year; i <= end_year; i++) {
if (i % year_mod != 0) continue;
for (var j = 0; j < months.length; j++) {
* @return {Array.<Object>} Array of {label, value} tuples.
* @public
*/
-DateGraph.prototype.dateTicker = function(startDate, endDate) {
+Dygraph.dateTicker = function(startDate, endDate, self) {
var chosen = -1;
- for (var i = 0; i < DateGraph.NUM_GRANULARITIES; i++) {
- var num_ticks = this.NumXTicks(startDate, endDate, i);
- if (this.width_ / num_ticks >= this.attrs_.pixelsPerXLabel) {
+ for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
+ var num_ticks = self.NumXTicks(startDate, endDate, i);
+ if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
chosen = i;
break;
}
}
if (chosen >= 0) {
- return this.GetXAxis(startDate, endDate, chosen);
+ return self.GetXAxis(startDate, endDate, chosen);
} else {
// TODO(danvk): signal error.
}
* @return {Array.<Object>} Array of {label, value} tuples.
* @public
*/
-DateGraph.prototype.numericTicks = function(minV, maxV) {
+Dygraph.numericTicks = function(minV, maxV, self) {
// Basic idea:
// Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
// Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
- // The first spacing greater than this.attrs_.pixelsPerYLabel is what we use.
+ // The first spacing greater than pixelsPerYLabel is what we use.
var mults = [1, 2, 5];
var scale, low_val, high_val, nTicks;
+ // TODO(danvk): make it possible to set this for x- and y-axes independently.
+ var pixelsPerTick = self.attr_('pixelsPerYLabel');
for (var i = -10; i < 50; i++) {
var base_scale = Math.pow(10, i);
for (var j = 0; j < mults.length; j++) {
low_val = Math.floor(minV / scale) * scale;
high_val = Math.ceil(maxV / scale) * scale;
nTicks = (high_val - low_val) / scale;
- var spacing = this.height_ / nTicks;
+ var spacing = self.height_ / nTicks;
// wish I could break out of both loops at once...
- if (spacing > this.attrs_.pixelsPerYLabel) break;
+ if (spacing > pixelsPerTick) break;
}
- if (spacing > this.attrs_.pixelsPerYLabel) break;
+ if (spacing > pixelsPerTick) break;
}
// Construct labels for the ticks
var ticks = [];
for (var i = 0; i < nTicks; i++) {
var tickV = low_val + i * scale;
- var label = this.round_(tickV, 2);
- if (this.labelsKMB_) {
+ var label = self.round_(tickV, 2);
+ if (self.attr_("labelsKMB")) {
var k = 1000;
if (tickV >= k*k*k) {
- label = this.round_(tickV/(k*k*k), 1) + "B";
+ label = self.round_(tickV/(k*k*k), 1) + "B";
} else if (tickV >= k*k) {
- label = this.round_(tickV/(k*k), 1) + "M";
+ label = self.round_(tickV/(k*k), 1) + "M";
} else if (tickV >= k) {
- label = this.round_(tickV/k, 1) + "K";
+ label = self.round_(tickV/k, 1) + "K";
}
}
ticks.push( {label: label, v: tickV} );
* @param {Number} maxY The maximum Y value in the data set
* @private
*/
-DateGraph.prototype.addYTicks_ = function(minY, maxY) {
+Dygraph.prototype.addYTicks_ = function(minY, maxY) {
// Set the number of ticks so that the labels are human-friendly.
- var ticks = this.numericTicks(minY, maxY);
+ // TODO(danvk): make this an attribute as well.
+ var ticks = Dygraph.numericTicks(minY, maxY, this);
this.layout_.updateOptions( { yAxis: [minY, maxY],
yTicks: ticks } );
};
* @param {Array.<Object>} data The data (see above)
* @private
*/
-DateGraph.prototype.drawGraph_ = function(data) {
+Dygraph.prototype.drawGraph_ = function(data) {
var maxY = null;
this.layout_.removeAllDatasets();
+ this.setColors_();
+
// Loop over all fields in the dataset
for (var i = 1; i < data[0].length; i++) {
var series = [];
series = this.rollingAverage(series, this.rollPeriod_);
// Prune down to the desired range, if necessary (for zooming)
- var bars = this.errorBars_ || this.customBars_;
+ var bars = this.attr_("errorBars") || this.customBars_;
if (this.dateWindow_) {
var low = this.dateWindow_[0];
var high= this.dateWindow_[1];
}
series = pruned;
} else {
- for (var j = 0; j < series.length; j++) {
- var y = bars ? series[j][1][0] : series[j][1];
- if (maxY == null || y > maxY) {
- maxY = bars ? y + series[j][1][1] : y;
+ if (!this.customBars_) {
+ for (var j = 0; j < series.length; j++) {
+ var y = bars ? series[j][1][0] : series[j][1];
+ if (maxY == null || y > maxY) {
+ maxY = bars ? y + series[j][1][1] : y;
+ }
+ }
+ } else {
+ // With custom bars, maxY is the max of the high values.
+ for (var j = 0; j < series.length; j++) {
+ var y = series[j][1][0];
+ var high = series[j][1][2];
+ if (high > y) y = high;
+ if (maxY == null || y > maxY) {
+ maxY = y;
+ }
}
}
}
for (var j=0; j<series.length; j++)
vals[j] = [series[j][0],
series[j][1][0], series[j][1][1], series[j][1][2]];
- this.layout_.addDataset(this.labels_[i - 1], vals);
+ this.layout_.addDataset(this.attr_("labels")[i], vals);
} else {
- this.layout_.addDataset(this.labels_[i - 1], series);
+ this.layout_.addDataset(this.attr_("labels")[i], series);
}
}
* @param {Array} originalData The data in the appropriate format (see above)
* @param {Number} rollPeriod The number of days over which to average the data
*/
-DateGraph.prototype.rollingAverage = function(originalData, rollPeriod) {
+Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
if (originalData.length < 2)
return originalData;
var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
var rollingData = [];
- var sigma = this.sigma_;
+ var sigma = this.attr_("sigma");
if (this.fractions_) {
var num = 0;
var date = originalData[i][0];
var value = den ? num / den : 0.0;
- if (this.errorBars_) {
+ if (this.attr_("errorBars")) {
if (this.wilsonInterval_) {
// For more details on this confidence interval, see:
// http://en.wikipedia.org/wiki/Binomial_confidence_interval
// Calculate the rolling average for the first rollPeriod - 1 points where
// there is not enough data to roll over the full number of days
var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
- if (!this.errorBars_){
+ if (!this.attr_("errorBars")){
for (var i = 0; i < num_init_points; i++) {
var sum = 0;
for (var j = 0; j < i + 1; j++)
/**
* Parses a date, returning the number of milliseconds since epoch. This can be
- * passed in as an xValueParser in the DateGraph constructor.
+ * passed in as an xValueParser in the Dygraph constructor.
+ * TODO(danvk): enumerate formats that this understands.
* @param {String} A date in YYYYMMDD format.
* @return {Number} Milliseconds since epoch.
* @public
*/
-DateGraph.prototype.dateParser = function(dateStr) {
+Dygraph.dateParser = function(dateStr, self) {
var dateStrSlashed;
+ var d;
if (dateStr.length == 10 && dateStr.search("-") != -1) { // e.g. '2009-07-12'
dateStrSlashed = dateStr.replace("-", "/", "g");
while (dateStrSlashed.search("-") != -1) {
dateStrSlashed = dateStrSlashed.replace("-", "/");
}
- return Date.parse(dateStrSlashed);
+ d = Date.parse(dateStrSlashed);
} else if (dateStr.length == 8) { // e.g. '20090712'
+ // TODO(danvk): remove support for this format. It's confusing.
dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
+ "/" + dateStr.substr(6,2);
- return Date.parse(dateStrSlashed);
+ d = Date.parse(dateStrSlashed);
} else {
// Any format that Date.parse will accept, e.g. "2009/07/12" or
// "2009/07/12 12:34:56"
- return Date.parse(dateStr);
+ d = Date.parse(dateStr);
+ }
+
+ if (!d || isNaN(d)) {
+ self.error("Couldn't parse " + dateStr + " as a date");
+ }
+ return d;
+};
+
+/**
+ * Detects the type of the str (date or numeric) and sets the various
+ * formatting attributes in this.attrs_ based on this type.
+ * @param {String} str An x value.
+ * @private
+ */
+Dygraph.prototype.detectTypeFromString_ = function(str) {
+ var isDate = false;
+ if (str.indexOf('-') >= 0 ||
+ str.indexOf('/') >= 0 ||
+ isNaN(parseFloat(str))) {
+ isDate = true;
+ } else if (str.length == 8 && str > '19700101' && str < '20371231') {
+ // TODO(danvk): remove support for this format.
+ isDate = true;
+ }
+
+ if (isDate) {
+ this.attrs_.xValueFormatter = Dygraph.dateString_;
+ this.attrs_.xValueParser = Dygraph.dateParser;
+ this.attrs_.xTicker = Dygraph.dateTicker;
+ } else {
+ this.attrs_.xValueFormatter = function(x) { return x; };
+ this.attrs_.xValueParser = function(x) { return parseFloat(x); };
+ this.attrs_.xTicker = Dygraph.numericTicks;
}
};
* Parses a string in a special csv format. We expect a csv file where each
* line is a date point, and the first field in each line is the date string.
* We also expect that all remaining fields represent series.
- * if this.errorBars_ is set, then interpret the fields as:
+ * if the errorBars attribute is set, then interpret the fields as:
* date, series1, stddev1, series2, stddev2, ...
* @param {Array.<Object>} data See above.
* @private
+ *
+ * @return Array.<Object> An array with one entry for each row. These entries
+ * are an array of cells in that row. The first entry is the parsed x-value for
+ * the row. The second, third, etc. are the y-values. These can take on one of
+ * three forms, depending on the CSV and constructor parameters:
+ * 1. numeric value
+ * 2. [ value, stddev ]
+ * 3. [ low value, center value, high value ]
*/
-DateGraph.prototype.parseCSV_ = function(data) {
+Dygraph.prototype.parseCSV_ = function(data) {
var ret = [];
var lines = data.split("\n");
- var start = this.labelsFromCSV_ ? 1 : 0;
+ var start = 0;
if (this.labelsFromCSV_) {
- var labels = lines[0].split(",");
- labels.shift(); // a "date" parameter is assumed.
- this.labels_ = labels;
- // regenerate automatic colors.
- this.setColors_(this.attrs_);
- this.renderOptions_.colorScheme = this.colors_;
- MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
- MochiKit.Base.update(this.layoutOptions_, this.attrs_);
+ start = 1;
+ this.attrs_.labels = lines[0].split(",");
}
+ var xParser;
+ var defaultParserSet = false; // attempt to auto-detect x value type
+ var expectedCols = this.attr_("labels").length;
for (var i = start; i < lines.length; i++) {
var line = lines[i];
if (line.length == 0) continue; // skip blank lines
var inFields = line.split(',');
- if (inFields.length < 2)
- continue;
+ if (inFields.length < 2) continue;
var fields = [];
- fields[0] = this.xValueParser_(inFields[0]);
+ if (!defaultParserSet) {
+ this.detectTypeFromString_(inFields[0]);
+ xParser = this.attr_("xValueParser");
+ defaultParserSet = true;
+ }
+ fields[0] = xParser(inFields[0], this);
// If fractions are expected, parse the numbers as "A/B"
if (this.fractions_) {
var vals = inFields[j].split("/");
fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
}
- } else if (this.errorBars_) {
+ } else if (this.attr_("errorBars")) {
// If there are error bars, values are (value, stddev) pairs
for (var j = 1; j < inFields.length; j += 2)
fields[(j + 1) / 2] = [parseFloat(inFields[j]),
}
} else {
// Values are just numbers
- for (var j = 1; j < inFields.length; j++)
+ for (var j = 1; j < inFields.length; j++) {
fields[j] = parseFloat(inFields[j]);
+ }
}
ret.push(fields);
+
+ if (fields.length != expectedCols) {
+ this.error("Number of columns in line " + i + " (" + fields.length +
+ ") does not agree with number of labels (" + expectedCols +
+ ") " + line);
+ }
}
return ret;
};
/**
+ * The user has provided their data as a pre-packaged JS array. If the x values
+ * are numeric, this is the same as dygraphs' internal format. If the x values
+ * are dates, we need to convert them from Date objects to ms since epoch.
+ * @param {Array.<Object>} data
+ * @return {Array.<Object>} data with numeric x values.
+ */
+Dygraph.prototype.parseArray_ = function(data) {
+ // Peek at the first x value to see if it's numeric.
+ if (data.length == 0) {
+ this.error("Can't plot empty data set");
+ return null;
+ }
+ if (data[0].length == 0) {
+ this.error("Data set cannot contain an empty row");
+ return null;
+ }
+
+ if (this.attr_("labels") == null) {
+ this.warn("Using default labels. Set labels explicitly via 'labels' " +
+ "in the options parameter");
+ this.attrs_.labels = [ "X" ];
+ for (var i = 1; i < data[0].length; i++) {
+ this.attrs_.labels.push("Y" + i);
+ }
+ }
+
+ if (MochiKit.Base.isDateLike(data[0][0])) {
+ // Some intelligent defaults for a date x-axis.
+ this.attrs_.xValueFormatter = Dygraph.dateString_;
+ this.attrs_.xTicker = Dygraph.dateTicker;
+
+ // Assume they're all dates.
+ var parsedData = MochiKit.Base.clone(data);
+ for (var i = 0; i < data.length; i++) {
+ if (parsedData[i].length == 0) {
+ this.error("Row " << (1 + i) << " of data is empty");
+ return null;
+ }
+ if (parsedData[i][0] == null
+ || typeof(parsedData[i][0].getTime) != 'function') {
+ this.error("x value in row " << (1 + i) << " is not a Date");
+ return null;
+ }
+ parsedData[i][0] = parsedData[i][0].getTime();
+ }
+ return parsedData;
+ } else {
+ // Some intelligent defaults for a numeric x-axis.
+ this.attrs_.xValueFormatter = function(x) { return x; };
+ this.attrs_.xTicker = Dygraph.numericTicks;
+ return data;
+ }
+};
+
+/**
* Parses a DataTable object from gviz.
* The data is expected to have a first column that is either a date or a
* number. All subsequent columns must be numbers. If there is a clear mismatch
* @param {Array.<Object>} data See above.
* @private
*/
-DateGraph.prototype.parseDataTable_ = function(data) {
+Dygraph.prototype.parseDataTable_ = function(data) {
var cols = data.getNumberOfColumns();
var rows = data.getNumberOfRows();
for (var i = 0; i < cols; i++) {
labels.push(data.getColumnLabel(i));
}
- labels.shift(); // the x-axis parameter is assumed and unnamed.
- this.labels_ = labels;
- // regenerate automatic colors.
- this.setColors_(this.attrs_);
- this.renderOptions_.colorScheme = this.colors_;
- MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
- MochiKit.Base.update(this.layoutOptions_, this.attrs_);
+ this.attrs_.labels = labels;
var indepType = data.getColumnType(0);
- if (indepType != 'date' && indepType != 'number') {
- // TODO(danvk): standardize error reporting.
- alert("only 'date' and 'number' types are supported for column 1" +
- "of DataTable input (Got '" + indepType + "')");
+ if (indepType == 'date') {
+ this.attrs_.xValueFormatter = Dygraph.dateString_;
+ this.attrs_.xValueParser = Dygraph.dateParser;
+ this.attrs_.xTicker = Dygraph.dateTicker;
+ } else if (indepType != 'number') {
+ this.attrs_.xValueFormatter = function(x) { return x; };
+ this.attrs_.xValueParser = function(x) { return parseFloat(x); };
+ this.attrs_.xTicker = Dygraph.numericTicks;
+ } else {
+ this.error("only 'date' and 'number' types are supported for column 1" +
+ "of DataTable input (Got '" + indepType + "')");
return null;
}
* file, do an XMLHttpRequest to get it.
* @private
*/
-DateGraph.prototype.start_ = function() {
+Dygraph.prototype.start_ = function() {
if (typeof this.file_ == 'function') {
- // Stubbed out to allow this to run off a filesystem
+ // CSV string. Pretend we got it via XHR.
this.loadedEvent_(this.file_());
+ } else if (MochiKit.Base.isArrayLike(this.file_)) {
+ this.rawData_ = this.parseArray_(this.file_);
+ this.drawGraph_(this.rawData_);
} else if (typeof this.file_ == 'object' &&
typeof this.file_.getColumnRange == 'function') {
// must be a DataTable from gviz.
this.rawData_ = this.parseDataTable_(this.file_);
this.drawGraph_(this.rawData_);
- } else {
- var req = new XMLHttpRequest();
- var caller = this;
- req.onreadystatechange = function () {
- if (req.readyState == 4) {
- if (req.status == 200) {
- caller.loadedEvent_(req.responseText);
+ } else if (typeof this.file_ == 'string') {
+ // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
+ if (this.file_.indexOf('\n') >= 0) {
+ this.loadedEvent_(this.file_);
+ } else {
+ var req = new XMLHttpRequest();
+ var caller = this;
+ req.onreadystatechange = function () {
+ if (req.readyState == 4) {
+ if (req.status == 200) {
+ caller.loadedEvent_(req.responseText);
+ }
}
- }
- };
+ };
- req.open("GET", this.file_, true);
- req.send(null);
+ req.open("GET", this.file_, true);
+ req.send(null);
+ }
+ } else {
+ this.error("Unknown data format: " + (typeof this.file_));
}
};
* </ul>
* @param {Object} attrs The new properties and values
*/
-DateGraph.prototype.updateOptions = function(attrs) {
- if (attrs.errorBars) {
- this.errorBars_ = attrs.errorBars;
- }
+Dygraph.prototype.updateOptions = function(attrs) {
+ // TODO(danvk): this is a mess. Rethink this function.
if (attrs.customBars) {
this.customBars_ = attrs.customBars;
}
- if (attrs.strokeWidth) {
- this.strokeWidth_ = attrs.strokeWidth;
- }
if (attrs.rollPeriod) {
this.rollPeriod_ = attrs.rollPeriod;
}
if (attrs.valueRange) {
this.valueRange_ = attrs.valueRange;
}
- MochiKit.Base.update(this.attrs_, attrs);
- if (typeof(attrs.labels) != 'undefined') {
- this.labels_ = attrs.labels;
- this.labelsFromCSV_ = (attrs.labels == null);
- }
- this.layout_.updateOptions({ 'errorBars': this.errorBars_ });
+ MochiKit.Base.update(this.user_attrs_, attrs);
+
+ this.labelsFromCSV_ = (this.attr_("labels") == null);
+
+ // TODO(danvk): this doesn't match the constructor logic
+ this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
if (attrs['file'] && attrs['file'] != this.file_) {
this.file_ = attrs['file'];
this.start_();
* reflect the new averaging period.
* @param {Number} length Number of days over which to average the data.
*/
-DateGraph.prototype.adjustRoll = function(length) {
+Dygraph.prototype.adjustRoll = function(length) {
this.rollPeriod_ = length;
this.drawGraph_(this.rawData_);
};
/**
- * A wrapper around DateGraph that implements the gviz API.
+ * A wrapper around Dygraph that implements the gviz API.
* @param {Object} container The DOM object the visualization should live in.
*/
-DateGraph.GVizChart = function(container) {
+Dygraph.GVizChart = function(container) {
this.container = container;
}
-DateGraph.GVizChart.prototype.draw = function(data, options) {
+Dygraph.GVizChart.prototype.draw = function(data, options) {
this.container.innerHTML = '';
- this.date_graph = new DateGraph(this.container, data, null, options || {});
+ this.date_graph = new Dygraph(this.container, data, options);
}
+
+// Older pages may still use this name.
+DateGraph = Dygraph;
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<style type="text/css">
<p>Hopefully this stays in its border:</p>
<div id="bordered" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- new DateGraph(document.getElementById('bordered'),
- data, null, {});
+ new Dygraph(document.getElementById('bordered'), data);
</script>
</body>
</html>
--- /dev/null
+<html>
+ <head>
+ <title>custom bars</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ <script type="text/javascript" src="data.js"></script>
+ </head>
+ <body>
+ <p>Top and bottom of the bars stay mostly fixed while the middle varies.</p>
+ <div id="graph"></div>
+
+ <script type="text/javascript">
+ new Dygraph(document.getElementById("graph"),
+ [
+ [1, [10, 10, 100]],
+ [2, [15, 20, 110]],
+ [3, [10, 30, 100]],
+ [4, [15, 40, 110]],
+ [5, [10, 120, 100]],
+ [6, [15, 50, 110]],
+ [7, [10, 70, 100]],
+ [8, [15, 90, 110]],
+ [9, [10, 50, 100]]
+ ], {
+ customBars: true,
+ errorBars: true
+ }
+ );
+ </script>
+ </body>
+</html>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<div id="g14" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g14 = new DateGraph(
+ g14 = new Dygraph(
document.getElementById("g14"),
- NoisyData, null, {
+ NoisyData, {
rollPeriod: 14,
errorBars: true,
- labelsDivWidth: 160,
+ labelsDivWidth: 100,
labelsDivStyles: {
'background-color': 'transparent',
- 'top': '10px'
+ 'top': '210px'
},
+ labelsSeparateLines: true,
padding: {
left: 40,
top: 0,
-function data() {
+function data_nolabel() {
return "" +
-"Date,High,Low\n" +
"20070101,62,39\n" +
"20070102,62,44\n" +
"20070103,62,42\n" +
"20071231,57,42\n";
}
+function data() {
+ return "Date,High,Low\n" + data_nolabel();
+}
+
function NoisyData() {
return "" +
"Date,A,B\n" +
--- /dev/null
+<html>
+ <head>
+ <title>noise</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <h2>Demo</h2>
+ <font size=-1>(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom out.)</font><br/>
+ <table><tr><td>
+ <div id="demodiv" style="width:480px; height:320px;"></div>
+ </td><td valign=top>
+ <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
+ </td>
+ </tr></table>
+ <script type="text/javascript">
+ g = new DateGraph(
+ document.getElementById("demodiv"),
+ function() {
+ var zp = function(x) { if (x < 10) return "0"+x; else return x; };
+ var r = "date,parabola,line,another line,sine wave\n";
+ for (var i=1; i<=31; i++) {
+ r += "200610" + zp(i);
+ r += "," + 10*(i*(31-i));
+ r += "," + 10*(8*i);
+ r += "," + 10*(250 - 8*i);
+ r += "," + 10*(125 + 125 * Math.sin(0.3*i));
+ r += "\n";
+ }
+ return r;
+ },
+ null,
+ {
+ rollPeriod: 1,
+ labelsDiv: document.getElementById('status'),
+ labelsSeparateLines: true,
+ labelsKMB: true,
+ colors: ["hsl(180,60,50)",
+ "rgb(255,100,100)",
+ "#00DD55",
+ "rgba(50,50,200,0.4)"],
+ padding: {left: 40, right: 30, top: 15, bottom: 15}
+ }
+ );
+ </script>
+</body>
+</html>
--- /dev/null
+<html>
+ <head>
+ <title>noise</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <p>Minimal example of a dygraph chart:</p>
+ <div id="graphdiv"></div>
+ <script type="text/javascript">
+ g = new Dygraph(document.getElementById("graphdiv"),
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n");
+ </script>
+
+ <p>Same data, specified in a parsed format:</p>
+ <div id="graphdiv2"></div>
+ <script type="text/javascript">
+ g2 = new Dygraph(document.getElementById("graphdiv2"),
+ [ [ new Date("2008/05/07"), 75],
+ [ new Date("2008/05/08"), 70],
+ [ new Date("2008/05/09"), 80]
+ ],
+ {
+ labels: [ "Date", "Temperature" ]
+ });
+ </script>
+ </body>
+</html>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<div id="g14" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g14 = new DateGraph(
+ g14 = new Dygraph(
document.getElementById("g14"),
- NoisyData, null, {
+ NoisyData, {
rollPeriod: 14,
errorBars: true,
gridLineColor: MochiKit.Color.Color.redColor(),
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
new google.visualization.LineChart(
document.getElementById('gviz')).draw(data, null);
- new DateGraph.GVizChart(
+ new Dygraph.GVizChart(
document.getElementById('dygraphs')).draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
</head>
<body>
<div id="gs" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("g"),
function HourlyData() {
return "" +
"2009/07/12 04:00:00,4,7\n" +
"2009/07/12 05:00:00,3,6\n" +
"2009/07/12 06:00:00,4,6"
- }, null, {}
+ }
);
- gm = new DateGraph(
+ gm = new Dygraph(
document.getElementById("gm"),
function() {
var ret = "Date,Hours,Minutes\n";
}
}
return ret;
- }, null, {}
+ }
);
- gs = new DateGraph(
+ gs = new Dygraph(
document.getElementById("gs"),
function() {
var ret = "Date,Minutes,Seconds\n";
}
}
return ret;
- }, null, {}
+ }
);
</script>
</body>
--- /dev/null
+<html>
+ <head>
+ <title>noise</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ <script type="text/javascript" src="data.js"></script>
+ </head>
+ <body>
+ <p>Chart with labels displayed in a separate div:</p>
+ <table><tr>
+ <td valign="top"><div id="graphdiv2"></div></td>
+ <td valign="top"> </td>
+ <td valign="top"><div id="labels"></div></td>
+ </tr></table>
+
+ <script type="text/javascript">
+ g2 = new Dygraph(document.getElementById("graphdiv2"),
+ data_nolabel,
+ {
+ labels: [ "High", "Low" ],
+ labelsDiv: document.getElementById("labels")
+ });
+ </script>
+ </body>
+</html>
--- /dev/null
+<html>
+ <head>
+ <title>Native Format</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <p>These two charts should be indistinguishable:</p>
+ <!-- <div id="graphdiv"></div> -->
+ <div id="graphdiv"></div>
+ <script type="text/javascript">
+ g = new Dygraph(document.getElementById("graphdiv"),
+ "x,A,B\n" +
+ "1,10,100\n" +
+ "2,20,80\n" +
+ "3,50,60\n" +
+ "4,70,80\n");
+ </script>
+
+ <p>Same data, specified in a parsed format:</p>
+ <div id="graphdiv2"></div>
+ <script type="text/javascript">
+ g2 = new Dygraph(document.getElementById("graphdiv2"),
+ [
+ [1,10,100],
+ [2,20,80],
+ [3,50,60],
+ [4,70,80],
+ ],
+ {
+ labels: [ "A", "B" ]
+ });
+ </script>
+ </body>
+</html>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<div id="g30" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("g"),
- NoisyData, null, {
+ NoisyData, {
rollPeriod: 7,
errorBars: true
}
);
- g30 = new DateGraph(
+ g30 = new Dygraph(
document.getElementById("g30"),
- NoisyData, null, {
+ NoisyData, {
rollPeriod: 14,
errorBars: true
}
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<div id="gviz" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("g"),
function() {
var ret = "X,Y1,Y2\n";
ret += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n";
}
return ret;
- }, null,
- {
- xValueParser: function(x) { return parseFloat(x); },
- xValueFormatter: function(x) { return x; },
- xTicker: DateGraph.prototype.numericTicks
- }
+ },
+ { }
);
google.load('visualization', '1', {packages: ['linechart']});
data.setCell(i, 2, i * (100-i) * 100/(50*50));
}
- new DateGraph.GVizChart(
+ new Dygraph.GVizChart(
document.getElementById('gviz')).draw(data,
{
- xValueParser: function(x) { return parseFloat(x); },
- xValueFormatter: function(x) { return x; },
- xTicker: DateGraph.prototype.numericTicks
});
}
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<div id="g2" style="width:300px; height:200px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("g"),
- data, null, {
+ data, {
rollPeriod: 7,
pixelsPerYLabel: 20
}
);
- g2 = new DateGraph(
+ g2 = new Dygraph(
document.getElementById("g2"),
- data, null, {
+ data, {
rollPeriod: 7,
pixelsPerYLabel: 20
}
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<div id="g30" style="width:600px; height:300px;"></div>
<script type="text/javascript">
- g = new DateGraph(
+ g = new Dygraph(
document.getElementById("g"),
- data, null, {}
+ data, {}
);
- g30 = new DateGraph(
+ g30 = new Dygraph(
document.getElementById("g30"),
- data, null, {
+ data, {
rollPeriod: 30
}
);
projects / dygraphs.git / commitdiff