Interactive SVG Based Data Plotting Library For jQuery

File Size: 1.84 MB
Views Total: 1251
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Interactive SVG Based Data Plotting Library For jQuery

The InteractiveDataDisplay JavaScript library allows to present complex data in interactive, customizable, SVG based charts with support for panning and zooming.

Dependencies:

  • jQuery
  • RxJS
  • modernizr
  • jQuery UI
  • svg.js
  • filesaver.js
  • jQuery mousewheel plugin

Installation:

# NPM
$ npm install interactive-data-display

# Bower
$ bower install interactive-data-display

Basic usage:

1. Include the required JavaScript files on your html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/rx.lite.min.js"></script>
<script src="/path/to/rx.jquery.min.js"></script>

2. Include the Interactive Data Display's JavaScript and CSS files:

<link rel="stylesheet" href="idd.css">
<script src="idd.min.js"></script>

3. Create a DIV container to place the chart.

<div id="chart" data-idd-plot="chart">
  ...
</div>

4. Prepare your data:

<div id="polyline" data-idd-plot="polyline" data-idd-style="stroke: rgb(89,150,255), thickness: 3">
  x y   
  0 0 
  3 6 
  7 8 
</div>

5. Plot your data as a simple line chart as this:

InteractiveDataDisplay.asPlot("demo");

This awesome jQuery plugin is developed by predictionmachines. For more Advanced Usages, please check the demo page or visit the official website.