MJS Plot

A javascript library for highly interactive graphs for analysis and data exploration.

MJS plot is a way to get highly interactive graphs in a web browser, with a special focus on scientific and time-series data. Data in graphs can be quickly analysed with non-destructive transforms, and common trends fitted.

You can click+drag or pinch on touch screens to zoom in. There are hover-over menus at the top and bottom that reveal more features.

Simple to use, and free.

One file, no dependencies. Few boilerplate lines. Open source licence.


Zoom, Pan, fit lines, transformations, symbol type, hide/show lines and more.


User made changes stay put. Page reloads won't reset the view.

Mobile Touch

Data analysis on your phone or tablet. Pinch to zoom and under-finger views.


Widely supported, even view graphs on your games console or e-reader wherever you are.


Plot on nearly any size canvas. MJSplot will find a sensible scale. Try resizing this page.

Time-series data

Time axes for graphs. From milliseconds to years there is a scale that works. [demo]

Out-of-the-box OK

Auto-detect axes scales, colours separated in HSL. Clean simple style.

No data traps

Easily get your data out. Export as CSV, JSON, code (c-style, matlab-style), 300dpi PNGs and SVGs.



After picking the measure mode, interactively click and drag out a line to measure what's on the graph. Mobile users can use two fingers to draw a line.

Depending on the axis modes, the measure tool will show:

It works with times axes too: get results in /ms /s /m /h or /day.


Multi Touch

Touch screen users aren't left out. They can intuitively use two finger to move around the graph. Panning and zooming around setting the scale on both axes at once. While doing this an image of the graph is distorted so placement is easy. This is achieves buttery smooth animations.


Data Fits

Get quick results or make predictions.

Data fittings also work on time series data using pre-fit normalisation.


Data Transformations

Quick bits of analysis are easy with a system of stacking data transformations. Each transformation runs on top of the last like c(b(a(data))).

Clicking again on a function can change it's arguments, e.g. smoothing aperture. There are also pop and reset options to remove the last applied transform or to remove all of them.


Function Plotter

Include quick lines without resorting to coding.

When on a time axis the evaluator uses x as milliseconds from epoch. Cyclic functions work well (and is the default) but there is also the variable now available to get the current time in ms.


Data Export

Get actual useful data straight from the graph. No data-readers required here!

You can get the data out and into a format you want to use.

In testing: there is a link export mode that generates a long url from the graph including all the data, captions, styles, transformations, and fits. Send this link to a peer and they will be able to see the graph just as you see it.


Time Axis

Fully automatic, fully working time axis.

Only picks useful scales with sensible ticks and resolution. Handling months with different number of days. Leap days, and leap seconds OK.


Log Scales that Work

Never get stuck with a view that can't tell where it is. It works continuously even if the data covers 100s of orders of magnitude or 1/100th.


Fullscreen Graphs

Press the fullscreen button to launch any graph fullscreen. Get the most out of valuable mobile screen space.

Great for small screens, tablets, phones, and overhead monitors.

Not working on Apples's Safari until they implement the fullscreen API


Histogram Generator

Using hist, one of the many stackable functions. It returns the bin centers and counts, then use the histogram line mode to view a histogram.


Take graphs further

Make all the adjustments you want in whatever editor you want. Image export options:

Pre-set sizes

You can get any size graph you want, just by resizing the canvas. There are pre-defined sizes for small and large figures commonly used in papers or reports.



Build Your Own

The Playground.

This is a space where you can import data, manipulate it, and then plot using MJS plot. The interface on this page is simplified and made to imitate like matplotlib and matlab.


Three Fullscreen

Pulls data from different sources, Three graphs on a screen. Shows setting defaults. A frozen snapshot from a live page.

This page isn't so mobile friendly. It was written for an overhead display.

Time series Data

Mobile Friendly. A snapshot of some measured temperatures.

Exponential Data

Also Mobile Friendly. You can try out different fits from this data set.



MJS plot subreddit A place to complain about everything, or show off, or ask for help. The developer hangs around here.

Google+ Posts about MJS plot are sometimes made here.


The hardest part of using MJS plot for logging is getting your data accessible online. This is typically just read asynchronously, or included in the webpage.

The a quick api reference is available as well as a more tutorial style guide

Plating Data

The minimal code to get a graph.

var demo1Graph = mjs_plot.new_graph("demo1Graph","demo1");
var x = [1,2,3,4];
var y = [8,6,2,6];
demo1Graph.set_captions(["Basic Line"]);

The canvas has id="demo1".


Accessible via the graphics_style and default_graphics_style

If you want to force the change, or just setup the first view

var demo2Graph = mjs_plot.new_graph("demo2Graph","demo2");
demo2Graph.set_captions(["Basic Line"]);
demo2Graph.default_graphics_style.title = "Example Graph";
demo2Graph.default_graphics_style.show_grid = true;
demo2Graph.default_graphics_style.y_scale_mode = "log";
demo2Graph.default_graphics_style.x_axis_title = "x"; demo2Graph.default_graphics_style.y_axis_title = "y"; demo2Graph.mjs_plot();

You can setup everything, colours, fonts, subtitles, axis labels and more.

Multiple Lines

As many lines as you want. Each line gets a colour that is separated in HLS space.

demo3Graph.set_captions(["First Line","Second Line"]); demo2Graph.mjs_plot();

Working with Time

Time strings get processed into milliseconds from epoch. Many time strings work, but the preferred type is ISO 8601.

var demo4Graph = mjs_plot.new_graph("demo4Graph","demo4");
var t = ['April 20 2015', 'May 3 2015', '2015-05-25T12:00:00Z'];
var h = [1.2e-15,6e6,8e16];
var t = mjs_plot.convert_time_strings(t);
demo4Graph.set_captions(["Time Series"]);
demo4Graph.default_graphics_style.x_scale_mode = "time";
demo4Graph.default_graphics_style.y_scale_mode = "log";

Test the time string you want to use with the time tester

Here you can also see the y-axis data spanning many orders of magnitude begin plotted just fine.

MJS 2014-2015