repository·master·Indexed 25 days ago
https://github.com/danvk/dygraphsA fast, flexible open source JavaScript charting library used to produce interactive, zoomable charts of time series data. It supports features such as error bands, pan/zoom, and adjustable averaging periods, and is designed to work without an external server or Flash. Version 2.2.3-alpha.0.
To use dygraphs in your project with a module bundler (like webpack or browserify), install it using npm.
Note: Do not install directly from the git repository, as npm may fail to build the source code. Always use the tarball install from the NPM registry.
npm install dygraphsUse the following commands to build the project and execute the test suites.
To build the project (using build-jsonly):
npm run clean # if necessary
npm run build-jsonlyYou can run tests against the unminified bundle or the minified files:
npm run test.min.{css,js}): npm run test-minTo run a specific test from the command line using a grep pattern, use the -- separator:
npm run test -- --grep <pattern>npm run clean # if necessary
npm run build-jsonly
npm run test # on the unminified bundle
npm run test-min # on the .min.{css,js}
npm run test -- --grep highlight-series-backgroundWhen contributing to dygraphs, adhere to the following standards to ensure a smooth review process:
camelCase for variable and function names.tests/ directory or create a new gallery entry.dygraph-options-reference.js to avoid warnings.auto_tests directory (either by adding to an existing test in auto_tests/tests or creating a new one).To prepare the environment for building and testing dygraphs, you need to install system dependencies and npm packages.
For building, install the following via apt-get:
jqmkshpaxpython3For a full build including documentation, you also need:
ednode-jsdoc2libjs-bootstraplibjs-jquerylibjs-jquery-uiInstall the project's development dependencies using:
npm install# for building
apt-get install jq mksh pax python3
# npm dev dependencies
npm installTo use dygraphs directly in an HTML file without a module loader, include dygraph.css and dygraph.js. Use Dygraph.onDOMready() to ensure the DOM is loaded before initializing a new Dygraph instance. The constructor accepts a container element, a data string (CSV format), and an options object.
<html
<head>
<link rel="stylesheet" type="text/css" href="dygraph.css" />
<script type="text/javascript" src="dygraph.js"></script>
</head>
<body
<div id="graphdiv"></div
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() { // or jQuery $() etc.
g = new Dygraph(
document.getElementById("graphdiv"), // containing div
"Date,Temperature\n" + // the data series
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n",
{ }
);
});
//--><!]]></script>
</body>
</html>To develop features or fix bugs with live feedback, use the watch command and browser-based runners.
envify and monitor changes: npm run watch2. Open `tests/demo.html` (or another demo file) in your browser to see changes.
### Unit Test Iteration
1. Run the `watch` command.
2. Open `auto_tests/runner.html` in your browser.
3. Use the Mocha UI to run specific tests or suites, or use `it.only` in your code to isolate a single test.
/extras directory rather than being part of the core library. This plotter uses an algorithm that determines left and right control points for each data point to ensure curves connect without kinks, while capping y-values to prevent false maxima.To create a plugin, implement a constructor and the lifecycle methods activate and destroy.
dygraph object here.activate(dygraph, registerer): Called once the dygraph is ready. This is the correct place for:dygraph.graphDiv).registerer object.destroy(): Used for cleanup (implementation details depend on your specific plugin requirements).toString(): Recommended for debugging purposes to identify the plugin.When writing HTML for gallery entries, follow these tips to simplify development:
id in conjunction with specialized CSS for targeting.independent-series entry for specific implementation tips.run scope of a gallery entry are locally scoped and cannot be accessed by inline HTML event attributes (e.g., <button onclick="func">). To make a function accessible to HTML widgets, you must attach it to the global scope (window).cleanup function. This function acts as the inverse of the setup function and is used to perform teardown tasks, such as stopping timers or removing event listeners, to prevent memory leaks or unexpected behavior when the entry is removed.