Scatterplot.js (v1.1.1)

A jQuery plugin for creating 2D scatter plot graphs and charts.

Installation

Download scatterplot.min.js and scatterplot.css from GitHub. Add these files to your site by adding the following references in your HTML file:

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

Usage

Create a HTML element to act as your graph and child elements to act as points:

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

With no configuration (default):

$(document).ready(function () {
$('#scatterplot').scatter();
$('#point').plot();
});

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: 5 });
$('#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' });
});

With settings (responsive):

$(document).ready(function () {
$('#scatterplot').scatter({ height: 500, width: '50%', xLabel: 'X-Axis Label', yLabel: 'Y-Axis Label', rows: 5, columns: 5, subsections: 5, responsive: true, xUnits: ["0%", "20%", "40%", "60%", "80%", "100%"], yUnits: [0, 10, 20, 30, 40, 50] });
$('#point1').plot({ xPos: '10%', yPos: '10%', color: 'red' });
$('#point2').plot({ xPos: '60%', yPos: '40%', radius: 30, color: 'blue' });
$('#point3').plot({ xPos: '90%', yPos: '75%', radius: 10, color: 'green' });
});

Plotting By Class (Static):

HTML:

<div id="scatterplot">
<span class="point" style="left: 100px; bottom: 100px;"></span>
<span class="point" style="left: 300px; bottom: 250px; background-color: blue;"></span>
<span class="point" style="left: 400px; bottom: 450px; background-color: green; width: 15px;"></span>
</div>

Javascript:

$(document).ready(function () {
$('#scatterplot').scatter({ height: 500, width: 500, xLabel: 'X-Axis', yLabel: 'Y-Axis', rows: 5, columns: 5, subsections: 5 });
$('.point').plot();
});

Plotting By Class (Responsive):

HTML:

<div id="scatterplot">
<span class="point" style="left: 20%; bottom: 20%;"></span>
<span class="point" style="left: 50%; bottom: 50%; background-color: #f00ff0;"></span>
<span class="point" style="left: 70%; bottom: 80%; background-color: blue; width: 15px;"></span>
</div>

Javascript:

$(document).ready(function () {
$('#scatterplot').scatter({ height: 500, width: 500, xLabel: 'X-Axis', yLabel: 'Y-Axis', rows: 5, columns: 5, subsections: 5, responsive: true });
$('.point').plot();
});

Settings

Javascript

$('#scatterplot').scatter({
height: 300,// Height of the graph (ex: 500, '50%')
width: 300,// Width of the graph (ex: 500, '50%')
xLabel: '',// Text of label for X-axis
yLabel: '',// Text of label for Y-axis
rows: 1,// Number of rows in graph
columns: 1,// Number of columns in graph
subsections: 1,// Number of subsections for each row/column
color: '#CCC',// Background color of graph
responsive: false,// Set whether graph is responsive (position of labels, units, lines, points set to percentages)
xUnits: [],// Array of units for X-axis (will be evenly spaced from bottom-left corner to bottom-right corner) (ex: ["0%", "20%", "40%", "60%", "80%", "100%"], [0, 10, 20, 30, 40, 50])
yUnits: []// Array of units for Y-axis (will be evenly spaced from bottom-left corner to bottom-right corner) (ex: ["0%", "20%", "40%", "60%", "80%", "100%"], [0, 10, 20, 30, 40, 50])
});

CSS

When creating points, the position, background color, and width can be set using inline styling:

<span id="point" style="left: 100px; bottom: 100px; background-color: red; width: 30px;"></span>
<span id="point" style="left: 50%; bottom: 50%; background-color: #FFFF00; width: 2em;"></span>
<span id="point" style="left: 25%; bottom: 50px; background-color: rgba(255, 255, 0, .5); width: 10%;"></span>

TODOs

Issues

License

Copyright 2013 Paul Woidke

Licensed under the MIT License