--- /dev/null
+The dygraphs documentation uses server-side includes to enforce a consistent
+template between pages. As such, you can't load the docs files directly in your
+browser.
+
+To iterate locally on the docs, run:
+
+ cd (dygraphs)/docs
+ ./ssi_server.py
+
+Then visit localhost:8000 in your browser. You can edit/save/reload to see changes.
+
+To push documentation to the web, run:
+
+ cd (dygraphs)
+ ./push-to-web.sh user@site.com:directory
--- /dev/null
+- Let ssi_server be run from any directory (#include paths relative to file).
+- Set up ScrollSpy on options page.
+
+x Write docs on how to iterate with ssi_server.
+x Tweak display of "dygraphs" banner in nav.
+x Move per-axis.html into new site.
+x Get menu items to display in a stack on mobile.
+x Move div#main into header.html.
+x Reformat options.html to not look bad on mobile.
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>dygraphs annotations</title>
- <style type="text/css">
- code { white-space: pre; }
- pre { white-space: pre; }
- body { max-width: 800px; }
- </style>
- <!--[if IE]>
- <script type="text/javascript" src="excanvas.js"></script>
- <![endif]-->
- <script type="text/javascript" src="dygraph-combined.js"></script>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <h2>dygraphs Annotations</h2>
-
- <p>dygraphs lets you add annotations (markers) to individual points on your
- chart. These markers have a short bit of text or an icon that's displayed
- over the chart, plus a longer description that appears when you hover over
- them.</p>
-
- <h3>Demo: Dow Jones Industrial Average</h3>
- <div id="dow_chart" style="width: 800px; height: 250px;"></div>
- <script type="text/javascript">
- // From http://www.econstats.com/eqty/eq_d_mi_3.csv
- stockchart = new Dygraph(
- document.getElementById('dow_chart'),
- "dow.txt",
+<!--#include virtual="header.html" -->
+
+<style type="text/css">
+ code { white-space: pre; }
+ pre { white-space: pre; }
+ .annotation {
+ font-size: 12px !important;
+ }
+</style>
+
+<h2>dygraphs Annotations</h2>
+
+<p>dygraphs lets you add annotations (markers) to individual points on your
+chart. These markers have a short bit of text or an icon that's displayed
+over the chart, plus a longer description that appears when you hover over
+them.</p>
+
+<h3>Demo: Dow Jones Industrial Average</h3>
+<div id="dow_chart" style="width: 800px; height: 250px;"></div>
+<script type="text/javascript">
+ // From http://www.econstats.com/eqty/eq_d_mi_3.csv
+ stockchart = new Dygraph(
+ document.getElementById('dow_chart'),
+ "dow.txt",
+ {
+ showRoller: true,
+ customBars: true,
+ labelsKMB: true,
+ labelsDivWidth: 300,
+ drawCallback: function(g, is_initial) {
+ if (!is_initial) return;
+
+ g.setAnnotations( [
+ {
+ series: "Real",
+ x: "1929-08-15",
+ shortText: "A",
+ text: "1929 Stock Market Peak",
+ cssClass: 'annotation'
+ },
{
- showRoller: true,
- customBars: true,
- labelsKMB: true,
- labelsDivWidth: 300,
- drawCallback: function(g, is_initial) {
- if (!is_initial) return;
-
- g.setAnnotations( [
- {
- series: "Real",
- x: "1929-08-15",
- shortText: "A",
- text: "1929 Stock Market Peak"
- },
- {
- series: "Nominal",
- x: "1987-08-15",
- shortText: "B",
- text: "1987 Crash"
- },
- {
- series: "Nominal",
- x: "1999-12-15",
- shortText: "C",
- text: "1999 (.com) Peak"
- },
- {
- series: "Nominal",
- x: "2007-10-15",
- shortText: "D",
- text: "All-Time Market Peak"
- }
- ] );
- }
+ series: "Nominal",
+ x: "1987-08-15",
+ shortText: "B",
+ text: "1987 Crash",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "1999-12-15",
+ shortText: "C",
+ text: "1999 (.com) Peak",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "2007-10-15",
+ shortText: "D",
+ text: "All-Time Market Peak",
+ cssClass: 'annotation'
}
- );
- </script>
-
- <h3>Adding Annotations</h3>
-
- <p>There are two methods which are used to add, remove and modify annotations:</p>
-
- <table class="thinborder">
- <tr>
- <td><code>setAnnotations(array)</code></td>
- <td>Set the list of annotations currently displayed. This overwrites
- existing annotations and redraws the dygraph.</td>
- </tr>
- <tr>
- <td><code>annotations</code></td>
- <td>Returns an array of the currently-displayed annotations.</td>
- </tr>
- </table>
-
- <p>Calling <code>dygraph.setAnnotations(dygraph.annotations())</code> is a
- no-op: it simply causes the chart to refresh.</p>
-
- <p>Let's say we have a simple chart and wish to add an annotation. Here's how:</p>
-
- <div class="example" style="clear:both;">
- <div class="codeblock" style="float:left;width:400px;">
- <h3 style="text-align:center">HTML</h3>
+ ] );
+ }
+ }
+ );
+</script>
+
+<h3>Adding Annotations</h3>
+
+<p>There are two methods which are used to add, remove and modify annotations:</p>
+
+<table class="thinborder">
+<tr>
+ <td><code>setAnnotations(array)</code></td>
+ <td>Set the list of annotations currently displayed. This overwrites
+ existing annotations and redraws the dygraph.</td>
+</tr>
+<tr>
+ <td><code>annotations</code></td>
+ <td>Returns an array of the currently-displayed annotations.</td>
+</tr>
+</table>
+
+<p>Calling <code>dygraph.setAnnotations(dygraph.annotations())</code> is a
+no-op: it simply causes the chart to refresh.</p>
+
+<p>Let's say we have a simple chart and wish to add an annotation. Here's how:</p>
+
+ <div class="example" style="clear:both;">
+ <div class="codeblock" style="float:left;width:400px;">
+ <h3 style="text-align:center">HTML</h3>
<pre>
<script type="text/javascript">
g = new Dygraph(
]);
</script>
</pre>
- </div>
- <div class="codeoutput" style="float:left;">
- <h3 style="text-align:center">OUTPUT</h3>
- <div id="graphdiv" style="width: 350px; height: 250px;"></div>
- <script type="text/javascript">
- g = new Dygraph(
-
- // containing div
- document.getElementById("graphdiv"),
-
- // CSV or path to a CSV file.
- "Date,Temperature\n" +
- "2008-05-07,75\n" +
- "2008-05-08,70\n" +
- "2008-05-09,80\n"
- );
- g.setAnnotations([
- {
- series: "Temperature",
- x: "2008-05-08",
- shortText: "L",
- text: "Coldest Day"
- }
- ]);
- </script>
- </div>
- </div>
-
- <p style="clear:both">Annotations are JavaScript dictionaries. The <code>series</code> and <code>x</code> fields are required: they indicate which point the annotation should be attached to. If specified, <code>shortText</code> will appear on the annotation "flag". If you don't specify <code>shortText</code>, you can specify <code>icon</code> instead to display a small picture. The <code>text</code> parameter specifies hovertext. If you highlight the annotation and leave the mouse still, it will appear.</p>
-
- <p>If you are using <a href="http://dygraphs.com/data.html#array">native format</a>, you need to pass in a numeric value for the <code>x</code> field. For a numeric x-axis, simply pass in the x-value of the data point on which you wish to attach the annotation. For a date axis, pass in <code>Date.parse('YYYY/MM/DD')</code>. This returns milliseconds since epoch for the date.</p>
-
- <h3>Modifying Annotations</h3>
- <p>To remove or modify existing annotations, call the
- <code>annotations</code> method to get an array of annotations. Modify that
- array, then pass it back in to <code>setAnnotations</code>. For example, this
- code deletes the second annotation and changes the series to which the first
- is attached:</p>
-
- <pre>
- var annotations = g.annotations();
- annotations.splice(1,1); // remove the second annotation
- annotations[0].series = "Series 2";
- g.setAnnotations(annotations); // causes a redraw
- </pre>
-
- <p>For a more real-life example, see the <a
- href="tests/annotation.html">annotations demo</a></p>
-
- <h3>Annotations property reference</h3>
- <p>These properties can all be set in the dictionary for an annotation. The use of each one is demonstrated on the <a href="tests/annotation.html">annotations demo</a> page.</p>
-
- <table class="thinborder">
- <tr> <td><b>Property</b></td><td><b>Description</b></td> </tr>
- <tr><td><code>series</code></td> <td><i>Required</i> The name of the series to which the annotated point belongs.</td></tr>
- <tr><td><code>x</code></td><td><i>Required</i> The x value of the point. This should be the same as the value you specified in your CSV file, e.g. "2010-09-13".</td></tr>
- <tr><td><code>shortText</code></td><td>Text that will appear on the annotation's flag.</td></tr>
- <tr><td><code>text</code></td><td>A longer description of the annotation which will appear when the user hovers over it.</td></tr>
- <tr><td><code>icon</code></td><td>Specify in place of <code>shortText</code> to mark the annotation with an image rather than text. If you specify this, you must specify <code>width</code> and <code>height</code>.</td></tr>
- <tr><td><code>width</code></td><td>Width (in pixels) of the annotation flag or icon.</td></tr>
- <tr><td><code>height</code></td><td>Height (in pixels) of the annotation flag or icon.</td></tr>
- <tr><td><code>cssClass</code></td><td>CSS class to use for styling the annotation.</td></tr>
- <tr><td><code>tickHeight</code></td><td>Height of the tick mark (in pixels) connecting the point to its flag or icon.</td></tr>
- <tr><td><code>attachAtBottom</code></td><td>If true, attach annotations to the x-axis, rather than to actual points.</td></tr>
- <tr><td><code>clickHandler</code></td> <td>See Handlers, below</td></tr>
- <tr><td><code>mouseOverHandler</code></td><td>See Handlers, below</td></tr>
- <tr><td><code>mouseOutHandler</code></td> <td>See Handlers, below</td></tr>
- <tr><td><code>dblClickHandler</code></td> <td>See Handlers, below</td></tr>
- </table>
-
- <h3>Annotation event handlers</h3>
-
- <p>dygraphs lets you attach event handlers to your annotations. These can be
- specified globally (for all annotations) or on a per-annotation basis:</p>
-
- <table class="thinborder">
- <tr><td><b>Per-point field</b></td><td><b>Global option</b></td></tr>
- <tr><td><code>clickHandler</code></td> <td><code>annotationClickHandler</code></td></tr>
- <tr><td><code>mouseOverHandler</code></td><td><code>annotationMouseOverHandler</code></td></tr>
- <tr><td><code>mouseOutHandler</code></td> <td><code>annotationMouseOutHandler</code></td></tr>
- <tr><td><code>dblClickHandler</code></td> <td><code>annotationDblClickHandler</code></td></tr>
- </table>
-
- <p>These event handlers all take the same parameters:</p>
-
- <pre>
- g.updateOptions( {
- annotationClickHandler: function(annotation, point, dygraph, event) {
- // ... access/modify annotation.series, annotation.x, ...
+</div>
+
+<div class="codeoutput" style="float:left;">
+ <h3 style="text-align:center">OUTPUT</h3>
+ <div id="graphdiv" style="width: 350px; height: 250px;"></div>
+ <script type="text/javascript">
+ g = new Dygraph(
+
+ // containing div
+ document.getElementById("graphdiv"),
+
+ // CSV or path to a CSV file.
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n"
+ );
+ g.setAnnotations([
+ {
+ series: "Temperature",
+ x: "2008-05-08",
+ shortText: "L",
+ text: "Coldest Day"
}
- });
- </pre>
+ ]);
+ </script>
+</div>
+</div>
+
+<p style="clear:both">Annotations are JavaScript dictionaries. The <code>series</code> and <code>x</code> fields are required: they indicate which point the annotation should be attached to. If specified, <code>shortText</code> will appear on the annotation "flag". If you don't specify <code>shortText</code>, you can specify <code>icon</code> instead to display a small picture. The <code>text</code> parameter specifies hovertext. If you highlight the annotation and leave the mouse still, it will appear.</p>
+
+<p>If you are using <a href="http://dygraphs.com/data.html#array">native format</a>, you need to pass in a numeric value for the <code>x</code> field. For a numeric x-axis, simply pass in the x-value of the data point on which you wish to attach the annotation. For a date axis, pass in <code>Date.parse('YYYY/MM/DD')</code>. This returns milliseconds since epoch for the date.</p>
+
+<h3>Modifying Annotations</h3>
+<p>To remove or modify existing annotations, call the
+<code>annotations</code> method to get an array of annotations. Modify that
+array, then pass it back in to <code>setAnnotations</code>. For example, this
+code deletes the second annotation and changes the series to which the first
+is attached:</p>
+
+<pre>
+var annotations = g.annotations();
+annotations.splice(1,1); // remove the second annotation
+annotations[0].series = "Series 2";
+g.setAnnotations(annotations); // causes a redraw
+</pre>
- <p>Again, check out the <a href="tests/annotation.html">annotations demo</a>
- for concrete examples of usage of all these handlers.</p>
+<p>For a more real-life example, see the <a
+href="tests/annotation.html">annotations demo</a></p>
+
+<h3>Annotations property reference</h3>
+<p>These properties can all be set in the dictionary for an annotation. The use of each one is demonstrated on the <a href="tests/annotation.html">annotations demo</a> page.</p>
+
+<table class="thinborder">
+<tr> <td><b>Property</b></td><td><b>Description</b></td> </tr>
+<tr><td><code>series</code></td> <td><i>Required</i> The name of the series to which the annotated point belongs.</td></tr>
+<tr><td><code>x</code></td><td><i>Required</i> The x value of the point. This should be the same as the value you specified in your CSV file, e.g. "2010-09-13".</td></tr>
+<tr><td><code>shortText</code></td><td>Text that will appear on the annotation's flag.</td></tr>
+<tr><td><code>text</code></td><td>A longer description of the annotation which will appear when the user hovers over it.</td></tr>
+<tr><td><code>icon</code></td><td>Specify in place of <code>shortText</code> to mark the annotation with an image rather than text. If you specify this, you must specify <code>width</code> and <code>height</code>.</td></tr>
+<tr><td><code>width</code></td><td>Width (in pixels) of the annotation flag or icon.</td></tr>
+<tr><td><code>height</code></td><td>Height (in pixels) of the annotation flag or icon.</td></tr>
+<tr><td><code>cssClass</code></td><td>CSS class to use for styling the annotation.</td></tr>
+<tr><td><code>tickHeight</code></td><td>Height of the tick mark (in pixels) connecting the point to its flag or icon.</td></tr>
+<tr><td><code>attachAtBottom</code></td><td>If true, attach annotations to the x-axis, rather than to actual points.</td></tr>
+<tr><td><code>clickHandler</code></td> <td>See Handlers, below</td></tr>
+<tr><td><code>mouseOverHandler</code></td><td>See Handlers, below</td></tr>
+<tr><td><code>mouseOutHandler</code></td> <td>See Handlers, below</td></tr>
+<tr><td><code>dblClickHandler</code></td> <td>See Handlers, below</td></tr>
+</table>
+
+<h3>Annotation event handlers</h3>
+
+<p>dygraphs lets you attach event handlers to your annotations. These can be
+specified globally (for all annotations) or on a per-annotation basis:</p>
+
+<table class="thinborder">
+<tr><td><b>Per-point field</b></td><td><b>Global option</b></td></tr>
+<tr><td><code>clickHandler</code></td> <td><code>annotationClickHandler</code></td></tr>
+<tr><td><code>mouseOverHandler</code></td><td><code>annotationMouseOverHandler</code></td></tr>
+<tr><td><code>mouseOutHandler</code></td> <td><code>annotationMouseOutHandler</code></td></tr>
+<tr><td><code>dblClickHandler</code></td> <td><code>annotationDblClickHandler</code></td></tr>
+</table>
+
+<p>These event handlers all take the same parameters:</p>
+
+<pre>g.updateOptions( {
+ annotationClickHandler: function(annotation, point, dygraph, event) {
+ // ... access/modify annotation.series, annotation.x, ...
+ }
+}); </pre>
- <!-- Google Analytics -->
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-769809-2']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-</script>
+<p>Again, check out the <a href="tests/annotation.html">annotations demo</a>
+for concrete examples of usage of all these handlers.</p>
- </body>
-</html>
+<!--#include virtual="footer.html" -->
--- /dev/null
+/*!
+ * Bootstrap v3.0.0
+ *
+ * Copyright 2013 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by @mdo and @fat.
+ *//*! normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{margin:.67em 0;font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}mark{color:#000;background:#ff0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid #c0c0c0}legend{padding:0;border:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{padding:0;box-sizing:border-box}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@media print{*{color:#000!important;text-shadow:none!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:2cm .5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.table td,.table th{background-color:#fff!important}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table-bordered th,.table-bordered td{border:1px solid #ddd!important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.428571429;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#428bca;text-decoration:none}a:hover,a:focus{color:#2a6496;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}img{vertical-align:middle}.img-responsive{display:inline-block;height:auto;max-width:100%}.img-rounded{border-radius:6px}.img-circle{border-radius:500px}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16.099999999999998px;font-weight:200;line-height:1.4}@media(min-width:768px){.lead{font-size:21px}}small{font-size:85%}cite{font-style:normal}.text-muted{color:#999}.text-primary{color:#428bca}.text-warning{color:#c09853}.text-danger{color:#b94a48}.text-success{color:#468847}.text-info{color:#3a87ad}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;line-height:1.1}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small{font-weight:normal;line-height:1;color:#999}h1,h2,h3{margin-top:20px;margin-bottom:10px}h4,h5,h6{margin-top:10px;margin-bottom:10px}h1,.h1{font-size:38px}h2,.h2{font-size:32px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}h1 small,.h1 small{font-size:24px}h2 small,.h2 small{font-size:18px}h3 small,.h3 small,h4 small,.h4 small{font-size:14px}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-bottom:20px}dt,dd{line-height:1.428571429}dt{font-weight:bold}dd{margin-left:0}.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}.dl-horizontal dd:before,.dl-horizontal dd:after{display:table;content:" "}.dl-horizontal dd:after{clear:both}.dl-horizontal dd:before,.dl-horizontal dd:after{display:table;content:" "}.dl-horizontal dd:after{clear:both}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}abbr.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;border-left:5px solid #eee}blockquote p{font-size:17.5px;font-weight:300;line-height:1.25}blockquote p:last-child{margin-bottom:0}blockquote small{display:block;line-height:1.428571429;color:#999}blockquote small:before{content:'\2014 \00A0'}blockquote.pull-right{float:right;padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}blockquote.pull-right p,blockquote.pull-right small{text-align:right}blockquote.pull-right small:before{content:''}blockquote.pull-right small:after{content:'\00A0 \2014'}q:before,q:after,blockquote:before,blockquote:after{content:""}address{display:block;margin-bottom:20px;font-style:normal;line-height:1.428571429}code,pre{font-family:Monaco,Menlo,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;white-space:nowrap;background-color:#f9f2f4;border-radius:4px}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.428571429;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre.prettyprint{margin-bottom:20px}pre code{padding:0;color:inherit;white-space:pre-wrap;background-color:transparent;border:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{margin-right:auto;margin-left:auto}.container:before,.container:after{display:table;content:" "}.container:after{clear:both}.container:before,.container:after{display:table;content:" "}.container:after{clear:both}.row:before,.row:after{display:table;content:" "}.row:after{clear:both}.row:before,.row:after{display:table;content:" "}.row:after{clear:both}@media(min-width:768px){.row{margin-right:-15px;margin-left:-15px}}.row .row{margin-right:-15px;margin-left:-15px}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left}.col-1{width:8.333333333333332%}.col-2{width:16.666666666666664%}.col-3{width:25%}.col-4{width:33.33333333333333%}.col-5{width:41.66666666666667%}.col-6{width:50%}.col-7{width:58.333333333333336%}.col-8{width:66.66666666666666%}.col-9{width:75%}.col-10{width:83.33333333333334%}.col-11{width:91.66666666666666%}.col-12{width:100%}@media(min-width:768px){.container{max-width:728px}.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left}.col-sm-1{width:8.333333333333332%}.col-sm-2{width:16.666666666666664%}.col-sm-3{width:25%}.col-sm-4{width:33.33333333333333%}.col-sm-5{width:41.66666666666667%}.col-sm-6{width:50%}.col-sm-7{width:58.333333333333336%}.col-sm-8{width:66.66666666666666%}.col-sm-9{width:75%}.col-sm-10{width:83.33333333333334%}.col-sm-11{width:91.66666666666666%}.col-sm-12{width:100%}.col-push-1{left:8.333333333333332%}.col-push-2{left:16.666666666666664%}.col-push-3{left:25%}.col-push-4{left:33.33333333333333%}.col-push-5{left:41.66666666666667%}.col-push-6{left:50%}.col-push-7{left:58.333333333333336%}.col-push-8{left:66.66666666666666%}.col-push-9{left:75%}.col-push-10{left:83.33333333333334%}.col-push-11{left:91.66666666666666%}.col-pull-1{right:8.333333333333332%}.col-pull-2{right:16.666666666666664%}.col-pull-3{right:25%}.col-pull-4{right:33.33333333333333%}.col-pull-5{right:41.66666666666667%}.col-pull-6{right:50%}.col-pull-7{right:58.333333333333336%}.col-pull-8{right:66.66666666666666%}.col-pull-9{right:75%}.col-pull-10{right:83.33333333333334%}.col-pull-11{right:91.66666666666666%}}@media(min-width:992px){.container{max-width:940px}.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left}.col-lg-1{width:8.333333333333332%}.col-lg-2{width:16.666666666666664%}.col-lg-3{width:25%}.col-lg-4{width:33.33333333333333%}.col-lg-5{width:41.66666666666667%}.col-lg-6{width:50%}.col-lg-7{width:58.333333333333336%}.col-lg-8{width:66.66666666666666%}.col-lg-9{width:75%}.col-lg-10{width:83.33333333333334%}.col-lg-11{width:91.66666666666666%}.col-lg-12{width:100%}.col-offset-1{margin-left:8.333333333333332%}.col-offset-2{margin-left:16.666666666666664%}.col-offset-3{margin-left:25%}.col-offset-4{margin-left:33.33333333333333%}.col-offset-5{margin-left:41.66666666666667%}.col-offset-6{margin-left:50%}.col-offset-7{margin-left:58.333333333333336%}.col-offset-8{margin-left:66.66666666666666%}.col-offset-9{margin-left:75%}.col-offset-10{margin-left:83.33333333333334%}.col-offset-11{margin-left:91.66666666666666%}}@media(min-width:1200px){.container{max-width:1170px}}table{max-width:100%;background-color:transparent}th{text-align:left}.table{width:100%;margin-bottom:20px}.table thead>tr>th,.table tbody>tr>th,.table tfoot>tr>th,.table thead>tr>td,.table tbody>tr>td,.table tfoot>tr>td{padding:8px;line-height:1.428571429;vertical-align:top;border-top:1px solid #ddd}.table thead>tr>th{vertical-align:bottom}.table caption+thead tr:first-child th,.table colgroup+thead tr:first-child th,.table thead:first-child tr:first-child th,.table caption+thead tr:first-child td,.table colgroup+thead tr:first-child td,.table thead:first-child tr:first-child td{border-top:0}.table tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed thead>tr>th,.table-condensed tbody>tr>th,.table-condensed tfoot>tr>th,.table-condensed thead>tr>td,.table-condensed tbody>tr>td,.table-condensed tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:#f5f5f5}table col[class^="col-"]{display:table-column;float:none}table td[class^="col-"],table th[class^="col-"]{display:table-cell;float:none}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8;border-color:#d6e9c6}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede;border-color:#eed3d7}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#fcf8e3;border-color:#fbeed5}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td{background-color:#d0e9c6;border-color:#c9e2b3}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td{background-color:#ebcccc;border-color:#e6c1c7}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td{background-color:#faf2cc;border-color:#f8e5be}fieldset{padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;margin-bottom:5px;font-weight:bold}input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type="file"]{display:block}select[multiple],select[size]{height:auto}select optgroup{font-family:inherit;font-size:inherit;font-style:inherit}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{height:auto}.form-control:-moz-placeholder{color:#999}.form-control::-moz-placeholder{color:#999}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control{display:block;width:100%;height:38px;padding:8px 12px;font-size:14px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:rgba(82,168,236,0.8);outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{cursor:not-allowed;background-color:#eee}textarea.form-control{height:auto}.form-group{margin-bottom:15px}.radio,.checkbox{display:block;min-height:20px;padding-left:20px;margin-top:10px;margin-bottom:10px;vertical-align:middle}.radio label,.checkbox label{display:inline;margin-bottom:0;font-weight:normal;cursor:pointer}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{float:left;margin-left:-20px}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}.radio-inline,.checkbox-inline{display:inline-block;padding-left:20px;margin-bottom:0;font-weight:normal;vertical-align:middle;cursor:pointer}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-top:0;margin-left:10px}.form-control.input-large{height:56px;padding:14px 16px;font-size:18px;border-radius:6px}.form-control.input-small{height:30px;padding:5px 10px;font-size:12px;border-radius:3px}select.input-large{height:56px;line-height:56px}select.input-small{height:30px;line-height:30px}.has-warning .help-block,.has-warning .control-label{color:#c09853}.has-warning .form-control{padding-right:32px;border-color:#c09853;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-warning .form-control:focus{border-color:#a47e3c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #dbc59e}.has-warning .input-group-addon{color:#c09853;background-color:#fcf8e3;border-color:#c09853}.has-error .help-block,.has-error .control-label{color:#b94a48}.has-error .form-control{padding-right:32px;border-color:#b94a48;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-error .form-control:focus{border-color:#953b39;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #d59392}.has-error .input-group-addon{color:#b94a48;background-color:#f2dede;border-color:#b94a48}.has-success .help-block,.has-success .control-label{color:#468847}.has-success .form-control{padding-right:32px;border-color:#468847;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-success .form-control:focus{border-color:#356635;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #7aba7b}.has-success .input-group-addon{color:#468847;background-color:#dff0d8;border-color:#468847}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}.btn{display:inline-block;padding:8px 12px;margin-bottom:0;font-size:14px;font-weight:500;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:4px}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus{color:#fff;text-decoration:none}.btn:active,.btn.active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{pointer-events:none;cursor:default;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.btn-default{color:#fff;background-color:#474949;border-color:#474949}.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active{background-color:#3a3c3c;border-color:#2e2f2f}.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active{background-color:#474949;border-color:#474949}.btn-primary{color:#fff;background-color:#428bca;border-color:#428bca}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{background-color:#357ebd;border-color:#3071a9}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#428bca;border-color:#428bca}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{background-color:#eea236;border-color:#ec971f}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#f0ad4e}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d9534f}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active{background-color:#d43f3a;border-color:#c9302c}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d9534f}.btn-success{color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{background-color:#4cae4c;border-color:#449d44}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#5cb85c}.btn-info{color:#fff;background-color:#5bc0de;border-color:#5bc0de}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{background-color:#46b8da;border-color:#31b0d5}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#5bc0de}.btn-link{font-weight:normal;color:#428bca;cursor:pointer;border-radius:0}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#2a6496;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#333;text-decoration:none}.btn-large{padding:14px 16px;font-size:18px;border-radius:6px}.btn-small{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%;padding-right:0;padding-left:0}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}.input-group{display:table;border-collapse:separate}.input-group.col{float:none;padding-right:0;padding-left:0}.input-group .form-control{width:100%;margin-bottom:0}.input-group-addon,.input-group-btn,.input-group .form-control{display:table-cell}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:8px 12px;font-size:14px;font-weight:normal;line-height:1.428571429;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-group-addon.input-small{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-large{padding:14px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-4px}.input-group-btn>.btn:hover,.input-group-btn>.btn:active{z-index:2}.form-inline .form-control,.form-inline .radio,.form-inline .checkbox{display:inline-block}.form-inline .radio,.form-inline .checkbox{margin-top:0;margin-bottom:0}.form-horizontal .control-label{padding-top:9px}.form-horizontal .form-group:before,.form-horizontal .form-group:after{display:table;content:" "}.form-horizontal .form-group:after{clear:both}.form-horizontal .form-group:before,.form-horizontal .form-group:after{display:table;content:" "}.form-horizontal .form-group:after{clear:both}@media(min-width:768px){.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}}.form-horizontal .form-group .row{margin-right:-15px;margin-left:-15px}@media(min-width:768px){.form-horizontal .control-label{text-align:right}}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;content:""}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.428571429;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{color:#fff;text-decoration:none;background-color:#357ebd;background-image:-webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#357ebd));background-image:-webkit-linear-gradient(top,#428bca,0%,#357ebd,100%);background-image:-moz-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:linear-gradient(to bottom,#428bca 0,#357ebd 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff357ebd',GradientType=0)}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#357ebd;background-image:-webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#357ebd));background-image:-webkit-linear-gradient(top,#428bca,0%,#357ebd,100%);background-image:-moz-linear-gradient(top,#428bca 0,#357ebd 100%);background-image:linear-gradient(to bottom,#428bca 0,#357ebd 100%);background-repeat:repeat-x;outline:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff357ebd',GradientType=0)}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.428571429;color:#999}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px solid #000;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:1px}.list-group{padding-left:0;margin-bottom:20px;background-color:#fff}.list-group-item{position:relative;display:block;padding:10px 30px 10px 15px;margin-bottom:-1px;border:1px solid #ddd}.list-group-item:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.list-group-item>.badge{float:right;margin-right:-15px}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}a.list-group-item .list-group-item-heading{color:#333}a.list-group-item .list-group-item-text{color:#555}a.list-group-item:hover,a.list-group-item:focus{text-decoration:none;background-color:#f5f5f5}a.list-group-item.active{z-index:2;color:#fff;background-color:#428bca;border-color:#428bca}a.list-group-item.active .list-group-item-heading{color:inherit}a.list-group-item.active .list-group-item-text{color:#e1edf7}.panel{padding:15px;margin-bottom:20px;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.panel-heading{padding:10px 15px;margin:-15px -15px 15px;background-color:#f5f5f5;border-bottom:1px solid #ddd;border-top-right-radius:3px;border-top-left-radius:3px}.panel-title{margin-top:0;margin-bottom:0;font-size:17.5px;font-weight:500}.panel-footer{padding:10px 15px;margin:15px -15px -15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel-primary{border-color:#428bca}.panel-primary .panel-heading{color:#fff;background-color:#428bca;border-color:#428bca}.panel-success{border-color:#d6e9c6}.panel-success .panel-heading{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.panel-warning{border-color:#fbeed5}.panel-warning .panel-heading{color:#c09853;background-color:#fcf8e3;border-color:#fbeed5}.panel-danger{border-color:#eed3d7}.panel-danger .panel-heading{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.panel-info{border-color:#bce8f1}.panel-info .panel-heading{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.list-group-flush{margin:15px -15px -15px}.list-group-flush .list-group-item{border-width:1px 0}.list-group-flush .list-group-item:first-child{border-top-right-radius:0;border-top-left-radius:0}.list-group-flush .list-group-item:last-child{border-bottom:0}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-large{padding:24px;border-radius:6px}.well-small{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav:before,.nav:after{display:table;content:" "}.nav:after{clear:both}.nav:before,.nav:after{display:table;content:" "}.nav:after{clear:both}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#999}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{color:#999;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav.open>a,.nav.open>a:hover,.nav.open>a:focus{color:#fff;background-color:#428bca;border-color:#428bca}.nav.open>a .caret,.nav.open>a:hover .caret,.nav.open>a:focus .caret{border-top-color:#fff;border-bottom-color:#fff}.nav>.pull-right{float:right}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.428571429;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{display:table-cell;float:none;width:1%}.nav-tabs.nav-justified>li>a{text-align:center}.nav-tabs.nav-justified>li>a{margin-right:0;border-bottom:1px solid #ddd}.nav-tabs.nav-justified>.active>a{border-bottom-color:#fff}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:5px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:#fff;background-color:#428bca}.nav-stacked>li{float:none}.nav-stacked>li+li>a{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{display:table-cell;float:none;width:1%}.nav-justified>li>a{text-align:center}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-bottom:1px solid #ddd}.nav-tabs-justified>.active>a{border-bottom-color:#fff}.tabbable:before,.tabbable:after{display:table;content:" "}.tabbable:after{clear:both}.tabbable:before,.tabbable:after{display:table;content:" "}.tabbable:after{clear:both}.tab-content>.tab-pane,.pill-content>.pill-pane{display:none}.tab-content>.active,.pill-content>.active{display:block}.nav .caret{border-top-color:#428bca;border-bottom-color:#428bca}.nav a:hover .caret{border-top-color:#2a6496;border-bottom-color:#2a6496}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}.navbar{position:relative;min-height:50px;padding-right:15px;padding-left:15px;margin-bottom:20px;background-color:#eee;border-radius:4px}.navbar:before,.navbar:after{display:table;content:" "}.navbar:after{clear:both}.navbar:before,.navbar:after{display:table;content:" "}.navbar:after{clear:both}.navbar-nav{margin-top:10px;margin-bottom:15px}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px;line-height:20px;color:#777;border-radius:4px}.navbar-nav>li>a:hover,.navbar-nav>li>a:focus{color:#333;background-color:transparent}.navbar-nav>.active>a,.navbar-nav>.active>a:hover,.navbar-nav>.active>a:focus{color:#555;background-color:#d5d5d5}.navbar-nav>.disabled>a,.navbar-nav>.disabled>a:hover,.navbar-nav>.disabled>a:focus{color:#ccc;background-color:transparent}.navbar-nav.pull-right{width:100%}.navbar-static-top{border-radius:0}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030;border-radius:0}.navbar-fixed-top{top:0}.navbar-fixed-bottom{bottom:0;margin-bottom:0}.navbar-brand{display:block;max-width:200px;padding:15px 15px;margin-right:auto;margin-left:auto;font-size:18px;font-weight:500;line-height:20px;color:#777;text-align:center}.navbar-brand:hover,.navbar-brand:focus{color:#5e5e5e;text-decoration:none;background-color:transparent}.navbar-toggle{position:absolute;top:9px;right:10px;width:48px;height:32px;padding:8px 12px;background-color:transparent;border:1px solid #ddd;border-radius:4px}.navbar-toggle:hover,.navbar-toggle:focus{background-color:#ddd}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;background-color:#ccc;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}.navbar-form{margin-top:6px;margin-bottom:6px}.navbar-form .form-control,.navbar-form .radio,.navbar-form .checkbox{display:inline-block}.navbar-form .radio,.navbar-form .checkbox{margin-top:0;margin-bottom:0}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-nav>.dropdown>a:hover .caret,.navbar-nav>.dropdown>a:focus .caret{border-top-color:#333;border-bottom-color:#333}.navbar-nav>.open>a,.navbar-nav>.open>a:hover,.navbar-nav>.open>a:focus{color:#555;background-color:#d5d5d5}.navbar-nav>.open>a .caret,.navbar-nav>.open>a:hover .caret,.navbar-nav>.open>a:focus .caret{border-top-color:#555;border-bottom-color:#555}.navbar-nav>.dropdown>a .caret{border-top-color:#777;border-bottom-color:#777}.navbar-nav.pull-right>li>.dropdown-menu,.navbar-nav>li>.dropdown-menu.pull-right{right:0;left:auto}.navbar-inverse{background-color:#222}.navbar-inverse .navbar-brand{color:#999}.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#999}.navbar-inverse .navbar-nav>li>a{color:#999}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.dropdown>a:hover .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-inverse .navbar-nav>.dropdown>a .caret{border-top-color:#999;border-bottom-color:#999}.navbar-inverse .navbar-nav>.open>a .caret,.navbar-inverse .navbar-nav>.open>a:hover .caret,.navbar-inverse .navbar-nav>.open>a:focus .caret{border-top-color:#fff;border-bottom-color:#fff}@media screen and (min-width:768px){.navbar-brand{float:left;margin-right:5px;margin-left:-15px}.navbar-nav{float:left;margin-top:0;margin-bottom:0}.navbar-nav>li{float:left}.navbar-nav>li>a{border-radius:0}.navbar-nav.pull-right{float:right;width:auto}.navbar-toggle{position:relative;top:auto;left:auto;display:none}.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}}.navbar-btn{margin-top:6px}.navbar-text{margin-top:15px;margin-bottom:15px}.navbar-link{color:#777}.navbar-link:hover{color:#333}.navbar-inverse .navbar-link{color:#999}.navbar-inverse .navbar-link:hover{color:#fff}.btn .caret{border-top-color:#fff}.dropup .btn .caret{border-bottom-color:#fff}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:active,.btn-group-vertical>.btn:active{z-index:2}.btn-group .btn+.btn{margin-left:-1px}.btn-toolbar:before,.btn-toolbar:after{display:table;content:" "}.btn-toolbar:after{clear:both}.btn-toolbar:before,.btn-toolbar:after{display:table;content:" "}.btn-toolbar:after{clear:both}.btn-toolbar .btn-group{float:left}.btn-toolbar>.btn+.btn,.btn-toolbar>.btn-group+.btn,.btn-toolbar>.btn+.btn-group,.btn-toolbar>.btn-group+.btn-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child>.btn:last-child,.btn-group>.btn-group:first-child>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-large+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn .caret{margin-left:0}.btn-large .caret{border-width:5px}.dropup .btn-large .caret{border-bottom-width:5px}.btn-group-vertical>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn+.btn{margin-top:-1px}.btn-group-vertical .btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical .btn:first-child{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical .btn:last-child{border-top-right-radius:0;border-top-left-radius:0}.btn-group-justified{display:table;width:100%}.btn-group-justified .btn{display:table-cell;float:none;width:1%}.btn-group[data-toggle="buttons"]>.btn>input[type="radio"],.btn-group[data-toggle="buttons"]>.btn>input[type="checkbox"]{display:none}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#999}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{float:left;padding:4px 12px;line-height:1.428571429;text-decoration:none;background-color:#fff;border:1px solid #ddd;border-left-width:0}.pagination>li:first-child>a,.pagination>li:first-child>span{border-left-width:1px;border-bottom-left-radius:4px;border-top-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:hover,.pagination>li>a:focus,.pagination>.active>a,.pagination>.active>span{background-color:#f5f5f5}.pagination>.active>a,.pagination>.active>span{color:#999;cursor:default}.pagination>.disabled>span,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#999;cursor:not-allowed;background-color:#fff}.pagination-large>li>a,.pagination-large>li>span{padding:14px 16px;font-size:18px}.pagination-large>li:first-child>a,.pagination-large>li:first-child>span{border-bottom-left-radius:6px;border-top-left-radius:6px}.pagination-large>li:last-child>a,.pagination-large>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-small>li>a,.pagination-small>li>span{padding:5px 10px;font-size:12px}.pagination-small>li:first-child>a,.pagination-small>li:first-child>span{border-bottom-left-radius:3px;border-top-left-radius:3px}.pagination-small>li:last-child>a,.pagination-small>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager:before,.pager:after{display:table;content:" "}.pager:after{clear:both}.pager:before,.pager:after{display:table;content:" "}.pager:after{clear:both}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#f5f5f5}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#999;cursor:not-allowed;background-color:#fff}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;display:none;overflow:auto;overflow-y:scroll}.modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal.fade.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.modal-dialog{z-index:1050;width:auto;padding:10px;margin-right:auto;margin-left:auto}.modal-content{position:relative;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,0.5);box-shadow:0 3px 9px rgba(0,0,0,0.5);background-clip:padding-box}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1030;background-color:#000}.modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)}.modal-backdrop.fade.in{opacity:.5;filter:alpha(opacity=50)}.modal-header{min-height:16.428571429px;padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.428571429}.modal-body{position:relative;padding:20px}.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer:before,.modal-footer:after{display:table;content:" "}.modal-footer:after{clear:both}.modal-footer:before,.modal-footer:after{display:table;content:" "}.modal-footer:after{clear:both}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}@media screen and (min-width:768px){.modal-dialog{right:auto;left:50%;width:600px;padding-top:30px;padding-bottom:30px}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.5);box-shadow:0 5px 15px rgba(0,0,0,0.5)}}.tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}.tooltip.in{opacity:1;filter:alpha(opacity=100)}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:rgba(0,0,0,0.9);border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:rgba(0,0,0,0.9);border-width:5px 5px 0}.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:rgba(0,0,0,0.9);border-width:5px 5px 0}.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:rgba(0,0,0,0.9);border-width:5px 5px 0}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:rgba(0,0,0,0.9);border-width:5px 5px 5px 0}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:rgba(0,0,0,0.9);border-width:5px 0 5px 5px}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:rgba(0,0,0,0.9);border-width:0 5px 5px}.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:rgba(0,0,0,0.9);border-width:0 5px 5px}.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:rgba(0,0,0,0.9);border-width:0 5px 5px}.popover{position:absolute;top:0;left:0;z-index:1010;display:none;max-width:276px;padding:1px;text-align:left;white-space:normal;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);background-clip:padding-box;-webkit-bg-clip:padding-box;-moz-bg-clip:padding}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:normal;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover .arrow,.popover .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover .arrow{border-width:11px}.popover .arrow:after{border-width:10px;content:""}.popover.top .arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,0.25);border-bottom-width:0}.popover.top .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#fff;border-bottom-width:0;content:" "}.popover.right .arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,0.25);border-left-width:0}.popover.right .arrow:after{bottom:-10px;left:1px;border-right-color:#fff;border-left-width:0;content:" "}.popover.bottom .arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,0.25);border-top-width:0}.popover.bottom .arrow:after{top:1px;margin-left:-10px;border-bottom-color:#fff;border-top-width:0;content:" "}.popover.left .arrow{top:50%;right:-11px;margin-top:-11px;border-left-color:#999;border-left-color:rgba(0,0,0,0.25);border-right-width:0}.popover.left .arrow:after{right:1px;bottom:-10px;border-left-color:#fff;border-right-width:0;content:" "}.alert{padding:10px 35px 10px 15px;margin-bottom:20px;color:#c09853;background-color:#fcf8e3;border:1px solid #fbeed5;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert hr{border-top-color:#f8e5be}.alert .alert-link{font-weight:500;color:#a47e3c}.alert .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#356635}.alert-danger{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.alert-danger hr{border-top-color:#e6c1c7}.alert-danger .alert-link{color:#953b39}.alert-info{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#2d6987}.alert-block{padding-top:15px;padding-bottom:15px}.alert-block>p,.alert-block>ul{margin-bottom:0}.alert-block p+p{margin-top:5px}.thumbnail,.img-thumbnail{padding:4px;line-height:1.428571429;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.thumbnail{display:block}.thumbnail>img,.img-thumbnail{display:inline-block;height:auto;max-width:100%}a.thumbnail:hover,a.thumbnail:focus{border-color:#428bca}.thumbnail>img{margin-right:auto;margin-left:auto}.thumbnail .caption{padding:9px;color:#333}.media,.media-body{overflow:hidden;zoom:1}.media,.media .media{margin-top:15px}.media:first-child{margin-top:0}.media-object{display:block}.media-heading{margin:0 0 5px}.media>.pull-left{margin-right:10px}.media>.pull-right{margin-left:10px}.media-list{padding-left:0;list-style:none}.label{display:inline;padding:.25em .6em;font-size:75%;font-weight:500;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#999;border-radius:.25em}.label[href]:hover,.label[href]:focus{color:#fff;text-decoration:none;cursor:pointer;background-color:#808080}.label-danger{background-color:#d9534f}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#c9302c}.label-success{background-color:#5cb85c}.label-success[href]:hover,.label-success[href]:focus{background-color:#449d44}.label-warning{background-color:#f0ad4e}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#ec971f}.label-info{background-color:#5bc0de}.label-info[href]:hover,.label-info[href]:focus{background-color:#31b0d5}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#999;border-radius:10px}.badge:empty{display:none}a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}.btn .badge{position:relative;top:-1px}a.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#428bca;background-color:#fff}.nav-pills>li>a>.badge{margin-left:3px}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-moz-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-ms-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;color:#fff;text-align:center;background-color:#428bca;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width .6s ease;transition:width .6s ease}.progress-striped .progress-bar{background-color:#428bca;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:40px 40px}.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;-ms-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-color:#d9534f;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-color:#5cb85c;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-color:#f0ad4e;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-color:#5bc0de;background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}.accordion{margin-bottom:20px}.accordion-group{margin-bottom:2px;border:1px solid #e5e5e5;border-radius:4px}.accordion-heading{border-bottom:0}.accordion-heading .accordion-toggle{display:block;padding:8px 15px;cursor:pointer}.accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:inline-block;height:auto;max-width:100%;line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.6);opacity:.5;filter:alpha(opacity=50)}.carousel-control.left{background-color:rgba(0,0,0,0.0001);background-color:transparent;background-image:-webkit-gradient(linear,0 top,100% top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0.0001)));background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,0.5) 0),color-stop(rgba(0,0,0,0.0001) 100%));background-image:-moz-linear-gradient(left,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.0001) 100%);background-image:linear-gradient(to right,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.0001) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=1)}.carousel-control.right{right:0;left:auto;background-color:rgba(0,0,0,0.5);background-color:transparent;background-image:-webkit-gradient(linear,0 top,100% top,from(rgba(0,0,0,0.0001)),to(rgba(0,0,0,0.5)));background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,0.0001) 0),color-stop(rgba(0,0,0,0.5) 100%));background-image:-moz-linear-gradient(left,rgba(0,0,0,0.0001) 0,rgba(0,0,0,0.5) 100%);background-image:linear-gradient(to right,rgba(0,0,0,0.0001) 0,rgba(0,0,0,0.5) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=1)}.carousel-control:hover,.carousel-control:focus{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon,.carousel-control .icon-prev,.carousel-control .icon-next{position:absolute;top:50%;left:50%;z-index:5;display:inline-block;width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:120px;padding-left:0;margin-left:-60px;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon,.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.jumbotron{padding:30px;margin-bottom:30px;font-size:21px;font-weight:200;line-height:2.1428571435;color:inherit;background-color:#eee}.jumbotron h1{line-height:1;color:inherit}.jumbotron p{line-height:1.4}@media screen and (min-width:768px){.jumbotron{padding:50px 60px;border-radius:6px}.jumbotron h1{font-size:63px}}.clearfix:before,.clearfix:after{display:table;content:" "}.clearfix:after{clear:both}.pull-right{float:right}.pull-left{float:left}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.affix{position:fixed}@-ms-viewport{width:device-width}@media screen and (max-width:400px){@-ms-viewport{width:320px}}.hidden{display:none!important;visibility:hidden!important}.visible-sm{display:block!important}tr.visible-sm{display:table-row!important}th.visible-sm,td.visible-sm{display:table-cell!important}.visible-md{display:none!important}tr.visible-md{display:none!important}th.visible-md,td.visible-md{display:none!important}.visible-lg{display:none!important}tr.visible-lg{display:none!important}th.visible-lg,td.visible-lg{display:none!important}.hidden-sm{display:none!important}tr.hidden-sm{display:none!important}th.hidden-sm,td.hidden-sm{display:none!important}.hidden-md{display:block!important}tr.hidden-md{display:table-row!important}th.hidden-md,td.hidden-md{display:table-cell!important}.hidden-lg{display:block!important}tr.hidden-lg{display:table-row!important}th.hidden-lg,td.hidden-lg{display:table-cell!important}@media(min-width:768px) and (max-width:991px){.visible-sm{display:none!important}tr.visible-sm{display:none!important}th.visible-sm,td.visible-sm{display:none!important}.visible-md{display:block!important}tr.visible-md{display:table-row!important}th.visible-md,td.visible-md{display:table-cell!important}.visible-lg{display:none!important}tr.visible-lg{display:none!important}th.visible-lg,td.visible-lg{display:none!important}.hidden-sm{display:block!important}tr.hidden-sm{display:table-row!important}th.hidden-sm,td.hidden-sm{display:table-cell!important}.hidden-md{display:none!important}tr.hidden-md{display:none!important}th.hidden-md,td.hidden-md{display:none!important}.hidden-lg{display:block!important}tr.hidden-lg{display:table-row!important}th.hidden-lg,td.hidden-lg{display:table-cell!important}}@media(min-width:992px){.visible-sm{display:none!important}tr.visible-sm{display:none!important}th.visible-sm,td.visible-sm{display:none!important}.visible-md{display:none!important}tr.visible-md{display:none!important}th.visible-md,td.visible-md{display:none!important}.visible-lg{display:block!important}tr.visible-lg{display:table-row!important}th.visible-lg,td.visible-lg{display:table-cell!important}.hidden-sm{display:block!important}tr.hidden-sm{display:table-row!important}th.hidden-sm,td.hidden-sm{display:table-cell!important}.hidden-md{display:block!important}tr.hidden-md{display:table-row!important}th.hidden-md,td.hidden-md{display:table-cell!important}.hidden-lg{display:none!important}tr.hidden-lg{display:none!important}th.hidden-lg,td.hidden-lg{display:none!important}}.visible-print{display:none!important}tr.visible-print{display:none!important}th.visible-print,td.visible-print{display:none!important}@media print{.visible-print{display:block!important}tr.visible-print{display:table-row!important}th.visible-print,td.visible-print{display:table-cell!important}.hidden-print{display:none!important}tr.hidden-print{display:none!important}th.hidden-print,td.hidden-print{display:none!important}}
\ No newline at end of file
--- /dev/null
+/**
+* bootstrap.js v3.0.0 by @fat and @mdo
+* Copyright 2013 Twitter Inc.
+* http://www.apache.org/licenses/LICENSE-2.0
+*/
+if(!jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]}}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("webkitTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger("webkitTransitionEnd")};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(window.jQuery),+function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function c(){f.trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one(a.support.transition.end,c).emulateTransitionEnd(150):c())};var d=a.fn.alert;a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("bs.alert");e||d.data("bs.alert",e=new c(this)),"string"==typeof b&&e[b].call(d)})},a.fn.alert.Constructor=c,a.fn.alert.noConflict=function(){return a.fn.alert=d,this},a(document).on("click.bs.alert.data-api",b,c.prototype.close)}(window.jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d)};b.DEFAULTS={loadingText:"loading..."},b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.is("input")?"val":"html",e=c.data();a+="Text",e.resetText||c.data("resetText",c[d]()),c[d](e[a]||this.options[a]),setTimeout(function(){"loadingText"==a?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.closest('[data-toggle="buttons"]');if(a.length){var b=this.$element.find("input").prop("checked",!this.$element.hasClass("active"));"radio"===b.prop("type")&&a.find(".active").removeClass("active")}this.$element.toggleClass("active")};var c=a.fn.button;a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f="object"==typeof c&&c;e||d.data("bs.button",e=new b(this,f)),"toggle"==c?e.toggle():c&&e.setState(c)})},a.fn.button.Constructor=b,a.fn.button.noConflict=function(){return a.fn.button=c,this},a(document).on("click.bs.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle"),b.preventDefault()})}(window.jQuery),+function(a){"use strict";var b=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.DEFAULTS={interval:5e3,pause:"hover"},b.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},b.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},b.prototype.to=function(b){var c=this,d=this.getActiveIndex();return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},b.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},b.prototype.next=function(){return this.sliding?void 0:this.slide("next")},b.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},b.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();var j=a.Event("slide.bs.carousel",{relatedTarget:e[0],direction:g});if(!e.hasClass("active")){if(this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var b=a(i.$indicators.children()[i.getActiveIndex()]);b&&b.addClass("active")})),a.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(j),j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)}).emulateTransitionEnd(600)}else{if(this.$element.trigger(j),j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}};var c=a.fn.carousel;a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c),g="string"==typeof c?c:f.slide;e||d.data("bs.carousel",e=new b(this,f)),"number"==typeof c?e.to(c):g?e[g]():f.interval&&e.pause().cycle()})},a.fn.carousel.Constructor=b,a.fn.carousel.noConflict=function(){return a.fn.carousel=c,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(b){var c,d=a(this),e=a(d.attr("data-target")||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"")),f=a.extend({},e.data(),d.data()),g=d.attr("data-slide-to");g&&(f.interval=!1),e.carousel(f),(g=d.attr("data-slide-to"))&&e.data("bs.carousel").to(g),b.preventDefault()}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var b=a(this);b.carousel(b.data())})})}(window.jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.DEFAULTS={toggle:!0},b.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},b.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b=a.Event("show.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.$parent&&this.$parent.find("> .accordion-group > .in");if(c&&c.length){var d=c.data("bs.collapse");if(d&&d.transitioning)return;c.collapse("hide"),d||c.data("bs.collapse",null)}var e=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[e](0),this.transitioning=1;var f=function(){this.$element.removeClass("collapsing").addClass("in")[e]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return f.call(this);var g=a.camelCase(["scroll",e].join("-"));this.$element.one(a.support.transition.end,a.proxy(f,this)).emulateTransitionEnd(350)[e](this.$element[0][g])}}},b.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?(this.$element[c](0).one(a.support.transition.end,a.proxy(d,this)).emulateTransitionEnd(350),void 0):d.call(this)}}},b.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);e||d.data("bs.collapse",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(b){var c,d=a(this),e=d.attr("data-target")||b.preventDefault()||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.collapse"),h=g?"toggle":d.data(),i=d.attr("data-parent"),j=i&&a(i);g&&g.transitioning||(j&&j.find("[data-toggle=collapse][data-parent="+i+"]").not(d).addClass("collapsed"),d[f.hasClass("in")?"addClass":"removeClass"]("collapsed")),f.collapse(h)})}(window.jQuery),+function(a){"use strict";function b(){a(d).remove(),a(e).each(function(b){var d=c(a(this));d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown")),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown"))})}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}var d=".dropdown-backdrop",e="[data-toggle=dropdown]",f=function(b){a(b).on("click.bs.dropdown",this.toggle)};f.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){if("ontouchstart"in document.documentElement&&a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click",b),f.trigger(d=a.Event("show.bs.dropdown")),d.isDefaultPrevented())return;f.toggleClass("open").trigger("shown.bs.dropdown")}return e.focus(),!1}},f.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var f=c(d),g=f.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&f.find(e).focus(),d.click();var h=a("[role=menu] li:not(.divider):visible a",f);if(h.length){var i=h.index(h.filter(":focus"));38==b.keyCode&&i>0&&i--,40==b.keyCode&&i<h.length-1&&i++,~i||(i=0),h.eq(i).focus()}}}};var g=a.fn.dropdown;a.fn.dropdown=function(b){return this.each(function(){var c=a(this),d=c.data("dropdown");d||c.data("dropdown",d=new f(this)),"string"==typeof b&&d[b].call(c)})},a.fn.dropdown.Constructor=f,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=g,this},a(document).on("click.bs.dropdown.data-api",b).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",e,f.prototype.toggle).on("keydown.bs.dropdown.data-api",e+", [role=menu]",f.prototype.keydown)}(window.jQuery),+function(a){"use strict";var b=function(b,c){this.options=c,this.$element=a(b).on("click.dismiss.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};b.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},b.prototype.toggle=function(){return this[this.isShown?"hide":"show"]()},b.prototype.show=function(){var b=this,c=a.Event("show.bs.modal");this.$element.trigger(c),this.isShown||c.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.backdrop(function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in").attr("aria-hidden",!1),b.enforceFocus(),c?b.$element.one(a.support.transition.end,function(){b.$element.focus().trigger("shown.bs.modal")}).emulateTransitionEnd(300):b.$element.focus().trigger("shown.bs.modal")}))},b.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),a.support.transition&&this.$element.hasClass("fade")?this.$element.one(a.support.transition.end,a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},b.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.focus()},this))},b.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},b.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.removeBackdrop(),a.$element.trigger("hidden.bs.modal")})},b.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},b.prototype.backdrop=function(b){var c=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var d=a.support.transition&&c;if(this.$backdrop=a('<div class="modal-backdrop '+c+'" />').appendTo(document.body),this.$element.on("click",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),d&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;d?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()):b&&b()};var c=a.fn.modal;a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("bs.modal"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);e||d.data("bs.modal",e=new b(this,f)),"string"==typeof c?e[c]():f.show&&e.show()})},a.fn.modal.Constructor=b,a.fn.modal.noConflict=function(){return a.fn.modal=c,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.is(":visible")&&c.focus()})});var d=a(document.body).on("shown.bs.modal",".modal",function(){d.addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){d.removeClass("modal-open")})}(window.jQuery),+function(a){"use strict";var b=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};b.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},b.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focus",i="hover"==g?"mouseleave":"blur";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},b.prototype.enter=function(b){var c=this.getDefaults(),d={};this._options&&a.each(this._options,function(a,b){c[a]!=b&&(d[a]=b)});var e=b instanceof this.constructor?b:a(b.currentTarget)[this.type](d).data("bs."+this.type);return clearTimeout(e.timeout),e.options.delay&&e.options.delay.show?(e.hoverState="in",e.timeout=setTimeout(function(){"in"==e.hoverState&&e.show()},e.options.delay.show),void 0):e.show()},b.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this._options).data("bs."+this.type);return clearTimeout(c.timeout),c.options.delay&&c.options.delay.hide?(c.hoverState="out",c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide),void 0):c.hide()},b.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){if(this.$element.trigger(b),b.isDefaultPrevented())return;var c=this.tip();this.setContent(),this.options.animation&&c.addClass("fade");var d="function"==typeof this.options.placement?this.options.placement.call(this,c[0],this.$element[0]):this.options.placement,e=/\s?auto?\s?/i,f=e.test(d);f&&(d=d.replace(e,"")||"top"),c.detach().css({top:0,left:0,display:"block"}).addClass(d),this.options.container?c.appendTo(this.options.container):c.insertAfter(this.$element);var g=this.getPosition(),h=c[0].offsetWidth,i=c[0].offsetHeight;if(f){var j=this.$element.parent(),k=d,l=document.documentElement.scrollTop||document.body.scrollTop,m="body"==this.options.container?window.innerWidth:j.outerWidth(),n="body"==this.options.container?window.innerHeight:j.outerHeight(),o="body"==this.options.container?0:j.offset().left;d="bottom"==d&&g.top+g.height+i-l>n?"top":"top"==d&&g.top-l-i<0?"bottom":"right"==d&&g.right+h>m?"left":"left"==d&&g.left-h<o?"right":d,c.removeClass(k).addClass(d)}var p="bottom"==d?{top:g.top+g.height,left:g.left+g.width/2-h/2}:"top"==d?{top:g.top-i,left:g.left+g.width/2-h/2}:"left"==d?{top:g.top+g.height/2-i/2,left:g.left-h}:{top:g.top+g.height/2-i/2,left:g.left+g.width};this.applyPlacement(p,d),this.$element.trigger("shown.bs."+this.type)}},b.prototype.applyPlacement=function(a,b){var c,d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight;a.top=a.top+parseInt(d.css("margin-top"),10),a.left=a.left+parseInt(d.css("margin-left"),10),d.offset(a).addClass("in");var g=d[0].offsetWidth,h=d[0].offsetHeight;if("top"==b&&h!=f&&(c=!0,a.top=a.top+f-h),"bottom"==b||"top"==b){var i=0;a.left<0&&(i=-2*a.left,a.left=0,d.offset(a),g=d[0].offsetWidth,h=d[0].offsetHeight),this.replaceArrow(i-e+g,g,"left")}else this.replaceArrow(h-f,h,"top");c&&d.offset(a)},b.prototype.replaceArrow=function(a,b,c){this.arrow().css(c,a?50*(1-a/b)+"%":"")},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},b.prototype.hide=function(){var b=this.tip(),c=a.Event("hide.bs."+this.type);return this.$element.trigger(c),c.isDefaultPrevented()?void 0:(b.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?b.one(a.support.transition.end,b.detach).emulateTransitionEnd(150):b.detach(),this.$element.trigger("hidden.bs."+this.type),this)},b.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},b.prototype.hasContent=function(){return this.getTitle()},b.prototype.getPosition=function(){var b=this.$element[0];return a.extend({},"function"==typeof b.getBoundingClientRect?b.getBoundingClientRect():{width:b.offsetWidth,height:b.offsetHeight},this.$element.offset())},b.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},b.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},b.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},b.prototype.enable=function(){this.enabled=!0},b.prototype.disable=function(){this.enabled=!1},b.prototype.toggleEnabled=function(){this.enabled=!this.enabled},b.prototype.toggle=function(b){var c=b?a(b.currentTarget)[this.type](this._options).data("bs."+this.type):this;c.tip().hasClass("in")?c.leave(c):c.enter(c)},b.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var c=a.fn.tooltip;a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof c&&c;e||d.data("bs.tooltip",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=c,this}}(window.jQuery),+function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");b.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),b.prototype.constructor=b,b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title:empty").hide()},b.prototype.hasContent=function(){return this.getTitle()||this.getContent()},b.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},b.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},b.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData(this.type)};var c=a.fn.popover;a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof c&&c;e||d.data("bs.popover",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.noConflict=function(){return a.fn.popover=c,this}}(window.jQuery),+function(a){"use strict";function b(c,d){var e,f=a.proxy(this.process,this);this.$element=a(c).is("body")?a(window):a(c),this.$body=a("body"),this.$scrollElement=this.$element.on("scroll.bs.scroll-spy.data-api",f),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||(e=a(c).attr("href"))&&e.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#\w/.test(e)&&a(e);return f&&f.length&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parents(".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),+function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.parent("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},b.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one(a.support.transition.end,e).emulateTransitionEnd(150):e(),f.removeClass("in")};var c=a.fn.tab;a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new b(this)),"string"==typeof c&&e[c]()})},a.fn.tab.Constructor=b,a.fn.tab.noConflict=function(){return a.fn.tab=c,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})}(window.jQuery),+function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top()),"function"==typeof h&&(h=f.bottom());var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;this.affixed!==i&&(this.unpin&&this.$element.css("top",""),this.affixed=i,this.unpin="bottom"==i?e.top-d:null,this.$element.removeClass(b.RESET).addClass("affix"+(i?"-"+i:"")),"bottom"==i&&this.$element.offset({top:document.body.offsetHeight-h-this.$element.height()}))}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(window.jQuery);
\ No newline at end of file
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>Guide to making dygraphs changes</title>
- <style type="text/css">
- code {
- white-space: pre;
- border: 1px dashed black;
- display: inline-block;
- margin-left: 5px;
- margin-right: 5px;
- padding: 2px;
- }
- pre {
- white-space: pre;
- border: 1px dashed black;
- padding: 5px;
- }
- body { max-width: 800px; }
- ol > li { padding: 5px; }
- </style>
- </head>
- <body>
- <h2>Guide to making dygraphs changes</h2>
-
- <p>So you've made a change to dygraphs and would like to contribute it back
- to the open source project. Wonderful!</p>
-
- <p>This is a step-by-step guide explaining how to do it.</p>
-
- <h3>dygraphs style</h3>
- <p>First of all, please try to follow the style of the existing dygraphs
- code. This will make the review process go much more smoothly.<p>
-
- <p>A few salient points:</p>
- <ol>
- <li> I try to adhere to Google's <a
- href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml">
- JS style guide</a> and would appreciate it if you try to as well. This
- means:
- <ul>
- <li>No tabs! Indent using two spaces.
- <li>Use camelCase for variable and function names.
- <li>Limit lines to 80 characters.
- </ul>
-
- <li>Please run 'lint.sh' to see if you've introduced any new violations.
-
- <li>If you've added a new feature, add a test for it (in the tests/
- directory) or a gallery entry.
-
- <li>If you've added an option, document it in
- dygraph-options-reference.js. You'll get lots of warnings if you don't.
-
- <li>If you've fixed a bug or added a feature, add an auto_test for
- it.<br/>
- This ensures that we won't inadvertently break your feature in the
- future. To do this, either add to an existing auto_test in
- auto_tests/tests or run
- <code>auto_tests/misc/new-test.sh your-test-name</code> to
- create a new one. There are two easy ways to run tests:
- <ul>
- <li>You can run your auto_test in any browser by visiting
- <code>auto_tests/misc/local.html</code>. This allows you to debug your
- test, or test against a specific browser.
- <li>You can run your auto_test on the command-line by running
- <code>./test.sh</code>. (It requires installing
- <a href="http://phantomjs.org">phantomjs</a> on your computer.)
- </ul>
- </ol>
-
- <h3>Sending a Pull Request</h3>
-
- <p>dygraphs is hosted on github, which uses a "pull request" model. They
- have a good writeup <a
- href="http://help.github.com/send-pull-requests/">here</a>. These
- instructions discuss dygraphs more specifically.</p>
-
- <p>The list of steps may look a bit daunting, but it's not too bad,
- especially if you have any familiarity with git or github. If you run into
- any problems while following the instructions, feel free to contact
- dygraphs-users.</p>
-
- <p>Why not just take patches? This process means less work for me (the
- maintainer) and it also results in your name appearing in the list of
- dygraphs commits. This lets you take credit for your work.</p>
-
- <ol>
- <li>Create an account on <a href="http://github.com">github</a>. This is
- free, painless and will let you claim credit for your changes.
-
- <li>Install git. github has a good writeup <a
- href="http://help.github.com/git-installation-redirect">here</a>.
-
- <li>Create a fork of the dygraphs repository on github by
- clicking <a href="https://github.com/danvk/dygraphs">this link</a> and
- then the "Fork" button.
-
- <li>You should see a URL along the lines of
- <code>git@github.com:yourname/dygraphs.git</code><br/>Copy this, open up a
- terminal and run<br/>
- <pre>git clone git@github.com:yourname/dygraphs.git</pre> This
- pulls the dygraphs code down onto your local disk.
-
- <li>cd into the dygraphs directory and make your changes.<br/>
- If you've already got them somewhere else, just copy them over.<br/>
-
- <li>Be a good citizen! Make sure your code follows the guidelines
- above.<br/>
- You'll have to do this before I accept your changes, so you may as well
- do it now
-
- <li>Commit your changes locally: run
- <pre>git add .
+<!--#include virtual="header.html" -->
+
+<style type="text/css">
+ pre {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
+ ol > li { padding: 5px; }
+</style>
+
+<h2>Guide to making dygraphs changes</h2>
+
+<p>So you've made a change to dygraphs and would like to contribute it back
+to the open source project. Wonderful!</p>
+
+<p>This is a step-by-step guide explaining how to do it.</p>
+
+<h3>dygraphs style</h3>
+<p>First of all, please try to follow the style of the existing dygraphs
+code. This will make the review process go much more smoothly.<p>
+
+<p>A few salient points:</p>
+<ol>
+ <li>We try to adhere to Google's <a
+ href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml">
+ JS style guide</a> and would appreciate it if you try to as well. This
+ means:
+ <ul>
+ <li>No tabs! Indent using two spaces.
+ <li>Use camelCase for variable and function names.
+ <li>Limit lines to 80 characters.
+ </ul>
+
+ <li>Please run 'lint.sh' to see if you've introduced any new violations.
+
+ <li>If you've added a new feature, add a test for it (in the tests/
+ directory) or a gallery entry.
+
+ <li>If you've added an option, document it in
+ dygraph-options-reference.js. You'll get lots of warnings if you don't.
+
+ <li>If you've fixed a bug or added a feature, add an auto_test for
+ it.<br/>
+ This ensures that we won't inadvertently break your feature in the
+ future. To do this, either add to an existing auto_test in
+ auto_tests/tests or run
+ <code>auto_tests/misc/new-test.sh your-test-name</code> to
+ create a new one. There are two easy ways to run tests:
+ <ul>
+ <li>You can run your auto_test in any browser by visiting
+ <code>auto_tests/misc/local.html</code>. This allows you to debug your
+ test, or test against a specific browser.
+ <li>You can run your auto_test on the command-line by running
+ <code>./test.sh</code>. (It requires installing
+ <a href="http://phantomjs.org">phantomjs</a> on your computer.)
+ </ul>
+</ol>
+
+<h3>Sending a Pull Request</h3>
+
+<p>dygraphs is hosted on github, which uses a "pull request" model. They
+have a good writeup <a
+ href="http://help.github.com/send-pull-requests/">here</a>. These
+instructions discuss dygraphs more specifically.</p>
+
+<p>The list of steps may look a bit daunting, but it's not too bad,
+especially if you have any familiarity with git or github. If you run into
+any problems while following the instructions, feel free to contact
+dygraphs-users.</p>
+
+<p>Why not just take patches? This process means less work for me (the
+maintainer) and it also results in your name appearing in the list of
+dygraphs commits. This lets you take credit for your work.</p>
+
+<ol>
+ <li>Create an account on <a href="http://github.com">github</a>. This is
+ free, painless and will let you claim credit for your changes.
+
+ <li>Install git. github has a good writeup <a
+ href="http://help.github.com/git-installation-redirect">here</a>.
+
+ <li>Create a fork of the dygraphs repository on github by
+ clicking <a href="https://github.com/danvk/dygraphs">this link</a> and
+ then the "Fork" button.
+
+ <li>You should see a URL along the lines of
+ <code>git@github.com:yourname/dygraphs.git</code><br/>Copy this, open up a
+ terminal and run<br/>
+ <pre>git clone git@github.com:yourname/dygraphs.git</pre> This
+ pulls the dygraphs code down onto your local disk.
+
+ <li>cd into the dygraphs directory and make your changes.<br/>
+ If you've already got them somewhere else, just copy them over.<br/>
+
+ <li>Be a good citizen! Make sure your code follows the guidelines
+ above.<br/>
+ You'll have to do this before we accept your changes, so you may as well
+ do it now
+
+ <li>Commit your changes locally: run
+ <pre>git add .
git commit</pre>
- Type in a description of your change. This will
- eventually appear in the dygraphs <a
- href="https://github.com/danvk/dygraphs/commits/master">commit list</a>.
-
- <li>Push your changes to github by running <pre>git push</pre>This will
- send your changes to your forked repository on github.
-
- <li>Go to your fork of dygraphs on github (i.e.
- github.com/yourname/dygraphs).<br/>
- Click the "Pull Request" button.<br/>
- This will send me an email with a pointer to your changes.
-
- <li>I'll review your changes and (unless your code is perfect!) give you
- some feedback. Make these suggested changes in your local git client and
- re-run "git commit" and "git push" so that I can see them.
-
- <li>Once your change is ready, I'll pull it into the main dygraphs
- repository and publish it to the web.
- </ol>
-
- <!-- Google Analytics -->
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-769809-2']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-</script>
- </body>
-</html>
+ Type in a description of your change. This will
+ eventually appear in the dygraphs <a
+ href="https://github.com/danvk/dygraphs/commits/master">commit list</a>.
+
+ <li>Push your changes to github by running <pre>git push</pre>This will
+ send your changes to your forked repository on github.
+
+ <li>Go to your fork of dygraphs on github (i.e.
+ github.com/yourname/dygraphs).<br/>
+ Click the "Pull Request" button.<br/>
+ This will send me an email with a pointer to your changes.
+
+ <li>We'll review your changes and (unless your code is perfect!) give you
+ some feedback. Make these suggested changes in your local git client and
+ re-run "git commit" and "git push" so that we can see them.
+
+ <li>Once your change is ready, we'll pull it into the main dygraphs
+ repository and publish it to the web.
+</ol>
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+<!--#include virtual="header.html" -->
+
+<h2>CSS Reference</h2>
+
+<p>dygraphs charts are a combination of DOM elements and pixels on a
+<code><canvas></code>. The parts that are DOM elements can be styled
+using CSS.</p>
+
+<p>As a general rule of thumb, all the text on a chart (the legend, the axis
+labels, the chart labels) can be styled. The data series and gridlines are
+drawn on the canvas and must by styled using dygraphs <a
+ href="options.html">options</a>.</p>
+
+<p>This chart shows the CSS classes for chart labels:</p>
+
+<div id="demodiv"></div>
+<script type="text/javascript">
+ g = new Dygraph(
+ document.getElementById("demodiv"),
+ "dow.txt",
+ {
+ customBars: true,
+ legend: 'always',
+ title: '.dygraph-label .dygraph-title',
+ xlabel: '.dygraph-label .dygraph-xlabel',
+ ylabel: '.dygraph-label .dygraph-ylabel',
+ y2label: '.dygraph-label .dygraph-y2label',
+ 'series': {
+ 'Real': {
+ axis: 'y2'
+ }
+ },
+ yAxisLabelWidth: 70,
+ drawCallback: function() {
+ $('.dygraph-legend').text('.dygraph-legend');
+ },
+ });
+</script>
+
+<p>The CSS classes for the chart labels are:</p>
+<ul>
+ <li>Title: <code>.dygraph-label.dygraph-title</code>
+ <li>x-axis label: <code>.dygraph-label.dygraph-xlabel</code>
+ <li>y-axis label: <code>.dygraph-label.dygraph-ylabel</code>
+ <li>y2-axis label: <code>.dygraph-label.dygraph-y2label</code>
+</ul>
+
+<p>The axis labels ("2000", "4000", "6000", … for the y-axis and "1920",
+"1930", "1940", … for the x-axis) also get CSS classes:</p>
+
+<ul>
+ <li>x-axis: <code>.dygraph-axis-label.dygraph-axis-label-x</code>
+ <li>y-axis: <code>.dygraph-axis-label.dygraph-axis-label-y</code>
+ <li>y2-axis: <code>.dygraph-axis-label.dygraph-axis-label-y.dygraph-axis-label-y2</code>
+</ul>
+
+<p>The legend has the <code>.dygraph-legend</code> class. When using <a
+ href="tests/series-highlight.html">highlightSeriesOpts</a>, the selected
+series' <span> gets a <code>.highlight</code> class. This can be used to
+show only a single series in the legend.</p>
+
+<p>For CSS classes and annotations, see the <a
+ href="annotations.html">annotations documentation.</a></p>
+
+<!--#include virtual="footer.html" -->
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>dygraphs input types</title>
- <style type="text/css">
- code { white-space: pre; border: 1px dashed black; display: block; }
- pre { white-space: pre; border: 1px dashed black; }
- body { max-width: 800px; }
- </style>
- </head>
- <body>
- <h2>dygraphs Data Format</h2>
-
- <p>When you create a Dygraph object, your code looks something like
- this:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- <i>data</i>,
- { <i>options</i> });
- </code>
-
- <p>This document is about what you can put in the <i>data</i>
- parameter.</p>
-
- <p>There are five types of input that dygraphs will accept:</p>
- <ol>
- <li><a href="#csv">CSV data</a>
- <li><a href="#url">URL</a>
- <li><a href="#array">array (native format)</a>
- <li><a href="#function">function</a>
- <li><a href="#datatable">DataTable</a>
- </ol>
-
- <p>These are all discussed below. If you're trying to debug why your input
- won't parse, <b>check the JS error console</b>. dygraphs tries to log
- informative errors explaining what's wrong with your data, and these can
- often point you in the right direction.</p>
-
- <p>There are several options which affect how your input data is
- interpreted. These are:
- <ul>
- <li> <i>xValueParser</i> affects CSV only.
- <li> <i>errorBars</i> affects all input types.
- <li> <i>customBars</i> affects all input types.
- <li> <i>fractions</i> affects all input types.
- <li> <i>labels</i> affects all input types.
- </ul>
- </p>
-
- <a name="csv"><h3>CSV</h3>
- <p>Here's an example of what CSV data should look like:</p>
- <pre>
- Date,Series1,Series2
- 2009/07/12,100,200 # comments are OK on data lines
- 2009/07/19,150,201
- </pre>
-
- <p>"CSV" is actually a bit of a misnomer: the data can be tab-delimited,
- too. The delimiter is set by the <i>delimiter</i> option. It default to ",".
- If no delimiter is found in the first row, it switches over to tab.</p>
-
- <p>CSV parsing can be split into three parts: headers, x-value and
- y-values.</p>
-
- <h4>Headers</h4>
- <p>If you don't specify the <i>labels</i> option, dygraphs will look at the
- first line of your CSV data to get the labels. If you see numbers for series
- labels when you hover over the dygraph, it's likely because your first line
- contains data but is being parsed as a label. The solution is to either add
- a header line or specify the labels like this:</p>
-
- <code>
- new Dygraph(el,
- "2009/07/12,100,200\n" +
- "2009/07/19,150,201\n",
- { labels: [ "Date", "Series1", "Series2" ] });
- </code>
-
- <h4>x-values</h4>
- <p>Once the headers are parsed, dygraphs needs to determine what the type of
- the x values is. They're either dates or numbers. To make this
- determination, it looks at the first column of the first row ("2009/07/12"
- in the example above). Here's the heuristic: if it contains a '-' or a '/',
- or otherwise doesn't parse as a float, the it's a date. Otherwise, it's a
- number.</p>
-
- <p>Once the type is determined, that doesn't mean all the values will parse
- correctly. The general rule is:<p>
-
- <ul>
- <li>For dates, your strings have to be parseable by <i>Date.parse</i>.
- <li>For numbers, your strings have to be parseable by <i>parseFloat</i>.
- </ul>
-
- <p>You can manually verify this using a JavaScript console. If a value
- doesn't parse, dygraphs will put a warning about it on your console. But
- beware: different browsers support different date formats!</p>
-
- <p>Here are some valid date formats:</p>
- <ul>
- <li>2009-07-12</li>
- <li>2009/07/12</li>
- <li>2009/07/12 12</li>
- <li>2009/07/12 12:34</li>
- <li>2009/07/12 12:34:56</li>
- </ul>
-
- <p>If you specify the <i>xValueParser</i> option, then all this detection is
- bypassed and your function is called instead. Your parser function takes in
- a string and needs to return a number. For dates/times, you should return
- milliseconds since epoch. You may also want to specify a few other options
- to make sure that everything gets displayed properly.<p>
-
- <p>Here's code which parses a CSV file with unix timestamps in the first
- column:</p>
-
- <code>
- new Dygraph(el,
- "Date,Series1,Series2\n" +
- "1247382000,100,200\n" +
- "1247986800,150,201\n",
- {
- xValueFormatter: Dygraph.dateString_,
- xValueParser: function(x) { return 1000*parseInt(x); },
- xTicker: Dygraph.dateTicker
- });
- </code>
-
- <h4>y-values</h4>
- <p>Dependent (y-axis) values are simpler than x-values because they're
- always numbers. The complexity here comes from the various ways that you can
- specify the uncertainty in your measurements.<p>
-
- <p>If your y-values are just numbers, then they need to be parseable by
- JavaScript's parseFloat function. Acceptable formats include:</p>
-
- <ul>
- <li>12
- <li>-12
- <li>12.
- <li>12.3
- <li>1.24e+1
- <li>-1.24e+1
- </ul>
-
- <p>If you have missing data, just leave the column blank (your CSV file will
- probably contain a ",," in it).</p>
-
- <p>If your numbers have uncertainty associated with them, then there are
- three basic ways to express this: using fractions, standard deviations or
- explicit ranges.</p>
-
- <h5>Fractions</h5>
- <p>If you specify the <i>fractions</i> option, then your data will all be
- interpreted as ratios between zero and one. This is often the case if you're
- plotting a percentage.</p>
-
- <code>
- new Dygraph(el,
- "X,Frac1,Frac2\n" +
- "1,1/2,3/4\n"+
- "2,1/3,2/3\n"+
- "3,2/3,17/49\n"+
- "4,25/30,100/200",
- { fractions: true });
- </code>
-
- <p>Why not just divide the fractions out yourself? There are two attractive
- reasons not to:</p>
-
- <ul>
- <li>If you set both <i>fractions</i> and <i>errorBars</i>, then the
- denominator is interpreted as a sample size and dygraphs will plot <a
- href="http://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval">Wilson
- binomial proportion confidence intervals</a> around each point.
-
- <li>If you set <i>showRoller</i>, then dygraphs will combine the values as
- fractions. If two point are <i>a/b</i> and <i>c/d</i>, it will plot
- <i>(a+b) / (c+d)</i> rather than <i>(a/b + c/d) / 2</i>, which is what
- you'd get if you divided the fractions through. This will also shrink the
- confidence intervals.</li>
- </ul>
-
- <h5>Standard Deviations</h5>
- <p>Often you have a measurement and also a measure of its uncertainty: a
- standard deviation. If you specify the <i>errorBars</i> option, dygraphs
- will look for alternating value and standard deviation columns in your CSV
- data. Here's what it should look like:</p>
-
- <code>
- new Dygraph(el,
- "X,Y1,Y2\n" +
- "1,10,5,20,5\n" +
- "2,12,5,22,5\n",
- { errorBars: true });
- </code>
-
- <p>The "5" values are standard deviations. When each point is plotted, a
- 2-standard deviation region around it is shaded, resulting in a 95%
- confidence interval. If you want more or less confidence, you can set the
- <i>sigma</i> option to something other than 2.0.</p>
-
- <p>When you roll data with standard deviations, dygraphs will plot the
- average of your values in each rolling period and the RMS value of your
- standard deviations: sqrt(std1 + std2 + std3 + ... + stdN)/N.</p>
-
- <h5>Custom error bars</h5>
- <p>Sometimes your data has asymetric uncertainty or you want to specify
- something else with the error bars around a point. One example of this is
- the "temperatures" demo on the <a href="http://danvk.org/dygraphs">dygraphs
- home page.</a>, where the point is the daily average and the bars denote
- the low and high temperatures for the day.</p>
-
- <p>To specify this format, set the <i>customBars</i> option. Your CSV values
- should each be three numbers separated by semicolons ("low;mid;high").
- Here's an example:</p>
-
- <code>
- new Dygraph(el,
- "X,Y1,Y2\n" +
- "1,10;20;30,20;5;25\n" +
- "2,10;25;35,20;10;25\n",
- { customBars: true });
- </code>
-
- <p>The middle value need not lie between the low and high values. If you set
- a rolling period, the three values will all be averaged independently.</p>
-
-
- <a name="url"><h3>URL</h3>
- <p>If you pass in a URL, dygraphs will issue an XMLHttpRequest for it and
- attempt to parse the returned data as CSV.
- </p>
-
- <p><i>Common problems</i>. Make sure the URL is accessible and returns data
- in text format (as opposed to a CSV file with an HTML header). You can see
- what the response looks like by checking your JS console or by requesting
- the URL yourself.</p>
-
-
- <a name="array"><h3>Array (native format)</h3>
- <p>If you'll be constructing your data set from a server-side program (or
- from JavaScript) then you're better off producing an array than CSV data.
- This saves the cost of parsing the CSV data and also avoids common parser
- errors.</p>
-
- <p>The downside is that it's harder to look at your data (you'll need to use
- a JS debugger) and that the data format is a bit less clear for values with
- uncertainties.</p>
-
- <p>Here's an example of "native format":</p>
-
- <code>
- new Dygraph(document.getElementById("graphdiv2"),
- [
- [1,10,100],
- [2,20,80],
- [3,50,60],
- [4,70,80]
- ],
- {
- labels: [ "x", "A", "B" ]
- });
- </code>
-
- <h4>Headers</h4>
- <p>Headers for native format must be specified via the <i>labels</i>
- option. There's no other way to set them.</p>
-
- <h4>x-values</h4>
- <p>If you want your x-values to be dates, you'll need to use specify a Date
- object in the first column. Otherwise, specify a number. Here's a sample
- array with dates on the x-axis:</p>
-
- <code>
- [
- [ new Date("2009/07/12"), 100, 200 ],
- [ new Date("2009/07/19"), 150, 220 ]
- ]
- </code>
-
- <h4>y-values</h4>
- <p>You can specify <i>errorBars</i>, <i>fractions</i> or <i>customBars</i>
- with the array format. If you specify any of these, the values become arrays
- (rather than numbers). Here's what the format looks like for each one:</p>
-
- <code>
- <i>errorBars</i>: [x, [value1, std1], [value2, std2], ...]
- <i>fractions</i>: [x, [num1, den1], [num2, den2], ...]
- <i>customBars</i>: [x, [low1, val1, high1], [low2, val2, high2], ...]
- </code>
-
- <p>To specify missing data, set the value to null or NaN. You may not set a value
- inside an array to null or NaN. Use null or NaN instead of the entire array.
- The only difference between the two is when the option
- <a href="options.html#conectSeparatedPoints">connectSeparatedPoints</a>
- true. In that case, the gaps created by nulls are filled in, and gaps
- created by NaNs are preserved.
- </p>
-
- <a name="function"><h3>Functions</h3>
-
- <p>You can specify a function that returns any of the other types. If
- <i>x</i> is a valid piece of dygraphs input, then so is</p>
-
- <code>
- function() { return x; }
- </code>
-
- Functions can return strings, arrays, data tables, URLs, or any other data type.
-
- <a name="datatable"><h3>DataTable</h3>
- <p>You can also specify a Google Visualization Library <a
- href="http://code.google.com/apis/visualization/documentation/reference.html#DataTable">DataTable</a>
- object as your input data. This lets you easily switch between dygraphs and
- other gviz visualizations such as the Annotated Timeline. It also lets you
- embed a Dygraph in a Google Spreadsheet.</p>
-
- <p>You'll need to set your first column's type to one of "number", "date"
- or "datetime".</p>
-
- <pre>
- DataTable TODO:
- - When to use Dygraph.GvizWrapper
- - how to specify fractions
- - how to specify missing data
- - how to specify value + std. dev.
- - how to specify [low, middle, high]
- - walkthrough of embedding a gadget in google docs/on a web page
- - walkthrough of using std. dev. in a spreadsheet chart
- </pre>
-
- <!-- Google Analytics -->
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-769809-2']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-</script>
- </body>
-</html>
+<!--#include virtual="header.html" -->
+
+<style type="text/css">
+ code { white-space: pre; border: 1px dashed black; display: block; }
+ pre { white-space: pre; border: 1px dashed black; }
+</style>
+
+<h2>dygraphs Data Format</h2>
+
+<p>When you create a Dygraph object, your code looks something like
+this:</p>
+
+<code>
+ g = new Dygraph(document.getElementById("div"),
+ <i>data</i>,
+ { <i>options</i> });
+
+</code>
+
+<p>This document is about what you can put in the <i>data</i>
+parameter.</p>
+
+<p>There are five types of input that dygraphs will accept:</p>
+<ol>
+ <li><a href="#csv">CSV data</a>
+ <li><a href="#url">URL</a>
+ <li><a href="#array">array (native format)</a>
+ <li><a href="#function">function</a>
+ <li><a href="#datatable">DataTable</a>
+</ol>
+
+<p>These are all discussed below. If you're trying to debug why your input
+won't parse, <b>check the JS error console</b>. dygraphs tries to log
+informative errors explaining what's wrong with your data, and these can
+often point you in the right direction.</p>
+
+<p>There are several options which affect how your input data is
+interpreted. These are:</p>
+<ul>
+ <li> <i>xValueParser</i> affects CSV only.
+ <li> <i>errorBars</i> affects all input types.
+ <li> <i>customBars</i> affects all input types.
+ <li> <i>fractions</i> affects all input types.
+ <li> <i>labels</i> affects all input types.
+</ul>
+
+<a name="csv"></a>
+ <h3>CSV</h3>
+<p>Here's an example of what CSV data should look like:</p>
+<pre>
+Date,Series1,Series2
+2009/07/12,100,200 # comments are OK on data lines
+2009/07/19,150,201
+</pre>
+
+<p>"CSV" is actually a bit of a misnomer: the data can be tab-delimited,
+too. The delimiter is set by the <i>delimiter</i> option. It default to ",".
+If no delimiter is found in the first row, it switches over to tab.</p>
+
+<p>CSV parsing can be split into three parts: headers, x-value and
+y-values.</p>
+
+<h4>Headers</h4>
+<p>If you don't specify the <i>labels</i> option, dygraphs will look at the
+first line of your CSV data to get the labels. If you see numbers for series
+labels when you hover over the dygraph, it's likely because your first line
+contains data but is being parsed as a label. The solution is to either add
+a header line or specify the labels like this:</p>
+
+<code>
+ new Dygraph(el,
+ "2009/07/12,100,200\n" +
+ "2009/07/19,150,201\n",
+ { labels: [ "Date", "Series1", "Series2" ] });
+</code>
+
+<h4>x-values</h4>
+<p>Once the headers are parsed, dygraphs needs to determine what the type of
+the x values is. They're either dates or numbers. To make this
+determination, it looks at the first column of the first row ("2009/07/12"
+in the example above). Here's the heuristic: if it contains a '-' or a '/',
+or otherwise doesn't parse as a float, the it's a date. Otherwise, it's a
+number.</p>
+
+<p>Once the type is determined, that doesn't mean all the values will parse
+correctly. The general rule is:<p>
+
+<ul>
+ <li>For dates, your strings have to be parseable by <i>Date.parse</i>.
+ <li>For numbers, your strings have to be parseable by <i>parseFloat</i>.
+</ul>
+
+<p>You can manually verify this using a JavaScript console. If a value
+doesn't parse, dygraphs will put a warning about it on your console. But
+beware: different browsers support different date formats!</p>
+
+<p>Here are some valid date formats:</p>
+<ul>
+ <li>2009-07-12</li>
+ <li>2009/07/12</li>
+ <li>2009/07/12 12</li>
+ <li>2009/07/12 12:34</li>
+ <li>2009/07/12 12:34:56</li>
+</ul>
+
+<p>If you specify the <i>xValueParser</i> option, then all this detection is
+bypassed and your function is called instead. Your parser function takes in
+a string and needs to return a number. For dates/times, you should return
+milliseconds since epoch. You may also want to specify a few other options
+to make sure that everything gets displayed properly.<p>
+
+<p>Here's code which parses a CSV file with unix timestamps in the first
+column:</p>
+
+<code>
+ new Dygraph(el,
+ "Date,Series1,Series2\n" +
+ "1247382000,100,200\n" +
+ "1247986800,150,201\n",
+ {
+ xValueFormatter: Dygraph.dateString_,
+ xValueParser: function(x) { return 1000*parseInt(x); },
+ xTicker: Dygraph.dateTicker
+ });
+</code>
+
+<h4>y-values</h4>
+<p>Dependent (y-axis) values are simpler than x-values because they're
+always numbers. The complexity here comes from the various ways that you can
+specify the uncertainty in your measurements.<p>
+
+<p>If your y-values are just numbers, then they need to be parseable by
+JavaScript's parseFloat function. Acceptable formats include:</p>
+
+<ul>
+ <li>12
+ <li>-12
+ <li>12.
+ <li>12.3
+ <li>1.24e+1
+ <li>-1.24e+1
+</ul>
+
+<p>If you have missing data, just leave the column blank (your CSV file will
+probably contain a ",," in it).</p>
+
+<p>If your numbers have uncertainty associated with them, then there are
+three basic ways to express this: using fractions, standard deviations or
+explicit ranges.</p>
+
+<h5>Fractions</h5>
+<p>If you specify the <i>fractions</i> option, then your data will all be
+interpreted as ratios between zero and one. This is often the case if you're
+plotting a percentage.</p>
+
+<code>
+ new Dygraph(el,
+ "X,Frac1,Frac2\n" +
+ "1,1/2,3/4\n"+
+ "2,1/3,2/3\n"+
+ "3,2/3,17/49\n"+
+ "4,25/30,100/200",
+ { fractions: true });
+</code>
+
+<p>Why not just divide the fractions out yourself? There are two attractive
+reasons not to:</p>
+
+<ul>
+ <li>If you set both <i>fractions</i> and <i>errorBars</i>, then the
+denominator is interpreted as a sample size and dygraphs will plot <a
+ href="http://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval">Wilson
+ binomial proportion confidence intervals</a> around each point.
+
+ <li>If you set <i>showRoller</i>, then dygraphs will combine the values as
+ fractions. If two point are <i>a/b</i> and <i>c/d</i>, it will plot
+ <i>(a+b) / (c+d)</i> rather than <i>(a/b + c/d) / 2</i>, which is what
+ you'd get if you divided the fractions through. This will also shrink the
+ confidence intervals.</li>
+</ul>
+
+<h5>Standard Deviations</h5>
+<p>Often you have a measurement and also a measure of its uncertainty: a
+standard deviation. If you specify the <i>errorBars</i> option, dygraphs
+will look for alternating value and standard deviation columns in your CSV
+data. Here's what it should look like:</p>
+
+<code>
+ new Dygraph(el,
+ "X,Y1,Y2\n" +
+ "1,10,5,20,5\n" +
+ "2,12,5,22,5\n",
+ { errorBars: true });
+</code>
+
+<p>The "5" values are standard deviations. When each point is plotted, a
+2-standard deviation region around it is shaded, resulting in a 95%
+confidence interval. If you want more or less confidence, you can set the
+<i>sigma</i> option to something other than 2.0.</p>
+
+<p>When you roll data with standard deviations, dygraphs will plot the
+average of your values in each rolling period and the RMS value of your
+standard deviations: sqrt(std1 + std2 + std3 + ... + stdN)/N.</p>
+
+<h5>Custom error bars</h5>
+<p>Sometimes your data has asymetric uncertainty or you want to specify
+something else with the error bars around a point. One example of this is
+the "temperatures" demo on the <a href="http://danvk.org/dygraphs">dygraphs
+ home page.</a>, where the point is the daily average and the bars denote
+the low and high temperatures for the day.</p>
+
+<p>To specify this format, set the <i>customBars</i> option. Your CSV values
+should each be three numbers separated by semicolons ("low;mid;high").
+Here's an example:</p>
+
+<code>
+ new Dygraph(el,
+ "X,Y1,Y2\n" +
+ "1,10;20;30,20;5;25\n" +
+ "2,10;25;35,20;10;25\n",
+ { customBars: true });
+</code>
+
+<p>The middle value need not lie between the low and high values. If you set
+a rolling period, the three values will all be averaged independently.</p>
+
+
+<a name="url"></a>
+<h3>URL</h3>
+<p>If you pass in a URL, dygraphs will issue an XMLHttpRequest for it and
+attempt to parse the returned data as CSV.
+</p>
+
+<p><i>Common problems</i>. Make sure the URL is accessible and returns data
+in text format (as opposed to a CSV file with an HTML header). You can see
+what the response looks like by checking your JS console or by requesting
+the URL yourself.</p>
+
+
+<a name="array"></a>
+<h3>Array (native format)</h3>
+<p>If you'll be constructing your data set from a server-side program (or
+from JavaScript) then you're better off producing an array than CSV data.
+This saves the cost of parsing the CSV data and also avoids common parser
+errors.</p>
+
+<p>The downside is that it's harder to look at your data (you'll need to use
+a JS debugger) and that the data format is a bit less clear for values with
+uncertainties.</p>
+
+<p>Here's an example of "native format":</p>
+
+<code>
+ new Dygraph(document.getElementById("graphdiv2"),
+ [
+ [1,10,100],
+ [2,20,80],
+ [3,50,60],
+ [4,70,80]
+ ],
+ {
+ labels: [ "x", "A", "B" ]
+ });
+</code>
+
+<h4>Headers</h4>
+<p>Headers for native format must be specified via the <i>labels</i>
+option. There's no other way to set them.</p>
+
+<h4>x-values</h4>
+<p>If you want your x-values to be dates, you'll need to use specify a Date
+object in the first column. Otherwise, specify a number. Here's a sample
+array with dates on the x-axis:</p>
+
+<code>
+ [
+ [ new Date("2009/07/12"), 100, 200 ],
+ [ new Date("2009/07/19"), 150, 220 ]
+ ]
+</code>
+
+<h4>y-values</h4>
+<p>You can specify <i>errorBars</i>, <i>fractions</i> or <i>customBars</i>
+with the array format. If you specify any of these, the values become arrays
+(rather than numbers). Here's what the format looks like for each one:</p>
+
+<code>
+ <i>errorBars</i>: [x, [value1, std1], [value2, std2], ...]
+ <i>fractions</i>: [x, [num1, den1], [num2, den2], ...]
+ <i>customBars</i>: [x, [low1, val1, high1], [low2, val2, high2], ...]
+</code>
+
+<p>To specify missing data, set the value to null or NaN. You may not set a value
+inside an array to null or NaN. Use null or NaN instead of the entire array.
+The only difference between the two is when the option
+<a href="options.html#conectSeparatedPoints">connectSeparatedPoints</a>
+true. In that case, the gaps created by nulls are filled in, and gaps
+created by NaNs are preserved.
+</p>
+
+<a name="function"></a>
+<h3>Functions</h3>
+
+<p>You can specify a function that returns any of the other types. If
+<i>x</i> is a valid piece of dygraphs input, then so is</p>
+
+<code>
+ function() { return x; }
+</code>
+
+Functions can return strings, arrays, data tables, URLs, or any other data type.
+
+<a name="datatable"></a>
+<h3>DataTable</h3>
+<p>You can also specify a Google Visualization Library <a
+ href="http://code.google.com/apis/visualization/documentation/reference.html#DataTable">DataTable</a>
+object as your input data. This lets you easily switch between dygraphs and
+other gviz visualizations such as the Annotated Timeline. It also lets you
+embed a Dygraph in a Google Spreadsheet.</p>
+
+<p>You'll need to set your first column's type to one of "number", "date"
+or "datetime".</p>
+
+<pre>
+DataTable TODO:
+- When to use Dygraph.GvizWrapper
+- how to specify fractions
+- how to specify missing data
+- how to specify value + std. dev.
+- how to specify [low, middle, high]
+- walkthrough of embedding a gadget in google docs/on a web page
+- walkthrough of using std. dev. in a spreadsheet chart
+</pre>
+
+<!--#include virtual="footer.html" -->
+++ /dev/null
-function StubbedData() {
-return "" +
-"Date,A,B\n" +
-"20061001,3.01953818828,0.7212041046,2.18487394958,0.599318549691\n" +
-"20061002,3.63321799308,0.778297234566,1.69491525424,0.531417655826\n" +
-"20061003,2.44328097731,0.644967734352,2.51256281407,0.640539070386\n" +
-"20061004,3.52733686067,0.774700921683,2.68456375839,0.66207105053\n" +
-"20061005,3.28719723183,0.741636245748,2.35294117647,0.621407707226\n" +
-"20061006,1.58450704225,0.523967868159,3.78657487091,0.791868460623\n" +
-"20061007,5.32859680284,0.946589405904,4.0404040404,0.807910739509\n" +
-"20061008,2.64084507042,0.672799548916,2.37288135593,0.626609885481\n" +
-"20061009,2.26480836237,0.620990945917,3.5413153457,0.75897176848\n" +
-"20061010,3.29289428076,0.74289969528,2.02702702703,0.579191340004\n" +
-"20061011,2.7633851468,0.681234043829,1.1744966443,0.4413034044\n" +
-"20061012,3.28719723183,0.741636245748,3.37268128162,0.741327769578\n" +
-"20061013,1.77304964539,0.55569466381,1.85810810811,0.555011329732\n" +
-"20061014,3.39892665474,0.7664008338,1.67224080268,0.524368852929\n" +
-"20061015,2.65017667845,0.675144574777,3.35570469799,0.737661045752\n" +
-"20061016,3.63951473137,0.779620631266,2.34899328859,0.620377617453\n" +
-"20061017,2.25694444444,0.618859623032,1.68067226891,0.526990133716\n" +
-"20061018,4.47504302926,0.857766274964,2.51677852349,0.641599927369\n" +
-"20061019,2.44755244755,0.646081155692,1.68067226891,0.526990133716\n" +
-"20061020,3.67775831874,0.787656442774,3.066439523,0.711598843969\n" +
-"20061021,3.94265232975,0.823839169829,3.85906040268,0.788990618726\n" +
-"20061022,2.59067357513,0.660187558973,3.71621621622,0.777438794254\n" +
-"20061023,4.33275563258,0.847570482324,3.85906040268,0.788990618726\n" +
-"20061024,3.10344827586,0.720049610821,2.84280936455,0.679611549697\n" +
-"20061025,1.40350877193,0.492720767725,2.7027027027,0.666482380968\n" +
-"20061026,1.95035460993,0.582291234145,2.36486486486,0.624518599275\n" +
-"20061027,2.30905861456,0.632980642182,2.03045685279,0.580161203819\n" +
-"20061028,4.09252669039,0.835706590809,2.87648054146,0.68754192469\n" +
-"20061029,2.66903914591,0.679883997626,2.02360876897,0.578224712918\n" +
-"20061030,4.74516695958,0.89127787497,4.36241610738,0.836670992529\n" +
-"20061031,2.78260869565,0.685905251933,3.20945945946,0.724388507178\n" +
-"20061101,1.5873015873,0.524884521441,1.51260504202,0.500373860545\n" +
-"20061102,2.78745644599,0.687083077461,2.0202020202,0.57726130639\n" +
-"20061103,5.11463844797,0.925157232782,2.68907563025,0.663168401088\n" +
-"20061104,4.9001814882,0.919644816432,3.07692307692,0.713993047527\n" +
-"20061105,5.13274336283,0.928343545136,3.55329949239,0.761492892041\n" +
-"20061106,1.92644483363,0.575222935029,2.35294117647,0.621407707226\n" +
-"20061107,2.46478873239,0.650573541306,1.52027027027,0.502889967904\n" +
-"20061108,2.13523131673,0.609772022763,2.6981450253,0.665374048085\n" +
-"20061109,3.88007054674,0.811026422222,2.72572402044,0.672079879106\n" +
-"20061110,2.63620386643,0.671633132526,3.71621621622,0.777438794254\n" +
-"20061111,3.69718309859,0.791736755355,3.0303030303,0.703344064467\n" +
-"20061112,3.83944153578,0.802703592906,4.05405405405,0.81058250986\n" +
-"20061113,2.47787610619,0.653984033555,2.20338983051,0.604340313133\n" +
-"20061114,1.77304964539,0.55569466381,2.22222222222,0.60944692682\n" +
-"20061115,2.30088495575,0.630766388737,0.843170320405,0.375484163785\n" +
-"20061116,1.57894736842,0.522144132232,2.19594594595,0.602321544724\n" +
-"20061118,2.45183887916,0.647198426991,1.69491525424,0.531417655826\n" +
-"20061119,3.52733686067,0.774700921683,1.85185185185,0.55316023504\n" +
-"20061120,2.97723292469,0.711254751484,2.6981450253,0.665374048085\n" +
-"20061121,2.29681978799,0.629665059963,2.01680672269,0.576301104352\n" +
-"20061122,3.01418439716,0.719945245328,2.5466893039,0.649125445325\n" +
-"20061123,3.78378378378,0.809917534069,2.6936026936,0.664269394219\n" +
-"20061124,3.18584070796,0.738851643987,2.01005025126,0.57439025002\n" +
-"20061125,2.83185840708,0.697868332879,3.066439523,0.711598843969\n" +
-"20061126,3.01953818828,0.7212041046,2.53378378378,0.645878720149\n" +
-"20061127,2.81195079086,0.693033387099,1.51006711409,0.499540743312\n" +
-"20061128,2.97723292469,0.711254751484,2.54237288136,0.648039583782\n" +
-"20061129,1.41093474427,0.495309102312,3.02013422819,0.701020603129";
-}
--- /dev/null
+<!--#include virtual="header.html" -->
+
+<script src="modernizr.custom.18445.js"></script>
+<div class="container" id="main">
+ <p>Most users will want the minified JavaScript:</p>
+ <h3><a download="dygraph-combined.js" href="dygraph-combined.js">dygraph-combined.js</a></h3>
+ <br/>
+ <p>For dev (non-minified) JS, see <a href="https://github.com/danvk/dygraphs/blob/master/dygraph-dev.js">dygraph-dev.js</a> on <a href="https://github.com/danvk/dygraphs/">github</a>.</a>
+</div>
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+ </div> <!-- .col-lg-12 -->
+ </div> <!-- /div.row -->
+</div> <!-- /div#main.container -->
+
+<!-- TODO(danvk): add a real footer -->
+<p> </p>
+
+ <!-- Google Analytics -->
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-769809-2']);
+ _gaq.push(['_trackPageview']);
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+
+ </body>
+</html>
--- /dev/null
+<!--#include virtual="header.html" -->
+
+<h2 id="gwt">Notes on GWT</h2>
+<p>There is currently no GWT wrapper around Dygraphs, however there is a class that can be used to easily load Dygraphs into the browser. To use it, include the generated dygraph-gwt.jar file in your classpath and add the following line to your GWT module:</p>
+
+<pre>
+<inherits name="org.danvk.dygraphs"/>
+</pre>
+
+<p>Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser. You can use <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html">JSNI</a> to call Dygraphs from your GWT code, as in the example below. The example uses the <a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted">Visualization API for GWT</a> and the <a href="#gviz">Dygraphs GViz API.</a></p>
+
+<pre>
+public static native JavaScriptObject drawDygraph(
+ Element element, DataTable dataTable, double minY, double maxY) /*-{
+ var chart = new $wnd.Dygraph.GVizChart(element);
+ chart.draw(dataTable,
+ {
+ valueRange: [minY, maxY]
+ });
+ return chart;
+}-*/;
+</pre>
+
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+ <link rel="stylesheet" href="bootstrap.min.css">
+ <link rel="stylesheet" href="site.css">
+
+ <script src="bootstrap.min.js"></script>
+ <script type="text/javascript" src="dygraph-combined.js"></script>
+ </head>
+ <body>
+ <!--
+ "Fork me on github" banner:
+ <a href="http://github.com/danvk/dygraphs"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
+ -->
+
+ <div id="header" class="navbar navbar-fixed-top">
+ <div class="container">
+
+ <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+
+ <h1 class="navbar-brand"><a href="/">dygraphs</a></h1>
+
+
+ <!-- Place everything within .navbar-collapse to hide it until above 768px -->
+ <div class="nav-collapse collapse navbar-responsive-collapse">
+
+ <!-- TODO(danvk): fill in relevant links here -->
+ <ul class="nav nav-pills">
+ <li class="dropdown">
+ <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Documentation<b class="caret"></b></a>
+ <ul id="menu0" class="dropdown-menu" role="menu" aria-labelledby="drop3">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="tutorial.html">Tutorial</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="options.html">Options Reference</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="jsdoc/symbols/Dygraph.html">API Reference</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="data.html">Data Format</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="annotations.html">Annotations</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="css.html">CSS Reference</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="ie.html">Notes on Internet Explorer</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="gwt.html">Notes on GWT</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Examples<b class="caret"></b></a>
+ <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="gallery/">Demo Gallery</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="users.html">List of Users</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="tests/">Test Cases</a></li>
+ </ul>
+ </li>
+ <li><a class="xnavbar-link" href="/fiddle">Play</a></li>
+ <li><a class="xnavbar-link" href="download.html">Download</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" id="drop7" role="button" data-toggle="dropdown" href="#">Community <b class="caret"></b></a>
+ <ul id="menu4" class="dropdown-menu" role="menu" aria-labelledby="drop7">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://blog.dygraphs.com">Blog</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Stack Overflow</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://stackoverflow.com/questions/tagged/dygraphs">Ask a Question</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://groups.google.com/forum/#!forum/dygraphs-users">Mailing List</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Contribute <b class="caret"></b></a>
+ <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="changes.html">Contributors Guide</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://github.com/danvk/dygraphs">Source (Github)</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://code.google.com/p/dygraphs/issues/list">Issue Tracker</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="https://code.google.com/p/dygraphs/issues/entry">Report a Bug</a></li>
+ </ul>
+ </li>
+ </ul> <!-- /tabs -->
+ </div> <!-- /nav-collapse -->
+ </div> <!-- /container -->
+ </div> <!-- /navbar -->
+
+ <div class="container" id="main">
+ <div class="row">
+ <div class="col-lg-12">
--- /dev/null
+<!--#include virtual="header.html" -->
+
+<h2 id="ie">Internet Explorer Compatibility</h2>
+
+<p>The dygraphs library relies heavily on the HTML5 <code><canvas></code> tag, which Microsoft Internet Explorer did not traditionally support. To use Microsoft's native canvas implementation in IE9, you need to set an HTML5 doctype on your page:</p>
+
+<pre>
+<!DOCTYPE html>
+</pre>
+
+<p>When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.</p>
+
+<p>If you want to support previous versions of Internet Explorer (IE6–IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code><canvas></code> tag using VML. You can add excanvas by including the following snippet:</p>
+
+<pre>
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
+ </head>
+</pre>
+
+<p>(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See <a href="https://groups.google.com/group/dygraphs-users/browse_thread/thread/c60709e04bc7fe5f#">this discussion</a> for details. Note that the <meta http-equiv…> line must appear <i>first</i> in the <head> section for this to work properly.)</p>
+
+<p>While VML emulation sounds like it would be slow, it works well in practice for most charts.</p>
+
+<p>One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.</p>
+
+<pre>
+new Dygraph(el, data, {
+ showRoller: true, // note trailing comma
+})</pre>
+
+<p>Most browsers will ignore the trailing comma, but it will break under IE.</p>
+
+<p>You may also need to delay instantiating any dygraphs until after the DOM
+content is ready, as there have been some <a
+ href="https://groups.google.com/d/topic/dygraphs-users/qPX4Syx2kz8/discussion">reports</a>
+that excanvas won't work until this happens. If you're using jQuery, this
+means drawing your charts inside of a <code>$(function() { ... })</code>
+block.</p>
+
+<!--#include virtual="footer.html" -->
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
- <title>dygraphs JavaScript Visualization Library</title>
- <!--[if IE]>
- <script type="text/javascript" src="excanvas.js"></script>
- <![endif]-->
- <script type="text/javascript" src="dygraph-combined.js"></script>
- <link rel="stylesheet" href="style.css">
-
- <!-- Google Analytics -->
- <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-769809-2']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
- </head>
- <body>
- <a href="http://github.com/danvk/dygraphs"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
-
- <div id="nav">
- <h2>Documentation</h2>
- <ul>
- <li><a href="#demo">Demo</a></li>
- <li><a href="#usage">Usage</a></li>
- <li><a href="#ie">IE Compatibility</a></li>
- <li><a href="#gviz">GViz Data</a></li>
- <li><a href="#baseball">Baseball chart</a></li>
- <li><a href="#stock">Stock chart</a></li>
- <li><a href="#gwt">GWT Compatibility</a></li>
- <li><a href="#policy">Data Policy</a></li>
- <li><a href="options.html">Options Reference</a></li>
- <li><a href="jsdoc/symbols/Dygraph.html">JSDoc Reference</a></li>
- <li><a href="data.html">Data Formats</a></li>
- <li><a href="annotations.html">Annotations</a></li>
- </ul>
-
- <h2>Project</h2>
- <ul>
- <li><a href="http://blog.dygraphs.com/">Blog</a></li>
- <li><a href="http://github.com/danvk/dygraphs">Source</a></li>
- <li><a href="http://code.google.com/p/dygraphs/issues/">Issues</a></li>
- <li><a href="http://code.google.com/p/dygraphs/issues/entry">Report Bug</a></li>
- <li><a href="changes.html">Contribute a change</a></li>
- <li><a href="mailto:dygraphs-users [at] googlegroups.com">Contact</a></li>
- </ul>
-
- <h2>Demos/Usage</h2>
- <ul>
- <li><a href="#users">Known Users</a></li>
- <hr/>
- <li><span style="color: red;">New!</span> <a href="gallery/">(browse gallery)</a></li>
- <li><a href="tests/">(browse demos)</a></li>
- <li><a href="tests/demo.html">Basic Demo</a></li>
- <li><a href="tests/gviz.html">GViz Demo</a></li>
- <li><a href="tests/plotter.html">Equation Plotter</a></li>
- <li><a href="tests/perf.html">Performance Test</a></li>
- <li><a href="tests/annotation.html">Annotations</a></li>
- <li><a href="tests/annotation-gviz.html">Annotations (GViz)</a></li>
- <li><a href="tests/fillGraph.html">Filled Chart</a></li>
- <li><a href="tests/perf.html">Fractions</a></li>
- <li><a href="tests/visibility.html">Visibility</a></li>
- <li><a href="tests/label-div.html">Labels in a DIV</a></li>
- <li><a href="tests/numeric-axis.html">Numeric Axis</a></li>
- <li><a href="tests/draw-points.html">Dotted Points</a></li>
- <li><a href="tests/native-format.html">Native Format</a></li>
- <li><a href="tests/grid_dot.html">Crazy Styles</a></li>
- <li><a href="tests/spacing.html">Tick spacing</a></li>
- <li><a href="tests/callback.html">Callbacks</a></li>
- <li><a href="tests/hourly.html">Hourly/Minutely data</a></li>
- <li><a href="tests/isolated-points.html">Isolated Points</a></li>
- <li><a href="tests/missing-data.html">Missing Data</a></li>
- <li><a href="tests/border.html">Bordered chart</a></li>
- <li><a href="tests/custom-bars.html">Custom Bars</a></li>
- <li><a href="tests/customLabel.html">Custom Label Styles</a></li>
- <li><a href="tests/dygraph.html">Minimal Example</a></li>
- <li><a href="tests/negative.html">Negative Numbers</a></li>
- <li><a href="tests/highlighted-region.html">Custom Underlay / background</a></li>
- <li><a href="tests/zoom.html">Tests for zoom operations</a></li>
- <li><a href="tests/logscale.html">Log scale tests</a></li>
- </ul>
+<!--#include virtual="header.html" -->
+
+<style>
+pre.prettyprint {
+ margin-top: 28px;
+}
+</style>
+
+ <h4>dygraphs is a fast, flexible open source JavaScript charting library.</h4>
+ <p>It allows users to explore and interpret dense data sets. Here's how it works:</p>
+
+ <div class="row">
+ <div class="col-lg-4">
+ <b>This JavaScript…</b>
+ <pre class="prettyprint">new Dygraph(div, "ny-vs-sf.txt", {
+ legend: 'always',
+ title: 'NYC vs. SF',
+ showRoller: true,
+ rollPeriod: 14,
+ customBars: true,
+ ylabel: 'Temperature (F)',
+});</pre>
</div>
+ <div class="col-lg-8">
+ <b>…makes this chart!</b>
+ <div id="demodiv"></div>
+ </div>
+ </div>
+
+
+ <script type="text/javascript">
+ g = new Dygraph(
+ document.getElementById("demodiv"),
+ "ny-vs-sf.txt",
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'NYC vs. SF',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ }
+ );
+ </script>
- <div id="content">
- <h1>dygraphs JavaScript Visualization Library</h1>
-
- <p><a href="http://github.com/danvk/dygraphs">http://github.com/danvk/dygraphs</a></p>
- <p>For help, <a
- href="http://stackoverflow.com/questions/ask?tags=dygraphs+javascript">ask
- a question</a> on StackOverflow. You may also be interested in the <a
- href="http://blog.dygraphs.com/">blog</a>, <a
- href="http://groups.google.com/group/dygraphs-users">mailing list</a>, <a
- href="tests/">demos</a> and <a
- href="http://code.google.com/p/dygraphs/issues/">open issues</a>.</p>
-
- <p>dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.</p>
-
- <h3 id="demo">A demo is worth a thousand words:</h3>
-
- <p style="font-size:0.8em">(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)</p>
-
- <div id="demodiv" style="width:800px; height:320px;"></div>
- <script type="text/javascript">
- g = new Dygraph(
- document.getElementById("demodiv"),
- "ny-vs-sf.txt",
- {
- rollPeriod: 14,
- showRoller: true,
- customBars: true,
- title: 'Daily Temperatures in New York vs. San Francisco',
- ylabel: 'Temperature (F)',
- legend: 'always',
- labelsDivStyles: { 'textAlign': 'right' }
- }
- );
- </script>
-
- <h4>Some things to notice:</h4>
- <ul>
- <li>There's less seasonal temperature variation in SF than in NY.</li>
- <li>The difference is about 15° F for SF vs. 50° F for NY.</li>
- <li>The daily data (set rolling period to 1) is quite noisy and hides this conclusion.</li>
- <li>Using a 14-day moving average makes it clearer. A 100-day rolling period averages out nearly all the specifics from the data.</li>
- <li>There's a gap in the data for SF, when the weather station was down (zoom into October 2007 to see it).</li>
- <li>The bands around each point indicate average highs and lows.</li>
- <li>There is a <em>lot</em> of data in this chart: low, average and high for each city on each day of a three year period ≈ 6000 data points in all.</li>
- </ul>
-
- <p>dygraphs allows the user to explore the data and discover these facts.</p>
-
- <p>For more demos, browse the dygraph <a href="tests/">tests</a>
- directory. To see other people who are using dygraphs, check out the <a
- href="#users">known users</a>.</p>
+ <p>The chart is <i>interactive</i>: you can mouse over to highlight individual values. You can click and drag to zoom. Double-clicking will zoom you back out. Shift-drag will pan. You can change the number and hit enter to adjust the averaging period.</p>
+ <div class="row smalltop">
+ <div class="col-lg-8">
<h3>Features</h3>
- <p>Some of the features of dygraphs:</p>
- <ul>
- <li>Plots time series without using an external server or Flash</li>
- <li>Works in Internet Explorer (using excanvas)</li>
- <li>Lightweight (69kb) and responsive</li>
- <li>Displays values on mouseover, making interaction easily discoverable</li>
- <li>Supports error bands around data series</li>
- <li>Interactive zoom</li>
- <li>Displays Annotations on the chart</li>
- <li>Adjustable averaging period</li>
- <li>Can intelligently chart fractions</li>
- <li>Customizable click-through actions</li>
- <li>Compatible with the Google Visualization API</li>
- <li>Intelligent defaults make it easy to use</li>
- </ul>
-
- <h2 id="usage">Usage</h2>
-
- <p>To use dygraphs, include the <code><a href="http://github.com/danvk/dygraphs/downloads/">dygraph-combined.js</a></code> JavaScript file and instantiate a <code>Dygraph</code> object.</p>
-
- <p>Here's a basic example to get things started:</p>
-
- <div class="example" style="clear:both;">
- <div class="codeblock" style="float:left;width:400px;">
- <h3 style="text-align:center">HTML</h3>
- <code>
- <pre>
-<html>
-<head>
-<script type="text/javascript"
- src="dygraph-combined.js"></script>
-</head>
-<body>
-<div id="graphdiv"></div>
-<script type="text/javascript">
- g = new Dygraph(
-
- // containing div
- document.getElementById("graphdiv"),
-
- // CSV or path to a CSV file.
- "Date,Temperature\n" +
- "2008-05-07,75\n" +
- "2008-05-08,70\n" +
- "2008-05-09,80\n"
-
- );
-</script>
-</body>
-</html>
-</pre>
- </code>
- </div>
- <div class="codeoutput" style="float:left;">
- <h3 style="text-align:center">OUTPUT</h3>
- <div id="graphdiv"></div>
- <script type="text/javascript">
- g = new Dygraph(
-
- // containing div
- document.getElementById("graphdiv"),
-
- // CSV or path to a CSV file.
- "Date,Temperature\n" +
- "2008-05-07,75\n" +
- "2008-05-08,70\n" +
- "2008-05-09,80\n"
- );
- </script>
- </div>
- </div>
-
- <p style="clear:both">In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column headers), resizes its container to a reasonable default, calculates appropriate axis ranges and tick marks and draws the graph.</p>
-
- <p>In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor doesn't contain a newline, it will be interpreted as the path to a CSV file. The Dygraph 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>
-
- <div class="example" style="clear:both;">
- <div class="codeblock" style="float:left;width:400px;">
- <h3 style="text-align:center">HTML</h3>
- <code>
-<pre>
-<html>
-<head>
-<script type="text/javascript"
- src="dygraph-combined.js"></script>
-</head>
-<body>
-<div id="graphdiv2"
- style="width:500px; height:300px;"></div>
-<script type="text/javascript">
- g2 = new Dygraph(
- document.getElementById("graphdiv2"),
- "temperatures.csv", // path to CSV file
- {} // options
- );
-</script>
-</body>
-</html>
-</pre>
- </code>
- </div>
- <div class="codeoutput" style="float:left;">
- <h3 style="text-align:center">OUTPUT</h3>
- <div id="graphdiv2" style="width:500px; height:300px;"></div>
- <script type="text/javascript">
- g2 = new Dygraph(
- document.getElementById("graphdiv2"),
- "temperatures.csv",
- {}
- );
- </script>
- </div>
- </div>
-
- <p style="clear:both;">The file used is <code><a href="temperatures.csv">temperatures.csv</a></code>.</p>
-
- <p>There are a few things to note here:</p>
-
<ul>
- <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.</li>
- <li>The data is very spiky. A moving average would be easier to interpret.</li>
+ <li>Handles <strong>huge data sets</strong>: dygraphs plots millions of points without getting bogged down.
+ <li><strong>Interactive out of the box</strong>: zoom, pan and mouseover are on by default.
+ <li>Strong support for <strong>error bars</strong> / confidence intervals.
+ <li><strong>Highly customizable</strong>: using options and custom callbacks, you can make dygraphs do almost anything.
+ <li>dygraphs is <strong>highly compatible</strong>: it works in all major browsers (including IE8). You can even <strong>pinch to zoom</strong> on mobile/tablet devices!
+ <li>There's an <strong>active community</strong> developing and supporting dygraphs.</li>
</ul>
- <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 <code>rollPeriod</code> option. Here's how it's done:</p>
-
- <div class="example" style="clear:both;">
- <div class="codeblock" style="float:left;width:400px;">
- <h3 style="text-align:center">HTML</h3>
- <code>
-<pre>
-<html>
-<head>
-<script type="text/javascript"
- src="dygraph-combined.js"></script>
-</head>
-<body>
-<div id="graphdiv3"
- style="width:500px; height:300px;"></div>
-<script type="text/javascript">
- g3 = new Dygraph(
- document.getElementById("graphdiv3"),
- "temperatures.csv",
- {
- rollPeriod: 7,
- showRoller: true
- }
- );
-</script>
-</body>
-</html>
-</pre>
- </code>
- </div>
- <div class="codeoutput" style="float:left;">
- <h3 style="text-align:center">OUTPUT</h3>
- <div id="graphdiv3" style="width:500px; height:300px;"></div>
- <script type="text/javascript">
- g3 = new Dygraph(
- document.getElementById("graphdiv3"),
- "temperatures.csv",
- {
- rollPeriod: 7,
- showRoller: true
- }
- );
- </script>
- </div>
- </div>
-
- <p style="clear:both;">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). Also note that we've explicitly set the size of the chart div.</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 <em>±n</em> 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. <em>σ = sqrt( (σ<sub>1<sup>2</sup></sub> + σ<sub>2<sup>2</sup></sub> + ... + σ<sub>n<sup>2</sup></sub>) / n )</em></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 at <a href="twonormals.csv">twonormals.csv</a>.</p>
-
- <div class="example" style="clear:both;">
- <div class="codeblock" style="float:left;width:400px;">
- <h3 style="text-align:center">HTML</h3>
- <code>
-<pre>
-<html>
-<head>
-<script type="text/javascript"
- src="combined.js"></script>
-</head>
-<body>
-<div id="graphdiv4"
- style="width:480px; height:320px;"></div>
-<script type="text/javascript">
- g4 = new Dygraph(
- document.getElementById("graphdiv4"),
- "twonormals.csv",
- {
- rollPeriod: 7,
- showRoller: true,
- errorBars: true,
- valueRange: [50,125]
- }
- );
-</script>
-</body>
-</html>
-</pre>
- </code>
- </div>
- <div class="codeoutput" style="float:left;">
- <h3 style="text-align:center">OUTPUT</h3>
- <div id="graphdiv4" style="width:480px; height:320px;"></div>
- <script type="text/javascript">
- g4 = new Dygraph(
- document.getElementById("graphdiv4"),
- "twonormals.csv",
- {
- rollPeriod: 7,
- showRoller: true,
- errorBars: true,
- valueRange: [50,125]
- }
- );
- </script>
- </div>
- </div>
+ <h3>Getting Started</h3>
+ <p>Start by <a href="download.html">downloading dygraphs</a>. Then read the <a href="tutorial.html">Tutorial</a> to learn how to use it, or just <a href="http://dygraphs.com/fiddle">play with dygraphs</a> on jsFiddle.</p>
- <p style="clear:both;">Things to note here:</p>
+ <p>Once you've got your feet wet, look for inspiration in the <a href="gallery/">demo gallery</a> or check out our <a href="users.html">list of users</a>.</p>
+ </div>
+ <div class="col-lg-4">
+ <h3>Quick Links</h3>
<ul>
- <li>The <strong>errorBars</strong> option affects both the interpretation of the CSV file and the display of the graph. When <strong>errorBars</strong> is set to true, each line is interpreted as <em>YYYYMMDD</em>, <em>A</em>, <em>sigma_A</em>, <em>B</em>, <em>sigma_B</em>, …</li>
- <li>The first line of the CSV file doesn't mention the error columns. In this case, it's just "Date,Series1,Series2".</li>
- <li>The averaging visibly affects the error bars. This is most clear if you crank up the rolling period to something like 100 days. For the earliest dates, there won't be 100 data points to average so the signal will be noisier. The error bars get smaller like sqrt(N) going forward in time until there's a full 100 points to average.</li>
- <li>The error bars are partially transparent. This can be seen when they overlap one another.</li>
+ <li><a href="tutorial.html">Tutorial</a>
+ <li><a href="options.html">Options Reference</a>
+ <li><a href="jsdoc/symbols/Dygraph.html">API Reference</a>
+ <li><a href="css.html">CSS Reference</a>
+ <li><a href="data.html">Data format</a> documentation
+ <li><a href="http://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a> on Stack Overflow.</a>
+ <li><a href="https://groups.google.com/forum/#!forum/dygraphs-users">Mailing List</a>
+ <li><a href="http://blog.dygraphs.com/">dygraphs blog</a>
+ <li><a href="legal.html">Policy & Licensing</a>
</ul>
+ </div>
- <h2 id="ie">Internet Explorer Compatibility</h2>
-
- <p>The dygraphs library relies heavily on the HTML5 <code><canvas></code> tag, which Microsoft Internet Explorer did not traditionally support. To use Microsoft's native canvas implementation in IE9, you need to set an HTML5 doctype on your page:</p>
-
-<pre>
-<!DOCTYPE html>
-</pre>
-
- <p>When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.</p>
-
- <p>If you want to support previous versions of Internet Explorer (IE6–IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code><canvas></code> tag using VML. You can add excanvas by including the following snippet:</p>
-
-<pre>
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
- </head>
-</pre>
-
-<p>(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See <a href="https://groups.google.com/group/dygraphs-users/browse_thread/thread/c60709e04bc7fe5f#">this discussion</a> for details. Note that the <meta http-equiv…> line must appear <i>first</i> in the <head> section for this to work properly.)</p>
-
- <p>While VML emulation sounds like it would be slow, it works well in practice for most charts.</p>
-
- <p>One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.</p>
-
-<pre>
-new Dygraph(el, data, {
- showRoller: true, // note trailing comma
-})</pre>
-
- <p>Most browsers will ignore the trailing comma, but it will break under IE.</p>
-
- <p>You may also need to delay instantiating any dygraphs until after the DOM
- content is ready, as there have been some <a
- href="https://groups.google.com/d/topic/dygraphs-users/qPX4Syx2kz8/discussion">reports</a>
- that excanvas won't work until this happens. If you're using jQuery, this
- means drawing your charts inside of a <code>$(function() { ... })</code>
- block.</p>
-
- <h2 id="gviz">GViz Data</h2>
-
- <p>The <a
- href="http://code.google.com/apis/visualization/documentation/index.html">Google
- Visualization API</a> provides a standard interface for describing data.
- Once you've specified your data using this API, you can plug in any
- GViz-compatible visualization. dygraphs is such a visualization. In
- particular, it can be used as a drop-in replacement for the
- AnnotatedTimeline visualization used on Google Finance and other sites. To
- see how this works, check out the <a href="tests/annotation-gviz.html">gviz
- annotation demo.</a></p>
-
- <p>For a simple demonstration of how to use dygraphs a GViz visualization, see <a href="http://danvk.org/dygraphs/tests/gviz.html">http://danvk.org/dygraphs/tests/gviz.html</a>. dygraphs can also be used as a GViz gadget. This allows it to be embedded inside of a Google Spreadsheet. For a demonstration of this, see <a href="http://spreadsheets.google.com/ccc?key=0Anx1yCqeL8YUdDR1c3pPREhraGhkWmdhaURjOXRncXc&hl=en">this spreadsheet</a>. The URL for the gadget is <code><a href="http://danvk.org/dygraphs/gadget.xml">http://danvk.org/dygraphs/gadget.xml</a></code>.</p>
-
- <p>Here's an example of a published gviz gadget using dygraphs:</p>
-
- <script src="http://spreadsheets.google.com/gpub?url=http%3A%2F%2Fkb8jbn8l90ocl9n4b14jrcvp61ceqis5.spreadsheets.gmodules.com%2Fgadgets%2Fifr%3Fup__table_query_url%3Dhttp%253A%252F%252Fspreadsheets.google.com%252Ftq%253Frange%253DA1%25253AC31%2526headers%253D-1%2526key%253D0Anx1yCqeL8YUdDR1c3pPREhraGhkWmdhaURjOXRncXc%2526gid%253D0%2526pub%253D1%26up__table_query_refresh_interval%3D300%26url%3Dhttp%253A%252F%252Fdanvk.org%252Fdygraphs%252Fgadget.xml%253Fnocache&height=215&width=530"></script>
-
- <h2 id="baseball">Charting Fractions</h2>
-
- <p>Situations often arise where you want to plot fractions, e.g. the fraction of respondents in a poll who said they'd vote for candidate X or the number of hits divided by at bats (baseball's batting average). Fractions require special treatment for two main reasons:</p>
-
- <ul>
- <li>The average of <code>a1/b1</code> and <code>a2/b2</code> is <code>(a1+a2)/(b1+b2)</code>, not <code>(a1/b1 + a2/b2)/2</code>.</li>
- <li>The normal approximation is not always applicable and more sophisticated confidence intervals (e.g. the <a href="http://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval">Wilson confidence interval</a>) must be employed to avoid ratios that exceed 100% or go below 0%.</li>
- </ul>
-
- <p>Fortunately, dygraphs handles both of these for you! Here's a chart and the command that generated it:</p>
-
- <div style="width:750px; text-align:center; font-weight: bold; font-size: 125%;">Batting Average for Ichiro Suzuki vs. Mariners (2004)</div>
- <div id="baseballdiv" style="width:750px; height:300px;"></div>
- <script type="text/javascript">
- new Dygraph(
- document.getElementById("baseballdiv"),
- "suzuki-mariners.txt",
- {
- fractions: true,
- errorBars: true,
- showRoller: true,
- rollPeriod: 15
- }
- );
- </script>
-
- <p>Command:</p>
-<pre>
- new Dygraph(
- document.getElementById("baseballdiv"),
- "suzuki-mariners.txt",
- {
- fractions: true,
- errorBars: true,
- showRoller: true,
- rollPeriod: 15
- }
- );
-</pre>
-
- <p>The <code>fractions</code> option indicates that the values in each column should be parsed as fractions (e.g. "1/2" instead of "0.5"). The <code>errorBars</code> option indicates that we'd like to see a confidence interval around each data point. By default, when <code>fractions</code> is set, you get a Wilson confidence interval. If you look carefully at the chart, you can see that the error bars are asymmetric.</p>
-
- <p>A couple things to notice about this chart:</p>
-
- <ul>
- <li>The error bars for Ichiro's batting average are larger than for the Mariners', since he has far fewer at bats than his team.</li>
- <li>dygraphs makes it easy to see "batting average over the last 30 games". This is ordinarily quite difficult to compute. It makes it clear where the "hot" and "cold" part of Suzuki's season were.</li>
- <li>If you set the averaging period to something large, like 200, you'll see the team's and player's batting average through that game. The final number is the overall batting average for the season.</li>
- <li>Where the error bars do not overlap, we can say with 95% confidence that the series differ. There is a better than 95% chance that Ichiro was a better hitter than his team as a whole in 2004, the year he won the batting title.</li>
- </ul>
-
- <h2 id="stock">One last demo</h2>
-
- <p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
-
- <div id="dow_chart" style="width:750px; height:350px;"></div>
- <p><b>Display: </b>
- <input type=checkbox id=0 onClick="stockchange(this)" checked>
- <label for="0"> Nominal</label>
- <input type=checkbox id=1 onClick="stockchange(this)" checked>
- <label for="1"> Real</label>
- <input type=checkbox id=ann onClick="annotationschange(this)" checked>
- <label for="ann"> Annotations</label>
- </p>
-
- <script type="text/javascript">
- var stock_annotations = [
- {
- series: "Real",
- x: "1929-08-15",
- shortText: "A",
- text: "1929 Stock Market Peak"
- },
- {
- series: "Nominal",
- x: "1987-08-15",
- shortText: "B",
- text: "1987 Crash"
- },
- {
- series: "Nominal",
- x: "1999-12-15",
- shortText: "C",
- text: "1999 (.com) Peak"
- },
- {
- series: "Nominal",
- x: "2007-10-15",
- shortText: "D",
- text: "All-Time Market Peak"
- }
- ];
-
- // From http://www.econstats.com/eqty/eq_d_mi_3.csv
- stockchart = new Dygraph(
- document.getElementById('dow_chart'),
- "dow.txt",
- {
- showRoller: true,
- customBars: true,
- labelsKMB: true,
- drawCallback: function(g, is_initial) {
- if (!is_initial) return;
- g.setAnnotations( stock_annotations );
- }
- }
- );
-
- function stockchange(el) {
- stockchart.setVisibility(el.id, el.checked);
- }
-
- function annotationschange(el) {
- if (el.checked) {
- stockchart.setAnnotations(stock_annotations);
- } else {
- stockchart.setAnnotations([]);
- }
- }
- </script>
-<!--
-
-Here is a script to regenerate the Dow Jones plot:
-
-# Get unadjusted DJIA data in a nice format:
-curl -O http://www.econstats.com/eqty/eq_d_mi_3.csv
-sed '1,17d' eq_d_mi_3.csv | cut -d, -f1,6 | perl -pe 's/(\d{4}-\d\d)-\d\d/$1/g' | perl -pe 's/, */\t/' | grep -v 'na' | perl -ne 'chomp; ($m,$v) = split/\t/; $close{$m} = $v; if ($low{$m} == 0 || $v < $low{$m}) { $low{$m}=$v } if ($v > $high{$m}) { $high{$m} = $v } END { for $x(sort keys %close) { print "$x\t$low{$x}\t$close{$x}\t$high{$x}\n" } } ' > monthly-djia.tsv
-
-# Fetch and format the CPI data:
-curl 'http://data.bls.gov/PDQ/servlet/SurveyOutputServlet?series_id=CUUR0000SA0&years_option=all_years&periods_option=all_periods&output_type=column&output_format=text&delimiter=comma' > cpi-u.txt
-sed '1,/Series Id,Year,/d' cpi-u.txt | sed '/^$/,$d' | cut -d, -f2,3,4 | perl -ne 'print if /,M(0[0-9]|1[012]),/' | perl -pe 's/(\d{4}),M(\d{2}),/$1-$2\t/g' > cpi-u.tsv
-
-# Merge:
-join -t' ' cpi-u.tsv monthly-djia.tsv > annotated-djia.tsv
-perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) = split /\t/; $cpi /= 100.0; print "$m-15,$low;$close;$high,",($low/$cpi),";",($close/$cpi),";",($high/$cpi),"\n"' annotated-djia.tsv > dow.txt
-
--->
-
- <h2 id="options">Other Options</h2>
-
- <p>In addition to the options mentioned above (<code>showRoller</code>, <code>rollPeriod</code>, <code>errorBars</code>, <code>valueRange</code>), there are <i>many</i> others.</p>
-
- <p>For a full list, see the <a href="options.html">Dygraphs Options Reference</a> page.</p>
-
- <h2>Common Gotchas</h2>
-
- <p>Here are a few problems that I've frequently run into while using the dygraphs library.</p>
-
- <ul>
- <li>If your chart doesn't display, be sure to check your browser's JavaScript error console. dygraphs makes every attempt to log errors and warnings, and these can often guide you in the right direction.</li>
- <li>Make sure your CSV files are readable! If your graph isn't showing up, the XMLHttpRequest for the CSV file may be failing. You can determine whether this is the case using tools like <a 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>… . 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 Dygraph, put it inside a table with <code>align = center</code> set.</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>
- <li>Make sure you don't have any trailing commas in your call to the Dygraph constructor or in the options parameter. Firefox, Chrome and Safari ignore these but they can cause a graph to not display in Internet Explorer.</li>
- </ul>
-
- <h2 id="gwt">GWT Compatibility</h2>
- <p>There is currently no GWT wrapper around Dygraphs, however there is a class that can be used to easily load Dygraphs into the browser. To use it, include the generated dygraph-gwt.jar file in your classpath and add the following line to your GWT module:</p>
-
-<pre>
-<inherits name="org.danvk.dygraphs"/>
-</pre>
-
- <p>Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser. You can use <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html">JSNI</a> to call Dygraphs from your GWT code, as in the example below. The example uses the <a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted">Visualization API for GWT</a> and the <a href="#gviz">Dygraphs GViz API.</a></p>
-
-<pre>
-public static native JavaScriptObject drawDygraph(
- Element element, DataTable dataTable, double minY, double maxY) /*-{
- var chart = new $wnd.Dygraph.GVizChart(element);
- chart.draw(dataTable,
- {
- valueRange: [minY, maxY]
- });
- return chart;
-}-*/;
-</pre>
-
- <a name="users" />
- <h2>Known Users</h2>
- <p>Since its public release in late 2009, dygraphs has found many users
- across the web. This is a small collection of the uses that we know about.
- If you're using dygraphs, please send <a
- href="mailto:dan@dygraphs.com">Dan</a> a link and he'll add it to this
- list.</p>
-
- <p>dygraphs was originally developed at Google and has found wide use on
- internal dashboards and servers there. There are also a few uses of
- dygraphs on public Google products:</p>
-
- <ul class='padded-list'>
- <li><a href="http://www.google.com/trends/correlate/search?e=id:20xKcnNqHrk&t=weekly">Google Correlate</a><br/>
- <span class="desc">Uses dygraphs for time series visualization. Mostly a standard configuration, with just a few tweaks to match Google style.</span></li>
-
- <li><a href="http://www.google.com/trends/correlate/draw?p=us">Google Correlate - Search by Drawing</a><br/>
- <span class="desc">This is a highly customized configuration which lets the user draw a time series. Based on <a href="tests/drawing.html">this demo</a>.</span></li>
-
- <li><a href="https://www.google.com/latitude/b/0/history/manage">Google Latitude History Dashboard</a><br/>
- <span class="desc">Uses mouse interaction callbacks to synchronize time series points with markers on a Google Map.</span></li>
- </ul>
-
- <p>dygraphs has also found use in other organizations:</p>
-
- <ul class='padded-list'>
- <li><a
- href="http://iswa.ccmc.gsfc.nasa.gov:8080/IswaSystemWebApp/index.jsp?i_1=388&l_1=99&t_1=316&w_1=800&h_1=400&s_1=0!3!0!ACE.B_x!ACE.B_y!ACE.B_z!">Integrated
- Space Weather Analysis System</a> (NASA)<br/>
- <span class="desc">“We use [dygraphs] in the Integrated Space Weather
- Analysis System available from the Space Weather Laboratory at NASA Goddard
- Space Flight Center. It works quite well for time series data from various
- missions and simulations that we store.”</span></li>
-
-
- <li><a href="http://www.eutelsat.fr">Eutelsat</a><br/>
- <span class="desc">“Eutelsat uses dygraphs for charting spacecraft
- telemetry for a fleet of 25 geostationary satellites. The spacecraft
- engineers are very happy with it. All satellite combined are producing
- about 200 millions unique data points per day so we really appreciate the
- excellent performance of dygraphs.”</span></li>
-
- <li><a href="http://www.10gen.com/mongodb-monitoring-service">10gen MongoDB
- Monitoring Service</a><br/>
- <span class="desc">A free monitoring service for MongoDB from 10gen (the
- creators of MongoDB). Used by thousands of servers and users. Makes use of
- <a href="tests/synchronize.html">synchronized charts</a> to display many
- quantities simultaneously.</span></li>
-
- <li><a href="http://duckduckgo.com/traffic.html">Duck Duck Go Traffic Dashboard</a><br/>
- <span class="desc">DDG uses dygraphs to display a public chart of their daily traffic. They use annotations and the moving average features.</span></li>
-
- <li><a href="http://toolserver.org/~dartar/moodbar/">Wikimedia Foundation - Moodbar data dashboard</a><br/>
- <span class="desc">dygraphs is used internally at Wikimedia as a handy solution to monitor the
- results of a bunch of small experiments.</span></li>
-
- <li><a href="http://code.google.com/p/quadrant-framework/">quadrant-framework</a> (MySQL Load Testing Framework)<br/>
- <span class="desc">A user friendly framework for creating and visualizing
- MySQL database load test jobs. For more information on its use of dygraphs,
- see <a href="http://themattreid.com/wordpress/2011/05/20/quadrant-framework-rev7-update-adds-dygraphs-support/">this post</a>.</span></li>
-
- <li><a href="http://spinwave.wordpress.com/2011/03/28/spinwave-systems-enables-energy-efficiency-case-studies/">Spinwave Systems</a> (Home energy monitoring)<br/>
- <span class="desc">dygraphs is used to chart energy usage over time.</span></li>
-
-
- <li><a href="http://www.socib.es/jwebchart/?file=http://thredds.socib.es/thredds/dodsC/mooring/weather_station/mobims_calamillor-scb_met001/L1/dep0001_mobims-calamillor_scb-met001_L1_latest.nc">Jwebchart</a><br/>
- <span class="desc">
- jWebChart is a stand-alone and Thredds' embedded plotting system for
- netCDF files. NetCDF is a common standard for the storage and
- distribution of scientific data.
- </span></li>
-
- <li><a href="http://ngrams.cavorite.com/">n-gramas - Explore las tendencias en los artÃculos periodÃsticos de Colombia.</a><br/>
-
-
- <span class="desc">(English: "Explore trends in newspaper articles of
- Colombia"). dygraphs is used for displaying the results of this n-grams
- viewer. Uses an extension for exporting the plots as PNG images
- (<a href="http://cavorite.com/labs/js/dygraphs-export/">[1]</a>, <a href="https://github.com/cavorite/dygraphs">[2]</a>).
- </span></li>
-
- <li><a href="http://www.glerl.noaa.gov/data/now/wlevels/dbd/altSite.html">NOAA Great Lakes Water Level Dashboard</a><br/>
- <span class="desc">The Great Lakes Water Level dashboard was designed to help users view, understand, and compare Great Lakes surface water elevation data and forecasts from a variety of different sources, and across a variety of time scales ranging from monthly average values, to annual and multi-decadal values. First developed in Adobe Flash, a HTML 5 compatible version has been in the works and a functional draft is available here.</span></li>
-
- </ul>
-
- <p>Are you using dygraphs? Please let <a href="mailto:dan@dygraphs.com">Dan</a> know and he'll add your link here!</p>
-
-
- <h2 id="policy">Data Policy</h2>
- <p>dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client's browser.</p>
-
- <p style="font-size:0.8em">Created May 9, 2008 by <a href=mailto:danvdk@gmail.com>Dan Vanderkam</a></p>
</div>
-
-</body>
-</html>
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+<!--#include virtual="header.html" -->
+
+<h2>Legal Information</h2>
+
+<p>dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client's browser.</p>
+
+<p>dygraphs is available under the MIT license, included in LICENSE.txt.</p>
+
+<pre>dygraphs uses:
+ - rgbcolor.js (Public Domain)
+ - strftime.js (BSD License)
+ - excanvas.js (Apache License)
+ - YUI compressor (BSD License)
+ - JsDoc Toolkit (MIT license)
+ - stacktrace.js is public domain
+
+automated tests use:
+ - auto_tests/lib/jquery-1.4.2.js (MIT & GPL2)
+ - auto_tests/lib/Asserts.js (Apache 2.0 License)
+ - auto-tests/lib/JsTestDriver-1.3.3cjar (Apache 2.0 License
+
+Linter uses:
+ - JSHint (modified MIT license; prevents evil)
+
+rgbcolor: http://www.phpied.com/rgb-color-parser-in-javascript/
+strftime: http://tech.bluesmoon.info/2008/04/strftime-in-javascript.html
+excanvas: http://code.google.com/p/explorercanvas/
+yui compressor: http://developer.yahoo.com/yui/compressor/
+jsdoc toolkit: http://code.google.com/p/jsdoc-toolkit/
+
+jquery: http://code.jquery.com/jquery-1.4.2.js
+Asserts.js: http://www.google.com/codesearch/p?#3tsINRJRCro/trunk/JsTestDriver/src/com/google/jstestdriver/javascript/Asserts.js
+JSTestDriver: http://code.google.com/p/js-test-driver/
+
+JSHint: jshint.com
+</pre>
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-a_download
+ */
+;window.Modernizr=function(a,b,c){function t(a){i.cssText=a}function u(a,b){return t(prefixes.join(a+";")+(b||""))}function v(a,b){return typeof a===b}function w(a,b){return!!~(""+a).indexOf(b)}function x(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:v(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r={}.hasOwnProperty,s;!v(r,"undefined")&&!v(r.call,"undefined")?s=function(a,b){return r.call(a,b)}:s=function(a,b){return b in a&&v(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e});for(var y in l)s(l,y)&&(q=y.toLowerCase(),e[q]=l[y](),o.push((e[q]?"":"no-")+q));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)s(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},t(""),h=j=null,e._version=d,e}(this,this.document),Modernizr.addTest("adownload","download"in document.createElement("a"));
\ No newline at end of file
--- /dev/null
+/*
+ * CSS for the options reference page.
+ * Putting it in its own file allows for iteration w/o re-running
+ * generate-documentation.py
+ */
+
+p.option {
+ padding-left: 25px;
+}
+div.parameters {
+ padding-left: 15px;
+}
+#main { margin-top: 0; }
+.row { margin-top: 0; }
+.dygraphs-side-nav .nav>li>a {
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+
+.dygraphs-side-nav {
+ background: #f9f9f9;
+ border-radius: 5px;
+ display: table;
+ overflow-y: scroll;
+ min-width: 200px;
+}
+
+/* This prevents the sidenav from floating on top of the content on small
+ * screens, tablet and mobile.
+ * Where does 992px come from? */
+@media screen and (max-width: 992px) {
+ .dygraphs-side-nav.affix {
+ position: relative;
+ }
+}
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>dygraphs per-series and per-axis options</title>
- <style type="text/css">
- code { white-space: pre; border: 1px dashed black; display: block; }
- pre { white-space: pre; border: 1px dashed black; }
- body { max-width: 800px; }
- </style>
- </head>
- <body>
- <h2>dygraphs per-series and per-axis options</h2>
-
- <p>When you create a Dygraph object, your code looks something like
- this:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- <i>data</i>,
- { <i>options</i> });
- </code>
-
- <p>This document is about some of the values you can put in the
- <i>options</i> parameter.</p>
-
- <h3>per-series options</h3>
-
- <p>Typically, an option applies to the whole chart: if you set the
- strokeWidth option, it will apply to all data-series equally:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- "X,Y1,Y2,Y3\n" +
- "1,2,3,4\n" +
- ...,
- {
- strokeWidth: 5
- });
- </code>
-
- <p>Some options, however, can be applied on a per-series or a per-axis
- basis. For instance, to set three different strokeWidths, you could
- write:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- "X,Y1,Y2,Y3\n" +
- "1,2,3,4\n" +
- ...,
- {
- strokeWidth: 5, // default stroke width
- 'Y1': {
- strokeWidth: 3 // Y1 gets a special value.
- },
- 'Y3': {
- strokeWidth: 1 // so does Y3.
+<!--#include virtual="header.html" -->
+<h2>dygraphs per-series and per-axis options</h2>
+
+<p>When you create a Dygraph object, your code looks something like
+this:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ <i>data</i>,
+ { <i>options</i> });
+</pre>
+
+<p>This document is about some of the values you can put in the
+<i>options</i> parameter.</p>
+
+<h3>per-series options</h3>
+
+<p>Typically, an option applies to the whole chart: if you set the
+strokeWidth option, it will apply to all data-series equally:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ "X,Y1,Y2,Y3\n" +
+ "1,2,3,4\n" +
+ ...,
+ {
+ strokeWidth: 5
+ });
+</pre>
+
+<p>Some options, however, can be applied on a per-series or a per-axis
+basis. For instance, to set three different strokeWidths, you could
+write:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ "X,Y1,Y2,Y3\n" +
+ "1,2,3,4\n" +
+ ...,
+ {
+ strokeWidth: 5, // default stroke width
+ 'Y1': {
+ strokeWidth: 3 // Y1 gets a special value.
+ },
+ 'Y3': {
+ strokeWidth: 1 // so does Y3.
+ }
+ });
+</pre>
+
+<p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>
+
+<h3>per-axis options</h3>
+
+<p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>
+
+<p>Here's how you can do that:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ "X,Y1,Y2,Y3\n" +
+ "1,2,3,4\n" +
+ ...,
+ {
+ axes: {
+ x: {
+ axisLabelFormatter: function(x) {
+ return 'x' + x;
}
- });
- </code>
-
- <p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>
-
- <h3>per-axis options</h3>
-
- <p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>
-
- <p>Here's how you can do that:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- "X,Y1,Y2,Y3\n" +
- "1,2,3,4\n" +
- ...,
- {
- axes: {
- x: {
- axisLabelFormatter: function(x) {
- return 'x' + x;
- }
- },
- y: {
- axisLabelFormatter: function(y) {
- return 'y' + y;
- }
- }
+ },
+ y: {
+ axisLabelFormatter: function(y) {
+ return 'y' + y;
}
- });
- </code>
-
- <p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
- secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
- top level, it will apply to all axes.</p>
-
- <p>To see this in practice, check out the <a
- href="tests/two-axes.html">two-axes</a> test.</p>
-
- <!-- Google Analytics -->
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-769809-2']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-</script>
- </body>
-</html>
+ }
+ }
+ });
+</pre>
+
+<p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
+secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
+top level, it will apply to all axes.</p>
+
+<p>To see this in practice, check out the <a
+href="tests/two-axes.html">two-axes</a> test.</p>
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+body {
+ padding-top: 100px; /* required for fixed header */
+}
+#header {
+ background: #f9f9f9;
+ margin-bottom: 10px;
+ border-bottom: 1px solid lightgray;
+}
+.navbar-brand {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.navbar-brand a, navbar-brand a:visited {
+ color: black;
+ font-size: 38px;
+}
+.navbar-brand a:hover {
+ text-decoration: none;
+}
+#header ul.nav {
+ display: inline-block;
+}
+#header ul.nav {
+ float: right;
+ margin-top: 20px;
+ margin-right: 20px;
+}
+@media screen and (min-width: 992px) {
+ /* without this, the right-most menu goes off the page */
+ #header ul.nav {
+ margin-right: 75px;
+ }
+}
+@media screen and (min-width: 768px) and (max-width: 992px) {
+ /* The topnav drops down to the next line between these sizes. We must accomodate. */
+ body {
+ padding-top: 130px;
+ }
+ /* center the menu and logo */
+ .navbar-brand {
+ float: none;
+ text-align: center;
+ max-width: none;
+ }
+ #header ul.nav {
+ float: none;
+ display: table; /* shrink to fit */
+ margin-left: auto; /* center */
+ margin-right: auto;
+ }
+}
+@media screen and (max-width: 768px) {
+ #header .nav-collapse.in li, #header .nav-collapse.collapsing li {
+ float: none;
+ }
+ #header .nav-collapse.in .nav, #header .nav-collapse.collapsing .nav {
+ float: none;
+ }
+}
+code {
+ white-space: pre-wrap;
+ color: black;
+ background: transparent;
+}
+#demodiv {
+ width: 100%;
+ height: 320px;
+ margin-bottom: 10px;
+}
+@media screen and (max-width: 768px) {
+ /* aspect ratio is weird on phones */
+ #demodiv {
+ height: 200px;
+ }
+}
+.dygraph-axis-label {
+ font-size: 12px;
+}
+.dygraph-title {
+ font-size: 16px;
+}
+h1{
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+pre{
+ background: #f9f9f9;
+}
+/*
+#main {
+ margin-top: 30px;
+}
+.row {
+ margin-top: 30px;
+}
+*/
+.row.smalltop {
+ margin-top: 10px;
+}
+
+/* maybe just used on annotations.html ? */
+.thinborder {
+ border-width: 1px;
+ border-spacing: 0px;
+ border-style: solid;
+ border-color: black;
+ border-collapse: collapse;
+}
+
+.thinborder td,
+.thinborder th {
+ border-width: 1px;
+ padding: 5px;
+ border-style: solid;
+ border-color: black;
+}
+
--- /dev/null
+'''
+Shared code for ssi_server.py and ssi_expander.py.
+'''
+
+import re
+
+def InlineIncludes(path):
+ """Read a file, expanding <!-- #include --> statements."""
+ content = file(path).read()
+ content = re.sub(r'<!-- *#include *virtual=[\'"]([^\'"]+)[\'"] *-->',
+ lambda x: file(x.group(1)).read(),
+ content)
+ return content
+
--- /dev/null
+#!/usr/bin/python
+'''
+This script copies the files in one directory to another, expanding any SSI
+<!-- #include --> statements it encounters along the way.
+
+Usage:
+
+ ./ssi_expander.py [source_directory] destination_directory
+
+If source_directory is not specified, then the current directory is used.
+'''
+
+import os
+import ssi
+import sys
+
+def process(source, dest):
+ for dirpath, dirnames, filenames in os.walk(source):
+ dest_dir = os.path.realpath(os.path.join(dest, os.path.relpath(dirpath, source)))
+ if not os.path.exists(dest_dir):
+ os.mkdir(dest_dir)
+ assert os.path.isdir(dest_dir)
+ for filename in filenames:
+ src_path = os.path.abspath(os.path.join(source, dirpath, filename))
+ dest_path = os.path.join(dest_dir, filename)
+ if not filename.endswith('.html'):
+ os.symlink(src_path, dest_path)
+ else:
+ file(dest_path, 'w').write(ssi.InlineIncludes(src_path))
+
+ # ignore hidden directories
+ for dirname in dirnames[:]:
+ if dirname.startswith('.'):
+ dirnames.remove(dirname)
+
+
+if __name__ == '__main__':
+ if len(sys.argv) == 2:
+ source = '.'
+ dest = sys.argv[1]
+ elif len(sys.argv) == 3:
+ source, dest = sys.argv[1:]
+ else:
+ sys.stderr.write('Usage: %s [source_directory] destination_directory\n' % sys.argv[0])
+ sys.exit(1)
+
+ process(source, dest)
--- /dev/null
+#!/usr/bin/python
+'''
+Use this in the same way as Python's SimpleHTTPServer:
+
+ ./ssi_server.py [port]
+
+The only difference is that, for files ending in '.html', ssi_server will
+inline SSI (Server Side Includes) of the form:
+
+ <!-- #include virtual="fragment.html" -->
+
+Run ./ssi_server.py in this directory and visit localhost:8000 for an exmaple.
+'''
+
+import os
+import ssi
+from SimpleHTTPServer import SimpleHTTPRequestHandler
+import SimpleHTTPServer
+import tempfile
+
+
+class SSIRequestHandler(SimpleHTTPRequestHandler):
+ """Adds minimal support for <!-- #include --> directives.
+
+ The key bit is translate_path, which intercepts requests and serves them
+ using a temporary file which inlines the #includes.
+ """
+
+ def __init__(self, request, client_address, server):
+ self.temp_files = []
+ SimpleHTTPRequestHandler.__init__(self, request, client_address, server)
+
+ def do_GET(self):
+ SimpleHTTPRequestHandler.do_GET(self)
+ self.delete_temp_files()
+
+ def do_HEAD(self):
+ SimpleHTTPRequestHandler.do_HEAD(self)
+ self.delete_temp_files()
+
+ def translate_path(self, path):
+ fs_path = SimpleHTTPRequestHandler.translate_path(self, path)
+ if self.path.endswith('/'):
+ for index in "index.html", "index.htm":
+ index = os.path.join(fs_path, index)
+ if os.path.exists(index):
+ fs_path = index
+ break
+
+ if fs_path.endswith('.html'):
+ content = ssi.InlineIncludes(fs_path)
+ fs_path = self.create_temp_file(fs_path, content)
+ return fs_path
+
+ def delete_temp_files(self):
+ for temp_file in self.temp_files:
+ os.remove(temp_file)
+
+ def create_temp_file(self, original_path, content):
+ _, ext = os.path.splitext(original_path)
+ fd, path = tempfile.mkstemp(suffix=ext)
+ os.write(fd, content)
+ os.close(fd)
+
+ self.temp_files.append(path)
+ return path
+
+
+if __name__ == '__main__':
+ SimpleHTTPServer.test(HandlerClass=SSIRequestHandler)
--- /dev/null
+<!--#include virtual="header.html" -->
+
+<style>
+ .annotation {
+ font-size: 12px !important;
+ }
+</style>
+
+<p>To use dygraphs, include the <code><a href="download.html">dygraph-combined.js</a></code> JavaScript file and instantiate a <code>Dygraph</code> object.</p>
+
+<p>Here's a basic example to get things started:</p>
+
+<div class="example" style="clear:both;">
+ <div class="codeblock" style="float:left;width:400px;">
+ <h3 style="text-align:center">HTML</h3>
+ <pre>
+<html>
+<head>
+<script type="text/javascript"
+ src="dygraph-combined.js"></script>
+</head>
+<body>
+<div id="graphdiv"></div>
+<script type="text/javascript">
+ g = new Dygraph(
+
+ // containing div
+ document.getElementById("graphdiv"),
+
+ // CSV or path to a CSV file.
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n"
+
+ );
+</script>
+</body>
+</html>
+</pre>
+ </div>
+ <div class="codeoutput" style="float:left;">
+ <h3 style="text-align:center">OUTPUT</h3>
+ <div id="graphdiv"></div>
+ <script type="text/javascript">
+ g = new Dygraph(
+
+ // containing div
+ document.getElementById("graphdiv"),
+
+ // CSV or path to a CSV file.
+ "Date,Temperature\n" +
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n"
+ );
+ </script>
+ </div>
+</div>
+
+<p style="clear:both">In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column headers), resizes its container to a reasonable default, calculates appropriate axis ranges and tick marks and draws the graph.</p>
+
+<p>In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor doesn't contain a newline, it will be interpreted as the path to a CSV file. The Dygraph 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>
+
+<div class="example" style="clear:both;">
+ <div class="codeblock" style="float:left;width:400px;">
+ <h3 style="text-align:center">HTML</h3>
+<pre>
+<html>
+<head>
+<script type="text/javascript"
+ src="dygraph-combined.js"></script>
+</head>
+<body>
+<div id="graphdiv2"
+ style="width:500px; height:300px;"></div>
+<script type="text/javascript">
+ g2 = new Dygraph(
+ document.getElementById("graphdiv2"),
+ "temperatures.csv", // path to CSV file
+ {} // options
+ );
+</script>
+</body>
+</html>
+</pre>
+ </div>
+ <div class="codeoutput" style="float:left;">
+ <h3 style="text-align:center">OUTPUT</h3>
+ <div id="graphdiv2" style="width:500px; height:300px;"></div>
+ <script type="text/javascript">
+ g2 = new Dygraph(
+ document.getElementById("graphdiv2"),
+ "temperatures.csv",
+ {}
+ );
+ </script>
+ </div>
+</div>
+
+<p style="clear:both;">The file used is <code><a href="temperatures.csv">temperatures.csv</a></code>.</p>
+
+<p>There are a few things to note here:</p>
+
+<ul>
+ <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.</li>
+ <li>The data is very spiky. A moving average would be easier to interpret.</li>
+</ul>
+
+<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 <code>rollPeriod</code> option. Here's how it's done:</p>
+
+<div class="example" style="clear:both;">
+ <div class="codeblock" style="float:left;width:400px;">
+ <h3 style="text-align:center">HTML</h3>
+<pre>
+<html>
+<head>
+<script type="text/javascript"
+ src="dygraph-combined.js"></script>
+</head>
+<body>
+<div id="graphdiv3"
+ style="width:500px; height:300px;"></div>
+<script type="text/javascript">
+ g3 = new Dygraph(
+ document.getElementById("graphdiv3"),
+ "temperatures.csv",
+ {
+ rollPeriod: 7,
+ showRoller: true
+ }
+ );
+</script>
+</body>
+</html>
+</pre>
+ </div>
+ <div class="codeoutput" style="float:left;">
+ <h3 style="text-align:center">OUTPUT</h3>
+ <div id="graphdiv3" style="width:500px; height:300px;"></div>
+ <script type="text/javascript">
+ g3 = new Dygraph(
+ document.getElementById("graphdiv3"),
+ "temperatures.csv",
+ {
+ rollPeriod: 7,
+ showRoller: true
+ }
+ );
+ </script>
+ </div>
+</div>
+
+<p style="clear:both;">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). Also note that we've explicitly set the size of the chart div.</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 <em>±n</em> 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. <em>σ = sqrt( (σ<sub>1<sup>2</sup></sub> + σ<sub>2<sup>2</sup></sub> + ... + σ<sub>n<sup>2</sup></sub>) / n )</em></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 at <a href="twonormals.csv">twonormals.csv</a>.</p>
+
+<div class="example" style="clear:both;">
+ <div class="codeblock" style="float:left;width:400px;">
+ <h3 style="text-align:center">HTML</h3>
+<pre>
+<html>
+<head>
+<script type="text/javascript"
+ src="combined.js"></script>
+</head>
+<body>
+<div id="graphdiv4"
+ style="width:480px; height:320px;"></div>
+<script type="text/javascript">
+ g4 = new Dygraph(
+ document.getElementById("graphdiv4"),
+ "twonormals.csv",
+ {
+ rollPeriod: 7,
+ showRoller: true,
+ errorBars: true,
+ valueRange: [50,125]
+ }
+ );
+</script>
+</body>
+</html>
+</pre>
+</div>
+<div class="codeoutput" style="float:left;">
+ <h3 style="text-align:center">OUTPUT</h3>
+ <div id="graphdiv4" style="width:480px; height:320px;"></div>
+ <script type="text/javascript">
+ g4 = new Dygraph(
+ document.getElementById("graphdiv4"),
+ "twonormals.csv",
+ {
+ rollPeriod: 7,
+ showRoller: true,
+ errorBars: true,
+ valueRange: [50,125]
+ }
+ );
+ </script>
+</div>
+</div>
+
+<p style="clear:both;">Things to note here:</p>
+
+<ul>
+<li>The <strong>errorBars</strong> option affects both the interpretation of the CSV file and the display of the graph. When <strong>errorBars</strong> is set to true, each line is interpreted as <em>YYYYMMDD</em>, <em>A</em>, <em>sigma_A</em>, <em>B</em>, <em>sigma_B</em>, …</li>
+<li>The first line of the CSV file doesn't mention the error columns. In this case, it's just "Date,Series1,Series2".</li>
+<li>The averaging visibly affects the error bars. This is most clear if you crank up the rolling period to something like 100 days. For the earliest dates, there won't be 100 data points to average so the signal will be noisier. The error bars get smaller like sqrt(N) going forward in time until there's a full 100 points to average.</li>
+<li>The error bars are partially transparent. This can be seen when they overlap one another.</li>
+</ul>
+
+
+<h2 id="gviz">GViz Data</h2>
+
+<p>The <a
+ href="http://code.google.com/apis/visualization/documentation/index.html">Google
+ Visualization API</a> provides a standard interface for describing data.
+Once you've specified your data using this API, you can plug in any
+GViz-compatible visualization. dygraphs is such a visualization. In
+particular, it can be used as a drop-in replacement for the
+AnnotatedTimeline visualization used on Google Finance and other sites. To
+see how this works, check out the <a href="tests/annotation-gviz.html">gviz
+ annotation demo.</a></p>
+
+<p>For a simple demonstration of how to use dygraphs a GViz visualization, see <a href="http://danvk.org/dygraphs/tests/gviz.html">http://danvk.org/dygraphs/tests/gviz.html</a>. dygraphs can also be used as a GViz gadget. This allows it to be embedded inside of a Google Spreadsheet. For a demonstration of this, see <a href="http://spreadsheets.google.com/ccc?key=0Anx1yCqeL8YUdDR1c3pPREhraGhkWmdhaURjOXRncXc&hl=en">this spreadsheet</a>. The URL for the gadget is <code><a href="http://danvk.org/dygraphs/gadget.xml">http://danvk.org/dygraphs/gadget.xml</a></code>.</p>
+
+<p>Here's an example of a published gviz gadget using dygraphs:</p>
+
+<script src="http://spreadsheets.google.com/gpub?url=http%3A%2F%2Fkb8jbn8l90ocl9n4b14jrcvp61ceqis5.spreadsheets.gmodules.com%2Fgadgets%2Fifr%3Fup__table_query_url%3Dhttp%253A%252F%252Fspreadsheets.google.com%252Ftq%253Frange%253DA1%25253AC31%2526headers%253D-1%2526key%253D0Anx1yCqeL8YUdDR1c3pPREhraGhkWmdhaURjOXRncXc%2526gid%253D0%2526pub%253D1%26up__table_query_refresh_interval%3D300%26url%3Dhttp%253A%252F%252Fdanvk.org%252Fdygraphs%252Fgadget.xml%253Fnocache&height=215&width=530"></script>
+
+<h2 id="baseball">Charting Fractions</h2>
+
+<p>Situations often arise where you want to plot fractions, e.g. the fraction of respondents in a poll who said they'd vote for candidate X or the number of hits divided by at bats (baseball's batting average). Fractions require special treatment for two main reasons:</p>
+
+<ul>
+ <li>The average of <code>a1/b1</code> and <code>a2/b2</code> is <code>(a1+a2)/(b1+b2)</code>, not <code>(a1/b1 + a2/b2)/2</code>.</li>
+ <li>The normal approximation is not always applicable and more sophisticated confidence intervals (e.g. the <a href="http://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval">Wilson confidence interval</a>) must be employed to avoid ratios that exceed 100% or go below 0%.</li>
+</ul>
+
+<p>Fortunately, dygraphs handles both of these for you! Here's a chart and the command that generated it:</p>
+
+<div style="width:750px; text-align:center; font-weight: bold; font-size: 125%;">Batting Average for Ichiro Suzuki vs. Mariners (2004)</div>
+<div id="baseballdiv" style="width:750px; height:300px;"></div>
+<script type="text/javascript">
+ new Dygraph(
+ document.getElementById("baseballdiv"),
+ "suzuki-mariners.txt",
+ {
+ fractions: true,
+ errorBars: true,
+ showRoller: true,
+ rollPeriod: 15
+ }
+ );
+</script>
+
+<b>Code:</b>
+<pre>
+new Dygraph(
+ document.getElementById("baseballdiv"),
+ "suzuki-mariners.txt",
+ {
+ fractions: true,
+ errorBars: true,
+ showRoller: true,
+ rollPeriod: 15
+ }
+);
+</pre>
+
+<p>The <code>fractions</code> option indicates that the values in each column should be parsed as fractions (e.g. "1/2" instead of "0.5"). The <code>errorBars</code> option indicates that we'd like to see a confidence interval around each data point. By default, when <code>fractions</code> is set, you get a Wilson confidence interval. If you look carefully at the chart, you can see that the error bars are asymmetric.</p>
+
+<p>A couple things to notice about this chart:</p>
+
+<ul>
+ <li>The error bars for Ichiro's batting average are larger than for the Mariners', since he has far fewer at bats than his team.</li>
+ <li>dygraphs makes it easy to see "batting average over the last 30 games". This is ordinarily quite difficult to compute. It makes it clear where the "hot" and "cold" part of Suzuki's season were.</li>
+ <li>If you set the averaging period to something large, like 200, you'll see the team's and player's batting average through that game. The final number is the overall batting average for the season.</li>
+ <li>Where the error bars do not overlap, we can say with 95% confidence that the series differ. There is a better than 95% chance that Ichiro was a better hitter than his team as a whole in 2004, the year he won the batting title.</li>
+</ul>
+
+<h2 id="stock">One last demo</h2>
+
+<p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
+
+<div id="dow_chart" style="width:750px; height:350px;"></div>
+<p><b>Display: </b>
+<input type=checkbox id=0 onClick="stockchange(this)" checked>
+<label for="0"> Nominal</label>
+<input type=checkbox id=1 onClick="stockchange(this)" checked>
+<label for="1"> Real</label>
+<input type=checkbox id=ann onClick="annotationschange(this)" checked>
+<label for="ann"> Annotations</label>
+</p>
+
+<script type="text/javascript">
+ var stock_annotations = [
+ {
+ series: "Real",
+ x: "1929-08-15",
+ shortText: "A",
+ text: "1929 Stock Market Peak",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "1987-08-15",
+ shortText: "B",
+ text: "1987 Crash",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "1999-12-15",
+ shortText: "C",
+ text: "1999 (.com) Peak",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "2007-10-15",
+ shortText: "D",
+ text: "All-Time Market Peak",
+ cssClass: 'annotation'
+ }
+ ];
+
+// From http://www.econstats.com/eqty/eq_d_mi_3.csv
+ stockchart = new Dygraph(
+ document.getElementById('dow_chart'),
+ "dow.txt",
+ {
+ showRoller: true,
+ customBars: true,
+ labelsKMB: true,
+ drawCallback: function(g, is_initial) {
+ if (!is_initial) return;
+ g.setAnnotations( stock_annotations );
+ }
+ }
+ );
+
+ function stockchange(el) {
+ stockchart.setVisibility(el.id, el.checked);
+ }
+
+ function annotationschange(el) {
+ if (el.checked) {
+ stockchart.setAnnotations(stock_annotations);
+ } else {
+ stockchart.setAnnotations([]);
+ }
+ }
+</script>
+<!--
+
+Here is a script to regenerate the Dow Jones plot:
+
+# Get unadjusted DJIA data in a nice format:
+curl -O http://www.econstats.com/eqty/eq_d_mi_3.csv
+sed '1,17d' eq_d_mi_3.csv | cut -d, -f1,6 | perl -pe 's/(\d{4}-\d\d)-\d\d/$1/g' | perl -pe 's/, */\t/' | grep -v 'na' | perl -ne 'chomp; ($m,$v) = split/\t/; $close{$m} = $v; if ($low{$m} == 0 || $v < $low{$m}) { $low{$m}=$v } if ($v > $high{$m}) { $high{$m} = $v } END { for $x(sort keys %close) { print "$x\t$low{$x}\t$close{$x}\t$high{$x}\n" } } ' > monthly-djia.tsv
+
+# Fetch and format the CPI data:
+curl 'http://data.bls.gov/PDQ/servlet/SurveyOutputServlet?series_id=CUUR0000SA0&years_option=all_years&periods_option=all_periods&output_type=column&output_format=text&delimiter=comma' > cpi-u.txt
+sed '1,/Series Id,Year,/d' cpi-u.txt | sed '/^$/,$d' | cut -d, -f2,3,4 | perl -ne 'print if /,M(0[0-9]|1[012]),/' | perl -pe 's/(\d{4}),M(\d{2}),/$1-$2\t/g' > cpi-u.tsv
+
+# Merge:
+join -t' ' cpi-u.tsv monthly-djia.tsv > annotated-djia.tsv
+perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) = split /\t/; $cpi /= 100.0; print "$m-15,$low;$close;$high,",($low/$cpi),";",($close/$cpi),";",($high/$cpi),"\n"' annotated-djia.tsv > dow.txt
+
+-->
+
+<h2>Common Gotchas</h2>
+
+<p>Here are a few problems that I've frequently run into while using the dygraphs library.</p>
+
+<ul>
+ <li>If your chart doesn't display, be sure to check your browser's JavaScript error console. dygraphs makes every attempt to log errors and warnings, and these can often guide you in the right direction.</li>
+ <li>Make sure your CSV files are readable! If your graph isn't showing up, the XMLHttpRequest for the CSV file may be failing. You can determine whether this is the case using tools like <a 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>… . 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 Dygraph, put it inside a table with <code>align = center</code> set.</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>
+ <li>Make sure you don't have any trailing commas in your call to the Dygraph constructor or in the options parameter. Firefox, Chrome and Safari ignore these but they can cause a graph to not display in Internet Explorer.</li>
+</ul>
+
+<h2>What next?</h2>
+
+<p>If you need to support Internet Explorer, check out our <a href="ie.html">notes on IE</a>.</p>
+
+<p>To get some inspiration, look at how the <a href="gallery/">charts in our gallery</a> are built.</p>
+
+
+<!--#include virtual="footer.html" -->
--- /dev/null
+<!--#include virtual="header.html" -->
+
+ <h2>Known Users</h2>
+ <p>Since its public release in late 2009, dygraphs has found many users
+ across the web. This is a small collection of the uses that we know about.
+ If you're using dygraphs, please send <a
+ href="mailto:dan@dygraphs.com">Dan</a> a link and he'll add it to this
+ list.</p>
+
+ <p>dygraphs was originally developed at Google and has found wide use on
+ internal dashboards and servers there. There are also a few uses of
+ dygraphs on public Google products:</p>
+
+ <ul class='padded-list'>
+ <li><a href="http://www.google.com/trends/correlate/search?e=id:20xKcnNqHrk&t=weekly">Google Correlate</a><br/>
+ <span class="desc">Uses dygraphs for time series visualization. Mostly a standard configuration, with just a few tweaks to match Google style.</span></li>
+
+ <li><a href="http://www.google.com/trends/correlate/draw?p=us">Google Correlate - Search by Drawing</a><br/>
+ <span class="desc">This is a highly customized configuration which lets the user draw a time series. Based on <a href="tests/drawing.html">this demo</a>.</span></li>
+
+ <li><a href="https://www.google.com/latitude/b/0/history/manage">Google Latitude History Dashboard</a><br/>
+ <span class="desc">Uses mouse interaction callbacks to synchronize time series points with markers on a Google Map.</span></li>
+ </ul>
+
+ <p>dygraphs has also found use in other organizations:</p>
+
+ <ul class='padded-list'>
+<li><a
+ href="http://iswa.ccmc.gsfc.nasa.gov:8080/IswaSystemWebApp/index.jsp?i_1=388&l_1=99&t_1=316&w_1=800&h_1=400&s_1=0!3!0!ACE.B_x!ACE.B_y!ACE.B_z!">Integrated
+ Space Weather Analysis System</a> (NASA)<br/>
+<span class="desc">“We use [dygraphs] in the Integrated Space Weather
+ Analysis System available from the Space Weather Laboratory at NASA Goddard
+ Space Flight Center. It works quite well for time series data from various
+ missions and simulations that we store.”</span></li>
+
+
+<li><a href="http://www.eutelsat.fr">Eutelsat</a><br/>
+<span class="desc">“Eutelsat uses dygraphs for charting spacecraft
+ telemetry for a fleet of 25 geostationary satellites. The spacecraft
+ engineers are very happy with it. All satellite combined are producing
+ about 200 millions unique data points per day so we really appreciate the
+ excellent performance of dygraphs.”</span></li>
+
+<li><a href="http://www.10gen.com/mongodb-monitoring-service">10gen MongoDB
+ Monitoring Service</a><br/>
+<span class="desc">A free monitoring service for MongoDB from 10gen (the
+ creators of MongoDB). Used by thousands of servers and users. Makes use of
+ <a href="tests/synchronize.html">synchronized charts</a> to display many
+ quantities simultaneously.</span></li>
+
+<li><a href="http://duckduckgo.com/traffic.html">Duck Duck Go Traffic Dashboard</a><br/>
+<span class="desc">DDG uses dygraphs to display a public chart of their daily traffic. They use annotations and the moving average features.</span></li>
+
+ <li><a href="http://toolserver.org/~dartar/moodbar/">Wikimedia Foundation - Moodbar data dashboard</a><br/>
+ <span class="desc">dygraphs is used internally at Wikimedia as a handy solution to monitor the
+ results of a bunch of small experiments.</span></li>
+
+<li><a href="http://code.google.com/p/quadrant-framework/">quadrant-framework</a> (MySQL Load Testing Framework)<br/>
+<span class="desc">A user friendly framework for creating and visualizing
+ MySQL database load test jobs. For more information on its use of dygraphs,
+ see <a href="http://themattreid.com/wordpress/2011/05/20/quadrant-framework-rev7-update-adds-dygraphs-support/">this post</a>.</span></li>
+
+<li><a href="http://spinwave.wordpress.com/2011/03/28/spinwave-systems-enables-energy-efficiency-case-studies/">Spinwave Systems</a> (Home energy monitoring)<br/>
+<span class="desc">dygraphs is used to chart energy usage over time.</span></li>
+
+
+ <li><a href="http://www.socib.es/jwebchart/?file=http://thredds.socib.es/thredds/dodsC/mooring/weather_station/mobims_calamillor-scb_met001/L1/dep0001_mobims-calamillor_scb-met001_L1_latest.nc">Jwebchart</a><br/>
+ <span class="desc">
+ jWebChart is a stand-alone and Thredds' embedded plotting system for
+ netCDF files. NetCDF is a common standard for the storage and
+ distribution of scientific data.
+ </span></li>
+
+ <li><a href="http://ngrams.cavorite.com/">n-gramas - Explore las tendencias en los artÃculos periodÃsticos de Colombia.</a><br/>
+
+
+ <span class="desc">(English: "Explore trends in newspaper articles of
+ Colombia"). dygraphs is used for displaying the results of this n-grams
+ viewer. Uses an extension for exporting the plots as PNG images
+ (<a href="http://cavorite.com/labs/js/dygraphs-export/">[1]</a>, <a href="https://github.com/cavorite/dygraphs">[2]</a>).
+ </span></li>
+
+ <li><a href="http://www.glerl.noaa.gov/data/now/wlevels/dbd/altSite.html">NOAA Great Lakes Water Level Dashboard</a><br/>
+ <span class="desc">The Great Lakes Water Level dashboard was designed to help users view, understand, and compare Great Lakes surface water elevation data and forecasts from a variety of different sources, and across a variety of time scales ranging from monthly average values, to annual and multi-decadal values. First developed in Adobe Flash, a HTML 5 compatible version has been in the works and a functional draft is available here.</span></li>
+
+ </ul>
+
+ <p>Are you using dygraphs? Please let <a href="mailto:dan@dygraphs.com">Dan</a> know and he'll add your link here!</p>
+
+<!--#include virtual="footer.html" -->
# Extract a labels list.
labels = []
-for nu, opt in docs.iteritems():
+for _, opt in docs.iteritems():
for label in opt['labels']:
if label not in labels:
labels.append(label)
-print """<!DOCTYPE HTML>
-<html>
-<head>
- <title>Dygraphs Options Reference</title>
- <link rel="stylesheet" href="style.css">
- <style type="text/css">
- p.option {
- padding-left: 25px;
- }
- div.parameters {
- padding-left: 15px;
- }
- #nav {
- position: fixed;
- }
- #content {
- max-width: 800px;
- }
- </style>
-</head>
-<body>
+print """
+<!--#include virtual="header.html" -->
+
+<!--
+ DO NOT EDIT THIS FILE!
+
+ This file is generated by generate-documentation.py.
+-->
+
+<link rel=stylesheet href="options.css" />
+
"""
print """
-<div id='nav'>
-<h2>Dygraphs</h2>
-<ul>
- <li><a href="index.html">Home</a>
- <li><a href="data.html">Data Formats</a></li>
- <li><a href="annotations.html">Annotations</a></li>
-</ul>
-<h2>Options Reference</h2>
-<ul>
+<div class="col-lg-3">
+<div class="dygraphs-side-nav affix-top" data-spy="affix" data-offset-top="0">
+<ul class='nav'>
<li><a href="#usage">Usage</a>
"""
for label in sorted(labels):
print ' <li><a href="#%s">%s</a>\n' % (label, label)
-print '</ul>\n</div>\n\n'
+print '</ul></div></div>\n\n'
print """
-<div id='content'>
+<div id='content' class='col-lg-9'>
<h2>Options Reference</h2>
<p>Dygraphs tries to do a good job of displaying your data without any further configuration. But inevitably, you're going to want to tinker. Dygraphs provides a rich set of options for configuring its display and behavior.</p>
new_option2: value2
});
</pre>
+
+<p>Some options can be set on a per-axis and per-series basis. See the docs on <a href="per-axis.html">per-axis and per-series options</a> to learn how to do this. The options which may be set in this way are marked as such on this page.</p>
+
<p>And, without further ado, here's the complete list of options:</p>
"""
<li>canvasx/canvasy: The canvas coordinates at which the point is drawn.</li>
<li>name: The name of the data series to which the point belongs</li>
</ul>
-</div>
-</body>
-</html>
+</div> <!-- #content -->
+
+<!--#include virtual="footer.html" -->
"""
# This page was super-helpful:
if [ -s docs/options.html ] ; then
./generate-jsdoc.sh
+ temp_dir=$(mktemp -d /tmp/dygraphs-docs.XXXX)
+ cd docs
+ ./ssi_expander.py $temp_dir
+ cd ..
+
# Make sure everything will be readable on the web.
# This is like "chmod -R a+rX", but excludes the .git directory.
find . -path ./.git -prune -o -print | xargs chmod a+rX
# Copy everything to the site.
rsync -avzr gallery strftime rgbcolor common tests jsdoc experimental plugins $site \
&& \
- rsync -avzr dashed-canvas.js stacktrace.js dygraph*.js gadget.xml excanvas.js thumbnail.png screenshot.png docs/* $site/
+ rsync -avzr --copy-links dashed-canvas.js stacktrace.js dygraph*.js gadget.xml excanvas.js thumbnail.png screenshot.png $temp_dir/* $site/
else
echo "generate-documentation.py failed"
fi
# Revert changes to dygraph-combined.js and docs/options.html
git checkout dygraph-combined.js
rm docs/options.html
+rm -rf $temp_dir
projects / dygraphs.git / commitdiff