Plotjs

Fork me on GitHub

A lightweight plugin for creating beautiful, responsive charts.

Just include this in your header:


<script src="http://www.michalpaszkiewicz.co.uk/plotjs/plotjs.js"></script>

Pie Chart


var data = {
    bob: 3,
    jane: 5,
    x: 4,
    "Some random value": 32,
    y: 81
}
var options = {
	colour: {
		bob:"gray"
	}
};
var pie = new Plot.Pie("my-pie", data, options);

Bar chart


var data = {
    bob: 3,
    jane: 5,
    x: 4,
    "lots of yellow frogs with jumpers": 32,
    y: 81
}
var options = {
	colour: {
		bob:"gray"
	}
};
//pie chart
var pie = new Plot.Pie("my-pie", data, options);
//bar chart
var bar = new Plot.Bar("my-bar", data, options);
bar.data = pie.data;
bar.draw(bar);

Scatter plot


var xyData = { values: [], colour: "red" };
for (var i = -200; i < 200; i++) {
    xyData.values.push({ x: i, y: 4 * Math.sin(i / 20) - 2 *  Math.cos( i / 10)});
}
var scatter = new Plot.Scatter("my-scatter", xyData, options);
scatter.addCurve(function (i) { return 2 * Math.sin(i / 20) - Math.cos(i / 8) }, "orange");

Box and whisker diagram


var xData = [{ values: [], colour: "red" }, { values: [], colour: "blue" }, { values: [], colour: "green" }];
for (var i = 0; i < 20; i++) {
    xData[0].values.push({ x: i * 2 + 5 });
    xData[1].values.push({ x: i / 2 + 12 });
    xData[2].values.push({ x: i * i / 20 + 10 });
}
var boxAndWhisker = new Plot.BoxAndWhisker("my-box-and-whisker", xData, options);