page. For instance, instead of doing this:
```html
-<script type="text/javascript" src="dygraph-combined.js"></script>
+<script type="text/javascript" src="dygraph.min.js"></script>
```
do this:
```html
-<script type="text/javascript" src="dygraph-combined.dev.js"></script>
+<script type="text/javascript" src="dygraph.js"></script>
```
This makes error messages and debugging simpler. The jsfiddle does this automatically.
page. For instance, instead of doing this:
```html
-<script type="text/javascript" src="dygraph-combined.js"></script>
+<script type="text/javascript" src="dygraph.min.js"></script>
```
do this:
```html
-<script type="text/javascript" src="dygraph-combined.dev.js"></script>
+<script type="text/javascript" src="dygraph.js"></script>
```
This makes error messages and debugging simpler. The jsfiddle does this automatically.
dist
coverage
*.log
+*.pyc
```html
<html>
<head>
-<script type="text/javascript" src="dygraph-combined.js"></script>
+<script type="text/javascript" src="dygraph.js"></script>
+<link rel="stylesheet" href="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
assert.equal(6, g.getValue(3, 0));
});
+it('should throw on strings in native format', () => {
+ assert.throws(() => {
+ new Dygraph('graph', [['1', '10'], ['2', '20']])
+ }, /expected number or date/i);
+
+ assert.throws(() => {
+ new Dygraph('graph', [[new Date(), '10'], [new Date(), '20']])
+ }, /expected number or array/i);
+});
+
var assertData = function(g) {
var expected = dataArray;
var variantOpts = {
none: {},
- avoidMinZero: {
- avoidMinZero: true,
- includeZero: true
- },
padded: {
includeZero: true,
drawAxesAtZero: true,
// THE SOFTWARE.
-/**
+/**
* @fileoverview Test valueRange and dateWindow changes.
*
* @author konigsberg@google.com (Robert Konigsberg)
}());
var FIVE_TO_ONE_THOUSAND = [
- [ 1, 10 ], [ 2, 20 ], [ 3, 30 ], [ 4, 40 ] , [ 5, 50 ],
+ [ 1, 10 ], [ 2, 20 ], [ 3, 30 ], [ 4, 40 ] , [ 5, 50 ],
[ 6, 60 ], [ 7, 70 ], [ 8, 80 ], [ 9, 90 ] , [ 10, 1000 ]];
describe("range-tests", function() {
g.updateOptions({ });
assert.deepEqual([12, 18], g.xAxisRange());
assert.deepEqual([10, 40], g.yAxisRange(0));
-
+
g.updateOptions({valueRange : null, axes: {y:{valueRange : [15, 20]}}});
assert.deepEqual([12, 18], g.xAxisRange());
assert.deepEqual([15, 20], g.yAxisRange(0));
labels: ['X', 'Y']
});
assert.deepEqual([10, 1099], g.yAxisRange(0));
-
+
g.updateOptions({ logscale : false });
assert.deepEqual([0, 1099], g.yAxisRange(0));
});
labels: ['X', 'Y']
});
assert.deepEqual([0, 1100], g.yAxisRange(0));
-
+
g.updateOptions({ includeZero : false });
assert.deepEqual([450, 1050], g.yAxisRange(0));
});
* Verify that includeZero range is properly specified per axis.
*/
it('testIncludeZeroPerAxis', function() {
- var g = new Dygraph("graph",
+ var g = new Dygraph("graph",
'X,A,B\n'+
'0,50,50\n'+
'50,110,110\n',
{
drawPoints: true,
pointSize:5,
- series:{
+ series:{
A: {
axis: 'y',
pointSize: 10
B: {
axis: 'y2'
}
- },
+ },
axes: {
'y2': { includeZero: true }
}
/**
* Verify that very large Y ranges don't break things.
- */
+ */
it('testHugeRange', function() {
var g = new Dygraph("graph", [[0, -1e120], [1, 1e230]], {
includeZero: true,
});
/**
- * Verify old-style avoidMinZero option.
- */
-it('testAvoidMinZero', function() {
- var g = createGraph({
- avoidMinZero: true,
- }, ZERO_TO_FIFTY_STEPS, [10, 20], [-5, 55]);
-});
-
-/**
* Verify ranges with user-specified padding, implicit avoidMinZero.
*/
it('testPaddingAuto', function() {
});
/**
- * Verify scrolling all-zero region, traditional.
- */
-it('testZeroScroll', function() {
- var g = new Dygraph(
- document.getElementById("graph"),
- "X,Y\n" +
- "1,0\n" +
- "8,0\n" +
- "9,0.1\n",
- {
- drawAxesAtZero: true,
- animatedZooms: true,
- avoidMinZero: true
- });
-});
-
-/**
* Verify scrolling all-zero region, new-style.
*/
it('testZeroScroll2', function() {
+++ /dev/null
-{
- "name": "dygraphs",
- "main": "dist/dygraph.js",
- "ignore": [
- "Makefile",
- "NOTES",
- "auto_tests",
- "common",
- "data.js",
- "docs",
- "experimental",
- "file-size-stats.sh",
- "gadget.xml",
- "gallery",
- "generate-combined.sh",
- "generate-documentation.py",
- "generate-download.py",
- "generate-jar.sh",
- "generate-jsdoc.sh",
- "gwt",
- "jsTestDriver.conf",
- "jsdoc-toolkit",
- "lint.sh",
- "node_modules",
- "package.json",
- "phantom-driver.js",
- "phantom-perf.js",
- "push-to-web.sh",
- "release.sh",
- "releases.json",
- "screenshot.png",
- "scripts",
- "test.sh",
- "tests",
- "thumbnail.png"
- ]
-}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="site.css">
+ <link rel="stylesheet" href="dygraph.css">
<script src="bootstrap.min.js"></script>
- <script type="text/javascript" src="dygraph-combined.js"></script>
+ <script type="text/javascript" src="dygraph.min.js"></script>
</head>
<body>
<!--
<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">
<div id="demodiv"></div>
</div>
</div>
-
+
<script type="text/javascript">
g = new Dygraph(
<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>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>
+
+ <p>If you're using npm and a bundler like webpack, browserify or rollup, you can install dygraphs via:</p>
+
+ <pre>npm install --save dygraphs</pre>
+
+ and use it via:
+
+ <pre class="prettyprint">import Dygraph from 'dygraphs';
+// or: const Dygraph = require('dygraphs');
+const g = new Dygraph(div, data, {});</pre>
+
+ <p>Check out the <a href="https://github.com/danvk/dygraphs-es6">dygraphs ES6 sample project</a> for more details on this approach.</p>
</div>
<div class="col-lg-4">
</div>
</div>
-
+
<!--#include virtual="footer.html" -->
}
</style>
-<p>To use dygraphs, include the <code><a href="download.html">dygraph-combined-dev.js</a></code> JavaScript file and instantiate a <code>Dygraph</code> object.</p>
+<p>To use dygraphs, include the <code><a href="download.html">dygraph.js</a></code> JavaScript file
+and <code>dygraph.css</code> CSS file. Then instantiate a <code>Dygraph</code> object.</p>
<p>Here's a basic example to get things started:</p>
<html>
<head>
<script type="text/javascript"
- src="dygraph-combined-dev.js"></script>
+ src="dygraph.js"></script>
+<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
<html>
<head>
<script type="text/javascript"
- src="dygraph-combined-dev.js"></script>
+ src="dygraph.js"></script>
+<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="graphdiv2"
<html>
<head>
<script type="text/javascript"
- src="dygraph-combined-dev.js"></script>
+ src="dygraph.js"></script>
+<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="graphdiv3"
<html>
<head>
<script type="text/javascript"
- src="combined.js"></script>
+ src="dygraph.js"></script>
+<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="graphdiv4"
<table class="versions">
<tr>
+ <td>1.1.1<p class="date">2015-06-01</p></td>
+ <td class="notes">
+ <ul>
+ <li>Set <code>this</code> to the dygraph in all callbacks.</li>
+ <li>Minor bug fixes.</li>
+ </ul>
+ </td>
+
<td>1.1.0<p class="date">2014-12-03</p></td>
<td class="notes">
Highlights include:
<li>"this" is set to the dygraph in all callbacks.
<li>dygraphs has shrunk, because we moved some stuff into "extras" (133kb→122kb)
</ul>
-
+
This will be the last major release to support browsers without a native <canvas> implementation. See <a href="http://blog.dygraphs.com/2014/12/dygraphs-110.html">blog post</a> for more details.
</td>
</tr>
+++ /dev/null
-/*global Gallery,Dygraph,data */
-Gallery.register(
- 'avoid-min-zero',
- {
- name: "Avoid Min Zero",
- setup: function(parent) {
- parent.innerHTML =
- "<p>1: Line chart with axis at zero problem:</p><div id='graph1'></div> " +
- "<p>2: Step chart with axis at zero problem:</p><div id='graphd2'></div> " +
- "<p>3: Line chart with <code>avoidMinZero</code> option:</p><div id='graph3'></div> " +
- "<p>4: Step chart with <code>avoidMinZero</code> option:</p><div id='graphd4'></div> ";
- },
- run: function() {
- new Dygraph(document.getElementById("graph1"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n"
- );
- new Dygraph(document.getElementById("graphd2"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- stepPlot: true
- }
- );
- new Dygraph(document.getElementById("graph3"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- avoidMinZero: true
- }
- );
- new Dygraph(document.getElementById("graphd4"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- stepPlot: true,
- avoidMinZero: true
- }
- );
- }
-});
+++ /dev/null
-/*global Gallery,Dygraph,data */
-Gallery.register(
- 'edge-padding',
- {
- name: 'Edge Padding',
- title: 'Graph edge padding and axis position',
- setup: function(parent) {
- parent.innerHTML = (
- "<style>.dygraph-legend { width: 100px; }</style>" +
- "<p>" +
- " <b>Mode:</b>" +
- " <input type='radio' name='mode'>use {x,y}RangePad</input>" +
- " <input type='radio' name='mode'>original</input>" +
- " <br /><b>Settings:</b>" +
- " <input type='checkbox' id='yrange'>valueRange=[-2,2]</input>" +
- "</p>" +
- "<div id='demodiv'></div>"
- );
- },
- run: function() {
- var parent = document.getElementById("demodiv");
-
- var graphs = [];
- var nrows = 50;
-
- for (var oy = -2; oy <= 2; ++oy) {
- for (var ox = -1; ox <= 1; ++ox) {
- var gdiv = document.createElement('div');
- gdiv.style.display = 'inline-block';
- gdiv.style.margin = '2px';
- parent.appendChild(gdiv);
-
- var data = [];
- for (var row = 0; row < nrows; ++row) {
- var x = row * 5 / (nrows - 1);
- data.push([ox * 2.5 + x - 2.5,
- oy + Math.sin(x),
- oy + Math.round(Math.cos(x))]);
- }
-
- var g = new Dygraph(gdiv, data, {
- labels: ['x', 'A', 'B'],
- gridLineColor: '#ccc',
- includeZero: true,
- width: 250,
- height: 130
- });
- graphs.push(g);
- }
- parent.appendChild(document.createElement('br'));
- }
-
- var updateGraphOpts = function(opts) {
- for (var i = 0; i < graphs.length; ++i) {
- graphs[i].updateOptions(opts);
- }
- };
-
- var mode = document.getElementsByName('mode');
- mode[0].onchange = function() {
- updateGraphOpts({
- avoidMinZero: false,
- xRangePad: 3,
- yRangePad: 10,
- drawAxesAtZero: true});
- };
- mode[1].onchange = function() {
- updateGraphOpts({
- avoidMinZero: true,
- xRangePad: 0,
- yRangePad: null,
- drawAxesAtZero: false});
- };
- mode[0].checked = true;
- mode[0].onchange();
-
- var yrange = document.getElementById('yrange');
- yrange.onchange = function(ev) {
- updateGraphOpts({
- valueRange: ev.target.checked ? [-2, 2] : null});
- };
-
- }
- });
jsfs.html("<input type='submit' value='Edit in jsFiddle'/>\n" +
"<span style='display:none'>\n" +
- "<textarea name='resources'>http://dygraphs.com/dygraph-combined.js</textarea>\n" +
+ "<textarea name='resources'>http://dygraphs.com/dygraph.js</textarea>\n" +
"<input type='text' name='dtd' value='html 5'/></span>\n");
var javascript = demo.run.toString();
<html>
<head>
<title>Dygraphs Gallery</title>
- <link rel="stylesheet" href="../css/dygraph.css" />
+ <link rel="stylesheet" href="../dist/dygraph.css" />
<script src="../dist/dygraph.js"></script>
<script src="../src/extras/synchronizer.js"></script>
<script src="temperature-sf-ny.js"></script>
<script src="interaction.js"></script>
<script src="linear-regression.js"></script>
- <script src="edge-padding.js"></script>
<!-- These might not remain in the gallery
<script src="dygraph-simple.js"></script>
<script src="demo.js"></script>
<script src="border.js"></script>
<script src="callbacks.js"></script>
- <script src="avoid-min-zero.js"></script>
<script src="color-cycle.js"></script>
<script src="color-visibility.js"></script>
<script src="two-axes.js"></script>
// Protected because the GWT compiler has to generate a subclass.
protected interface Resources extends ClientBundle {
- @Source("org/danvk/dygraph-combined.js")
+ @Source("org/danvk/dygraph.min.js")
TextResource dygraphs();
}
--- /dev/null
+module.exports = require('./src-es5/dygraph');
+
--- /dev/null
+export { default } from './src/dygraph';
{
"name": "dygraphs",
- "version": "1.1.0",
+ "version": "2.0.0-rc2",
"description": "dygraphs is a fast, flexible open source JavaScript charting library.",
- "main": "dist/src/dygraph.js",
- "directories": {
- "doc": "docs",
- "test": "tests"
- },
+ "main": "index.es5",
+ "module": "index",
+ "jsnext:main": "index",
+ "files": [
+ "index.js",
+ "index.es5.js",
+ "docs",
+ "dist",
+ "src",
+ "src-es5"
+ ],
"repository": {
"type": "git",
"url": "git://github.com/danvk/dygraphs.git"
"browserify": "^11.2.0",
"browserify-header": "^0.9.2",
"chai": "^3.3.0",
+ "clean-css": "^3.4.23",
+ "core-js": "^2.4.1",
"coveralls": "^2.11.2",
"envify": "^3.4.0",
"exorcist": "^0.4.0",
"mocha": "^2.1.0",
"mocha-phantomjs": "3.5.3",
"mocha-phantomjs-istanbul": "0.0.2",
- "obvious-closure-library": "^20140401.0.2",
"parse-data-uri": "^0.2.0",
"phantomjs": "^1.9.7-8",
"pre-commit": "^1.0.6",
},
"pre-commit": [
"tests-ok"
- ],
- "dependencies": {
- "core-js": "^2.4.1"
- }
+ ]
}
[
{
+ "version": "2.0.0",
+ "files": [
+ "dygraph.min.js",
+ "dygraph.js",
+ "dygraph.css"
+ ]
+ },
+ {
+ "version": "1.1.1",
+ "files": [
+ "dygraph-combined.js",
+ "dygraph-combined-dev.js"
+ ]
+ },
+ {
"version": "1.1.0",
"files": [
"dygraph-combined.js",
#!/bin/bash
-# This generates:
-# - dist/dygraph.js
-# - dist/dygraph.js.map
-# - dist/dygraph.min.js
-# - dist/dygraph.min.js.map
+# This generates everything under dist:
+# bundled JS, minified JS, minified CSS and source maps.
set -o errexit
mkdir -p dist
-o dist/dygraph.min.js \
dist/dygraph.tmp.js
-# Copy to the old location
-cp dist/dygraph.min.js dist/dygraph-combined.js
-
# Build GWT JAR
jar -cf dist/dygraph-gwt.jar -C gwt org
+# Minify CSS
+cp css/dygraph.css dist/
+cleancss css/dygraph.css -o dist/dygraph.min.css --source-map --source-map-inline-sources
+
+# Build ES5-compatible distribution
+babel src -d src-es5 --compact false
+
# Remove temp files.
rm dist/dygraph.tmp.js
rm dist/dygraph.tmp.js.map
# Pull options reference JSON out of dygraph.js
js = ''
in_json = False
-for line in file('dygraph-options-reference.js'):
+for line in file('src/dygraph-options-reference.js'):
if '<JSON>' in line:
in_json = True
elif '</JSON>' in line:
<p>There's a hosted version of dygraphs on <a href="https://cdnjs.com/libraries/dygraph">cdnjs.com</a>:</p>
-<pre><script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/%(version)s/dygraph-combined.js"></script></pre>
+<pre><script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/%(version)s/dygraph.min.js"></script>
+<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/dygraph/%(version)s/dygraph.min.css" />
+</pre>
-<p>You can install dygraphs using <a href="https://www.npmjs.org/package/dygraphs">NPM</a> or <a href="http://bower.io/search/?q=dygraphs">Bower</a>.</p>
+<p>You can also install dygraphs using <a href="https://www.npmjs.org/package/dygraphs">NPM</a>:</p>
-<p>To install using NPM:</p>
<pre>$ npm install dygraphs
-# dygraphs is now in node_modules/dygraphs/dygraph-combined.js</pre>
-
-<p>To install using bower:</p>
-<pre>$ bower install dygraphs
-# dygraphs is now in bower_components/dygraphs/dygraph-combined.js</pre>
+# dygraphs is now in node_modules/dygraphs/dygraph.js</pre>
-<p>Most distributions include a source map. For non-concatenated 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>
+<p>Most distributions include a source map to facilitate debugging.</p>
<p>To generate your own minified JS, run:</p>
<pre>git clone https://github.com/danvk/dygraphs.git
-./generate-combined.sh
+npm run build
</pre>
-<p>This will create a dygraph.min.js file in the dygraphs directory.</p>
+<p>This will create a dygraph.min.js file in the <code>dist</code> directory.</p>
<p>You may also download files for previously-released versions:</p>
java -jar jsdoc-toolkit/jsrun.jar \
jsdoc-toolkit/app/run.js \
-d=jsdoc -t=jsdoc-toolkit/templates/jsdoc \
- dygraph.js \
+ src/dygraph.js \
| tee /tmp/dygraphs-jsdocerrors.txt
if [ -s /tmp/dygraphs-jsdocerrors.txt ]; then
#!/bin/bash
-# This script generates the combined JS file, pushes all content to a web site
-# and then reverts the combined file.
+# This script generates the bundled JS files and pushes all content to a web site using rsync.
if [ "$1" == "" ] ; then
echo "usage: $0 destination"
fi
set -x
+set -o errexit
site=$1
-# Produce dygraph-combined.js and dygraph-combined-dev.js
-./generate-combined.sh
-./generate-combined.sh cat-dev > dygraph-combined-dev.js
+# Produce dist/*.js
+npm run build
# Generate documentation.
-./generate-documentation.py > docs/options.html
+./scripts/generate-documentation.py > docs/options.html
chmod a+r docs/options.html
if [ -s docs/options.html ] ; then
- ./generate-jsdoc.sh
- ./generate-download.py > docs/download.html
+ ./scripts/generate-jsdoc.sh
+ ./scripts/generate-download.py > docs/download.html
temp_dir=$(mktemp -d /tmp/dygraphs-docs.XXXX)
cd docs
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
+ # This is like "chmod -R a+rX", but excludes the .git and node_modules directories.
+ find . -print | egrep -v '\.git|node_modules' | xargs chmod a+rX
# Copy everything to the site.
- rsync -avzr gallery common tests jsdoc experimental plugins datahandler polyfills extras $site \
+ rsync -avzr src src/extras gallery common tests jsdoc dist $site \
&& \
- rsync -avzr --copy-links dashed-canvas.js dygraph*.js gadget.xml thumbnail.png screenshot.png $temp_dir/* $site/
+ rsync -avzr --copy-links dist/* thumbnail.png screenshot.png $temp_dir/* $site/
else
echo "generate-documentation.py failed"
fi
-# Revert changes to dygraph-combined.js and docs.
-make clean-combined-test
-rm dygraph-combined-dev.js
+# Revert changes to docs.
git checkout docs/download.html
rm docs/options.html
rm -rf $temp_dir
exit 1
fi
-grep "v$VERSION" bower.json
-if [ $? -ne 0 ]; then
- echo "Version in bower.json doesn't match command line argument." >&2
- exit 1
-fi
-
grep "$VERSION" releases.json
if [ $? -ne 0 ]; then
echo "Version $VERSION does not appear in releases.json." >&2
exit 1
fi
-rm dygraph-combined.js # changes to this will make the tests fail.
-make lint test test-combined
-if [ $? -ne 0 ]; then
- echo "Tests failed. Won't release!" >&2
- exit 1
-fi
-git reset --hard # make test-combined deletes the source map
+set -o errexit
+npm run build
+npm run test
+set +o errexit
# Push a permanent copy of documentation & generated files to a versioned copy
# of the site. This is where the downloadable files are generated.
exit 1
fi
-# Everything is good.
-# Switch to the "releases" branch, merge this change and tag it.
-echo "Switching branches to do the release."
-git checkout releases
-git merge --no-ff $branch
+set -o errexit
COMMIT=$(git rev-parse HEAD)
echo "Tagging commit $COMMIT as version $VERSION"
./push-to-web.sh dygraphs.com:dygraphs.com
echo "Success!\n"
-echo "Don't forget to merge changes on this branch back into master:"
-echo "git merge --no-ff $branch"
# Discourage users from working on the "releases" branch.
git checkout master
else
curl -O https://raw.githubusercontent.com/danvk/travis-weigh-in/master/weigh_in.py
- python weigh_in.py dist/dygraph-combined.js
+ python weigh_in.py dist/dygraph.min.js
gzip -c dist/dygraph.min.js > dist/dygraph.min.js.gz
python weigh_in.py dist/dygraph.min.js.gz
legend: 'onmouseover',
stepPlot: false,
- avoidMinZero: false,
xRangePad: 0,
yRangePad: null,
drawAxesAtZero: false,
var OPTIONS_REFERENCE = null;
// For "production" code, this gets removed by uglifyjs.
+if (typeof(process) !== 'undefined') {
if (process.env.NODE_ENV != 'production') {
// NOTE: in addition to parsing as JS, this snippet is expected to be valid
"type": "integer",
"description": "Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point."
},
- "avoidMinZero": {
- "default": "false",
- "labels": ["Deprecated"],
- "type": "boolean",
- "description": "Deprecated, please use yRangePad instead. When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis."
- },
"drawAxesAtZero": {
"default": "false",
"labels": ["Axis display"],
},
"timingName": {
"default": "null",
- "labels": [ "Debugging" ],
+ "labels": [ "Debugging", "Deprecated" ],
"type": "string",
"description": "Set this option to log timing information. The value of the option will be logged along with the timimg, so that you can distinguish multiple dygraphs on the same page."
},
}
}
+}
export default OPTIONS_REFERENCE;
utils.update(this.xAxis_.options, axis_opts["x"] || {});
// For "production" code, this gets removed by uglifyjs.
- if (process.env.NODE_ENV != 'production') {
- this.validateOptions_();
+ if (typeof(process) !== 'undefined') {
+ if (process.env.NODE_ENV != 'production') {
+ this.validateOptions_();
+ }
}
};
};
// For "production" code, this gets removed by uglifyjs.
+if (typeof(process) !== 'undefined') {
if (process.env.NODE_ENV != 'production') {
/**
};
}
+}
export default DygraphOptions;
And error bars will be calculated automatically using a binomial distribution.
For further documentation and examples, see http://dygraphs.com/
-
*/
-// Polyfills
-import 'core-js/es6/symbol';
-import 'core-js/fn/symbol/iterator';
-
import DygraphLayout from './dygraph-layout';
import DygraphCanvasRenderer from './dygraph-canvas';
import DygraphOptions from './dygraph-options';
};
Dygraph.NAME = "Dygraph";
-Dygraph.VERSION = "1.1.0";
+Dygraph.VERSION = "2.0.0";
// Various default values
Dygraph.DEFAULT_ROLL_PERIOD = 1;
*/
Dygraph.prototype.attr_ = function(name, seriesName) {
// For "production" code, this gets removed by uglifyjs.
- if (process.env.NODE_ENV != 'production') {
- if (typeof(OPTIONS_REFERENCE) === 'undefined') {
- console.error('Must include options reference JS for testing');
- } else if (!OPTIONS_REFERENCE.hasOwnProperty(name)) {
- console.error('Dygraphs is using property ' + name + ', which has no ' +
- 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
- // Only log this error once.
- OPTIONS_REFERENCE[name] = true;
+ if (typeof(process) !== 'undefined') {
+ if (process.env.NODE_ENV != 'production') {
+ if (typeof(OPTIONS_REFERENCE) === 'undefined') {
+ console.error('Must include options reference JS for testing');
+ } else if (!OPTIONS_REFERENCE.hasOwnProperty(name)) {
+ console.error('Dygraphs is using property ' + name + ', which has no ' +
+ 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
+ // Only log this error once.
+ OPTIONS_REFERENCE[name] = true;
+ }
}
}
return seriesName ? this.attributes_.getForSeries(name, seriesName) : this.attributes_.get(name);
// TODO(danvk): merge this block w/ the code below.
if (!animatedZooms) {
this.dateWindow_ = null;
- for (const axis of this.axes_) {
+ this.axes_.forEach(axis => {
if (axis.valueRange) delete axis.valueRange;
- }
+ });
this.drawGraph_();
if (zoomCallback) {
this.doAnimatedZoom(oldWindow, newWindow, oldValueRanges, newValueRanges,
() => {
this.dateWindow_ = null;
- for (const axis of this.axes_) {
+ this.axes_.forEach(axis => {
if (axis.valueRange) delete axis.valueRange;
- }
+ });
if (zoomCallback) {
zoomCallback.call(this, minDate, maxDate, this.yAxisRanges());
}
//
// - backwards compatible (yRangePad not set):
// 10% padding for automatic Y ranges, but not for user-supplied
- // ranges, and move a close-to-zero edge to zero except if
- // avoidMinZero is set, since drawing at the edge results in
- // invisible lines. Unfortunately lines drawn at the edge of a
+ // ranges, and move a close-to-zero edge to zero, since drawing at the edge
+ // results in invisible lines. Unfortunately lines drawn at the edge of a
// user-supplied range will still be invisible. If logscale is
// set, add a variable amount of padding at the top but
// none at the bottom.
minAxisY = minY - ypad * span;
// Backwards-compatible behavior: Move the span to start or end at zero if it's
- // close to zero, but not if avoidMinZero is set.
- if (!this.getBooleanOption("avoidMinZero")) {
- if (minAxisY < 0 && minY >= 0) minAxisY = 0;
- if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
- }
+ // close to zero.
+ if (minAxisY < 0 && minY >= 0) minAxisY = 0;
+ if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
}
}
axis.extremeRange = [minAxisY, maxAxisY];
return ret;
};
+// In native format, all values must be dates or numbers.
+// This check isn't perfect but will catch most mistaken uses of strings.
+function validateNativeFormat(data) {
+ const firstRow = data[0];
+ const firstX = firstRow[0];
+ if (typeof firstX !== 'number' && !utils.isDateLike(firstX)) {
+ throw new Error(`Expected number or date but got ${typeof firstX}: ${firstX}.`);
+ }
+ for (let i = 1; i < firstRow.length; i++) {
+ const val = firstRow[i];
+ if (val === null || val === undefined) continue;
+ if (typeof val === 'number') continue;
+ if (utils.isArrayLike(val)) continue; // e.g. error bars or custom bars.
+ throw new Error(`Expected number or array but got ${typeof val}: ${val}.`);
+ }
+}
+
/**
* The user has provided their data as a pre-packaged JS array. If the x values
* are numeric, this is the same as dygraphs' internal format. If the x values
return null;
}
+ validateNativeFormat(data);
+
var i;
if (this.attr_("labels") === null) {
console.warn("Using default labels. Set labels explicitly via 'labels' " +
if (layout.yticks && layout.yticks.length > 0) {
var num_axes = g.numAxes();
var getOptions = [makeOptionGetter('y'), makeOptionGetter('y2')];
- for (var tick of layout.yticks) {
- if (tick.label === undefined) continue; // this tick only has a grid line.
+ layout.yticks.forEach(tick => {
+ if (tick.label === undefined) return; // this tick only has a grid line.
x = area.x;
var sgn = 1;
var prec_axis = 'y1';
label.style.width = getAxisOption('axisLabelWidth') + 'px';
containerDiv.appendChild(label);
this.ylabels_.push(label);
- }
+ });
// The lowest tick on the y-axis often overlaps with the leftmost
// tick on the x-axis. Shift the bottom tick up a little bit to
if (g.getOptionForAxis('drawAxis', 'x')) {
if (layout.xticks) {
var getAxisOption = makeOptionGetter('x');
- for (var tick of layout.xticks) {
- if (tick.label === undefined) continue; // this tick only has a grid line.
+ layout.xticks.forEach(tick => {
+ if (tick.label === undefined) return; // this tick only has a grid line.
x = area.x + tick.pos * area.w;
y = area.y + area.h;
label.style.width = getAxisOption('axisLabelWidth') + 'px';
containerDiv.appendChild(label);
this.xlabels_.push(label);
- }
+ });
}
context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x');
"use strict";
-
/**
* Draws the gridlines, i.e. the gray horizontal & vertical lines running the
* length of the chart.
ticks = layout.yticks;
ctx.save();
// draw grids for the different y axes
- for (var tick of ticks) {
- if (!tick.has_tick) continue;
+ ticks.forEach(tick => {
+ if (!tick.has_tick) return;
var axis = tick.axis;
if (drawGrid[axis]) {
ctx.save();
ctx.restore();
}
- }
+ });
ctx.restore();
}
}
ctx.strokeStyle = g.getOptionForAxis('gridLineColor', 'x');
ctx.lineWidth = g.getOptionForAxis('gridLineWidth', 'x');
- for (var tick of ticks) {
- if (!tick.has_tick) continue;
+ ticks.forEach(tick => {
+ if (!tick.has_tick) return;
x = halfUp(area.x + tick.pos * area.w);
y = halfDown(area.y + area.h);
ctx.beginPath();
ctx.lineTo(x, area.y);
ctx.closePath();
ctx.stroke();
- }
+ });
if (stroking) {
if (ctx.setLineDash) ctx.setLineDash([]);
}
<!DOCTYPE html>
<html>
<head>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Native format annotations</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>demo</title>
- <!--
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type="text/css">
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <link rel="stylesheet" href="../css/dygraph.css">
- <title>dygraph</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dist/dygraph.js"></script>
-
- </head>
- <body>
- <p>1: Line chart with axis at zero problem:</p>
- <div id="graph1"></div>
- <script type="text/javascript">
- var g1 = new Dygraph(document.getElementById("graph1"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n"
- )
- </script>
-
- <p>2: Step chart with axis at zero problem:</p>
- <div id="graphd2"></div>
- <script type="text/javascript">
- var g2 = new Dygraph(document.getElementById("graphd2"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- stepPlot: true
- }
- )
- </script>
-
- <p>3: Line chart with <code>avoidMinZero</code> option:</p>
- <div id="graph3"></div>
- <script type="text/javascript">
- var g3 = new Dygraph(document.getElementById("graph3"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- avoidMinZero: true
- }
- )
- </script>
-
- <p>4: Step chart with <code>avoidMinZero</code> option:</p>
- <div id="graphd4"></div>
- <script type="text/javascript">
- var g4 = new Dygraph(document.getElementById("graphd4"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- stepPlot: true,
- avoidMinZero: true
- }
- )
- </script>
-
- </body>
-</html>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>gadget border</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>callbacks</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>demo</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Charting combinations</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>color cycles</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>color visibility</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>connect separated</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>crosshairs</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="../src/extras/crosshair.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>custom bars</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Custom Circles</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="../src/extras/shapes.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Label styles</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Label styles</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>dateWindow</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Daylight Savings</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>demo</title>
- <!--
- <script type="text/javascript" src="../dist/dygraph.js"></script>
- -->
+
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>dense, filled plots</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>individual points</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Dygraphs Drawing Demo</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Benchmarking for Plots with Many Points</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>dygraph</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Live random data</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!doctype html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Exported Symbols test</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>fillGraph with per series fillAlpha</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>fillGraph</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Fractions</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Custom grid and Dot</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>gviz</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>gviz selection</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>gviz</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Hairlines demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Highlighted Region</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>hourly</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Independent Series</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type="text/css">
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>interaction model</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>isZoomed method</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>isolated points</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>label-div</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<html>
<head>
<title>Milliseconds date labels</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>UTC date labels</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>labelsKMB</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Layout Options</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>legendFormatter</title>
<style>
#demodiv {
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Label styles</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Linear Regression</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type="text/css">
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Linear Regression</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type="text/css">
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Linear Regression</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type="text/css">
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>noise</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>log scale</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>missing data</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>multi-scale</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type="text/css">
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Native Format</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<script type="text/javascript">
g2 = new Dygraph(document.getElementById("graphdiv2"),
[
- [1,10,100],
- [2,20,80],
- [3,50,60],
- [4,70,80]
+ ['1', '10', '100'],
+ ['2', '20', '80'],
+ ['3', '50', '60'],
+ ['4', '70', '80']
],
{
labels: [ "x", "A", "B" ]
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>negatives</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>no range</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>no-visibility</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Test of number formatting</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>numeric axis</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>numeric gviz</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>out of order</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Per-Series Properties</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<div id="demodiv"></div>
<h2>Chart with per-series properties with legend.</h2>
<div id="demodiv2"></div>
- <h2>First graph, using old-style series specification.</h2>
- <div id="demodiv3"></div>
<script type="text/javascript">
data = function() {
var zp = function(x) { if (x < 10) return "0"+x; else return x; };
}
}
);
- g3 = new Dygraph(
- document.getElementById("demodiv3"),
- data,
- {
- strokeWidth: 2,
- series: {
- 'parabola': {
- strokeWidth: 0.0,
- drawPoints: true,
- pointSize: 4,
- highlightCircleSize: 6
- },
- 'line': {
- strokeWidth: 1.0,
- drawPoints: true,
- pointSize: 1.5
- },
- 'sine wave': {
- strokeWidth: 3,
- highlightCircleSize: 10
- },
- 'sine wave2': {
- strokePattern: [10, 2, 5, 2],
- strokeWidth: 2,
- highlightCircleSize: 3
- }
- }
- }
- );
-
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>perf</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>dygraphs Equation Plotter</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript">
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Plotters demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>plugins demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Temperatures with Range Selector</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>resize the window</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>reverse y-axis</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Series highlighting</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<style type='text/css'>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>no range</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Plotters demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>spacing</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>stacked</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>dygraph</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Stock chart</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Straw broom charts demo</title>
<script type="text/javascript" src="../dist/dygraph.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>two series</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>synchronize</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="../src/extras/synchronizer.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Temperatures</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Multiple y-axes with valueRange</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Multiple y-axes</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>dygraphs unboxed</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>Custom underlay callback</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>valueFormatter and axisLabelFormatter</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>visibility</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>X Axis Label Formatting</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>zero series</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
- <link rel="stylesheet" href="../css/dygraph.css">
+ <link rel="stylesheet" href="../dist/dygraph.css">
<title>zoom</title>
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
projects / dygraphs.git / commitdiff