A responsive jQuery Scatter plot plugin – Scatterplot.js

A lightweight jQuery Scatter plot plugin – easy creating a customizable and responsive scatter plots.

A clever jQuery Scatter plot plugin

Scatterplot.js is a jQuery plugin for creating 2D scatter plot graphs and charts. Good and responsive solution for modern web projects.

Scatterplot.js - responsive jQuery Scatter plot plugin example
Scatterplot.js – responsive jQuery Scatter plot plugin example

Basic usage

Download scatterplot.min.js and scatterplot.css from GitHub. Add these files to the HTML document:

<link href="scatterplot.css" rel="stylesheet" type="text/css" />
<script src="scatterplot.min.js"></script>

Create HTML element:

<div id="scatterplot">
    <span id="point"></span>
</div>

Add JavaScript code:

// with no configuration (default)
$(document).ready(function () {
    $('#scatterplot').scatter();
    $('#point').plot();
});

Or:


// with settings (static)

$(document).ready(function () {
    $('#scatterplot').scatter({ height: 500, width: 500, xLabel:
       'X-Axis Label', yLabel: 'Y-Axis Label', rows: 4, columns: 5,
        subsections: 4 });
    $('#point1').plot({ xPos: 100, yPos: 100, color: 'red' });
    $('#point2').plot({ xPos: 320, yPos: 145, radius: 30,
        color: 'blue' });
    $('#point3').plot({ xPos: 460, yPos: 410, radius: 10, 
        color: 'green' });
});

Simple way to create plots.

License: MIT

Demo:

http://paulwoidke.com/project/Scatterplot-js

More information and download - GitHub:

https://github.com/pwoidke/Scatterplot-js

See also:

Other solutions from Charts category

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1