MJSplot

Quick Walkthrough

I've loaded the example graph on the index page with some real data collected from an experimental fridge for you to try. Below are a few things for you to try to get fimilar with the avaliable controls

  1. Mouse over and you will see a cross hairs indicating position x and y. The numerical precision of the indicators is sensible for the scale.
  2. Click and drag a rectangle over a section to zoom in. Mobile users can use two fingers to draw out a rectangle, then release to zoom.
  3. Single click to use the auto-zoom (can see everything). Mobile users can use the 'Auto Zoom' button in the lower left.
  4. Right click to zoom out. Mobile users can use the 'Zoom Out' button in the lower left.
  5. Hovering over the top and bottom will reveal buttons and menus.
  6. On the bottom buttons, click the y log button button. It changes the y axis to logarithmic (base 10).
  7. Start zooming around, see how the y axis scale always looks good (even when zoomed in tight).
  8. At the top: click the measure button button to change to measure mode. (You started in the zoom mode)
  9. Click and drag to measure deltas, measure the gradient g=, and measure the time-constant of an exponential decay tau=. (this is an log-lin graph now after all). For examples: find out the heights of the peaks on the pink line (still)? Or how long did the step in the pot pressure last near -2 hours? What was the rate of the acp40out near the beginning?
  10. Reload the page. Your zooming in and the axis choice are as you left them. Everything you change on the graph is saved to LocalStorage .
  11. Data looking a bit rough? hover over the bottom to find the function button menu button. Click it to reveal some functions. Find and click the smooth button. This runs a smoothing transform on the data. You can see the y-axis title has changed to reflect you choice, and under the subtitle there is [smooth] showing the stack of transforms. All of the transforms in the function button menu can stack on top of each other, except for reset that removes all transforms, and pop that removes just the last one.
  12. Not enough smoothing? Some transforms can modify their arguments by clicking on it again. Here it changes the smoothing aperture, you can see the y-axis change to show this too.
  13. You can switch lines on and off in the lines menu.
  14. Try out some regression analysis in the fits menu.

Want to know more? read the Cheat Sheet (png) , (svg).

Demo Pages

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

Exponential Data . Mobile Friendly. A full screen demo with a single series. Try out the different fittings in the fit menu

Temperature Data . Mobile Friendly. A snapshot of some measured temperatures.

Widths Example of using time data. Data loaded from file. Zoom from Months to Seconds

Trust in Media Another example of time data on the scale of years. Data hand typed into the html.

Playground An interavtive space for plotting data and seeing the results

Motivation

Experiments are running, and you need to watch them. Using remote desktop to the computer running data-acquisition can be tricky or unavailable. You need to view things online through a web browser.

Graphs from labview suck. Bad scales, off graph text. Saving graphs from labview is also not network safe, loosing the network connection will cause the labview program to wait - indefinitely. So the decision was to export data and plot in the browser. There are many programs to draw graphs, some of them well written, feature rich, and stable. But not simple enough and not with the features I wanted. So I set out to write the simplest, easy to implement, graphing software for scientists.

MJSplot then grew. It now does many more things that others don't. Now I can really explore data from a web browser, not just look at the some view someone else choose.

Other graphing programs can really suck. I want better looking graphs.

Key-features

Easy to implement
Needs only a canvas element, your data import, one static library import, and a few javascript lines to customize and get going. There are helper blocks in labview to export data to make things easy.
Time series
Beautiful looking time series data that scales to show the most useful lables with only reasonable steps accross years to seconds.
Nice looking
Scales go only in 1s,2s,5s in any power of 10. No more silly auto scales. Sensible number of minor ticks that changes depending on the available room.
Data fitting
Linear, polynomials, and exponential fits. Interpolated or extrapolated lines.
Expressive data manipulations
Flexible and stackable data transformations so you can really explore the data. Smoothing, re-sampling, differentiation, integrating, normalisation, y-vs-y, background removal (auto and manual), rooting, loging, cutting out, and more.
Export data
Get your data out. Never data-trapped. Easily get CVS, Tab-delimited, or even code of the data on screen.
Export images
You can get 300dpi images of the graph for printing. Optionally save to 8.5cm wide at 4x3 ratio, 300dpi for publications. Transparent background by default: good for posters.
Log scales
Logarithmic scales needed by scientists will look good too.
Any sizes
Trivially change the canvas size and recall plot(). The graph will look great.
Interactive
Zoom in/out, move around, make measurements, and a data reader. Easily find the gradient, height of peaks, or period of waves. Find the time constant or power law in log/lin and log/log graphs.
Independent left/right top/bottom autoscaling
Random spikes won't ruin your view.
Nightmode
One-button black/white to white/black. I check my data at night. I'm sure others do too.
Good colours
Easy to differentiate lines. Colours are separated in HLS space, and work on black or white backgrounds.
Persistent changes
Zooming in/Nightmode/axis scales/linemodes are all saved and auto loaded form local-storage on a per graph basis.
Any resolution screen
Graphs should work well with 300px to 3000px. Good for packing in the corner of the screen or a 2 meters away overhead. One click scale-everything button so you don't need to worry about tiny/huge text.
Sensible data precision
The hover-over data reader uses knowledge of the graph to only show the correct amount of numerical precision.

Implementation

I recommend looking at the source code of the demo pages above. It should give you a good idea.

This is a typical implementation:

You will write your data to a file on your webserver as a few arrays like this:

time = [1,2,3,4,5,6];
pot = [2,4,3,4,2,1];
still = [9,8,7,6,5,4];

There are [Helpers] to make this easier.

I'm calling this pressures.js but the name doesn't matter.

Note Time here is just a number not an absolute time. To use absolute time you would use time = ['2015 sept 4','2015 sept 5','2015 sept 6','2015 Sept 8','2015 Sept 13'] . This is covered in more detail below in the [Time Series] section below.

In your html file you'll need to load it in the <head> block:

<script src="pressures.js"></script>

Also in in <head>, load in the library for the current version:

<script src="mjs_plot_0_3_n.js"></script>

Somewhere in your <body>, add a canvas:

<canvas id="democanvas" width="600" height="400"></canvas>

in a <script> block after the body

//make a graph object
var pressure_graph = new_graph("pressure_graph","democanvas");
//give it data
pressure_graph.set_data([[time,pot],[time,still]]);

The argument is an array [] of a two element array [x,y], where each x and y are the arrays of data.

I'm using time as the x array for both lines, but you can use anything.

//set the captions (optional)
pressure_graph.set_captions(['pot','still']);

This is an array of strings to use as captions.

//set up some graphics styling (optional)
pressure_graph.default_graphics_style.title = "Pressures";
pressure_graph.default_graphics_style.subtitle = 'Fridge6';
pressure_graph.default_graphics_style.x_axis_title = "Hours";
pressure_graph.default_graphics_style.y_axis_title = "pressure mbar";
//plot the graph
pressure_graph.mjs_plot();

Full screen view

It can be useful to have only one graph on screen and for it to take up all of the available space.

This can be done by changing the size of the canvas using a big more javascript.

<body onresize="draw_graphs()" onload="draw_graphs()">

Have the body of the document call a function when it changes size (and on load as it needs to be ran at least once)

function draw_graphs(){
some_graph.canvas.width = window.innerWidth;
some_graph.canvas.height = window.innerHeight;
//tell the graph to plot
some_graph.mjs_plot();
}

Define a simple style

<style> body, canvas, html{
margin: 0px;
padding: 0px;
overflow: hidden
}
html, body {
width: 100%;
height: 100%;
}
</style>

Then fix the mobile interface automatic scaling.

<meta name="viewport" content="initial-scale=1.0">

Time Series Data

If you want to use time on the x-axis. Now you can. You'll need to write you times as strings in a format that can be read by your javascript engine. Check Time Tester to see what works. The Labview helper page has a box pre-made for this.

You need only a few modifiactions to the setup.

Once the data is loaded into the browser you will need two lines like

times = convert_time_strings(time_strings);

and

your_graph.default_graphics_style.x_scale_mode = "time";

The first line converts all the time strings into the internal milliseconds from epoc January 1st 1970. The seconds line just tells MJSplot to use these (very large) numbers as times.

Look at the two time-series example from the [Demos] section

Helpers

Exporting your data to a javascript file isn't a very common thing to do. I've written a few helper functions to make the job easier.

I expect this list of helpers to grow as there is more adoption. If you've written one and would like to share, email it to me and I'll put it here.

Weaknesses

Numbers smaller than 1e-250 are zero, Data larger than +-1e250 is undrawable. Datasets larger than 100k can be slow, but your mileage may vary. Touchscreen interactivity can be small. Fullscreen will not work on Apple's safari until it implements the Fullscreen API.

A note on style

MJSplots have a style that focuses on:

I've moved the labels inside the axes in such a way that it won't overlap the data. There is going to be always one spare section on all sides so that the text should not cover up anything. Scale labels remain on the bottom and the left, keeping with tradition. Major and minor ticks are on all sides, removing the need for grid lines that add clutter over the data. It's all about getting the best view of your data, the larger viewport area shows more of it than a labels out design.

Downloads

MJSplot is open source. You can grab a copy just by looking at the source code for this page. If you jumped straight here, I suggest you look at [Helpers] for additional downloads.

mjs_plot_0_3_n.js is a link to the latest version in the 0_3 branch that will not have any breaking api changes. This is the one to use. I don't have a CDN so please don't hot-link it. You can minify with jscompress

You can get the full sized file:mjs_plot_0_3_n.js

New in 0_3_9:

New in 0_3_8:

New in 0_3_7:

New in 0_3_6:

New in 0_3_5:

New in 0_3_4:

New in 0_3_3svg:

New in 0_3_2:

New in 0_3_1:

New in 0_2_17n:

New in 0_2_16:

New in 0_2_15:

New in 0_2_14:

New in 0_2_12:

New in 0_2_11b3 (Quick Fix):

New in 0_2_11b2 (2_2_11b release skipped):

New in 0_2_11:

New in 0_2_10c:

New in 0_2_10b:

New in 0_2_10:

New in 0_2_9c:

Contact

If you've got an implementation I'd love to see MJSplot in action in the wild, or if you just have questions/comments I'd like to know.

You can reach me directly via my university email, on domain lancs.ac.uk with the user "m.sarsby"

I've put together a Google+ if you want to stop by there



MJS 2014-2016