**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.

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:

- Deltas
- Gradients
- Time constants
- Powerlaws

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

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.

Get quick results or make predictions.

- Linear fits with error estimation
- Polynomials.
- Exponential Decays, with and without an offset +c

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

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`))).

- Many common operations
- 1/x, log(), ln(), exp() etc
- Smooth (with variable aperture)
- dy/dx, integrate
- y vs y
- Jitter, subtract line
- custom functions.
- subtract fit, remove outliers.
- and more!

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.

Include quick lines without resorting to coding.

- Drawn on-the-fly
- Infinite canvas
- Functions even on a time axis

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.

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.

Fully automatic, fully working time axis.

- Any scale between 0.001ms to 10years.
- Unambiguous, shows enough information without clutter.

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

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.

- Normal log
- Zoomed in log scales that look just like a skewed linear scale.
- Far zoomed out view, handle well spaced orders of magnitude
- When using SI units, jump in powers of three only.

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

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.

- Auto binning, nice scales.
- Even on a log axis.

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

- vector format graphs as
`.svg` - 300dpi raster graphs as
`.png`

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.

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.

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.

Mobile Friendly. A snapshot of some measured temperatures.

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

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_data([[x,y]]);

demo1Graph.set_captions(["Basic Line"]);

demo1Graph.mjs_plot();

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_data([[x,y]]);

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.

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

```
...
```

demo3Graph.set_data([[x,y],[x2,y2]]);

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

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_data([[t,h]]);

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