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:
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.
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))).
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.
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.
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.
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.
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.
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.
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 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];
The canvas has
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.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_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.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.