Getting Started - A users perspective

If you have been given access to a page containing a graph drawn with MJSPlot it can be initially a little daunting with all of the available options. However with a little knowledge you should be able to see and explore many aspects of you data. This users guide will cover the basics of zooming and panning around the view of the data, adding annotations and markers, transforming data including using the non-destructive live data transforms, and exporting data and images for use in other programs. The graphs and all features are accessible using a tradition keyboard and mouse as well as a touch screen interface.

Introduction

Zooming and Panning

For Touch Screens

If you are on a mobile device then the default "mouse mode" will be the drag mode. In this mode you can use a single touch to view an indicator of current position on the graph. This is useful for reading-off data. However, when using two touches, the graph will zoom and pan just like scaling an image, or zooming on a map. When any of the two touches are released MJSPlot will find the nearest valid axies and show the zoomed/panned data. During the multitouch zoom and pan an image of the data provides feedback, this is usually hardware accelerated and is very responsive.

The zooming of a graph is similar but unlike scaling of an image or a map. When scaling a map or image the x-axis and y-axis 'zoom' is usually equal, so that the image isn't squashed or stretched, and a km north-south is shown as the same number of pixels as a km east-west. However this isn't the case for graphs, as we may want to only scale one or the other axis. As such this constraint isn't applied. The multitouch zooming of a graph created by MJSPlot can be used to scale ether axis or both simultaneously and separately in a single gesture. Also unlike maps or image like scaling is the additional constraint of zero rotation. Up must always be up. Adding this constraint is required if the equal scale requirement is eased.

You can change mouse mode to be the "zoom" mode using the zoom mode button on the top of a graph. In this mode, two touches over the graph draw a rectangle over the view to indicate where the view will be zoomed to. Two buttons appear over the graph in the lower left corner while touching to enable zooming out and resetting the view to automatically scale to view all the data. The "zoom" mode on tough devices is enabled for feature-parity, but it is recommended to use the "drag" mode.

Keyboard and Mouse

MJSPlot users with a mouse will be in the "zoom" mode by default. Press and hold the left click to drag out a zoom rectangle, then release to zoom to that view. Right click can be used to zoom out a small amount. A single left click that is not dragging a rectangle will auto-zoom the view to show all drawn data. The scroll wheel can be used to zoom into and away from the pointer. Using the scroll wheel when over the axes will zoom only that axis. If using a keyboard and mouse the spacebar + left click and drag will pan the view.

Adding Markers

The marker menu at the top of the graph can be used to add annotations like lines, pointers, shapes, and text to the graph. The text captions can use special symbols to show graph based infomation like "%dy" shows the change in y, or "y1" for the y value of the first node. "%g" can show the gradient.

The markers coordinates are stored on the data-layer and will stay with the data when zooming and panning making it ideal to label features like regions, slopes, peaks, and spikes, etc.

The "mouse" mouse mode can be used to edit the position of a marker. There are tools to edit color, stroke, text, and to remove markers in the marker menu. Holding shift while moving a marker will lock the motion to 22.5 degree angles.

Running Fits

Quick data fitting to some common functions is available in the fits menu. The fit uses all data that is on the graph, so it is useful to combine data fittings with the trim and cut tools to fit specific regions of data. These fits run in polynomial time and are fast enough to run on live data. fits can be optionally extrapolated to form predictions.

Exporting Data

You can export data in a variety of formats (code, CSV, tabbed, Matlab) for use in other applications using the export menu in the lower right corner. More detail on the Export Data page.

Creating Images

Images of the graphs can be exported from the export menu. The high resolution exports apply scaling for 300dpi prints. SVG export use a custom exporter to provide true vector graphics of the graph. These are ideal for importing into Inkscape or Adobe Illustrator. A hybrid mode called SVG+PNG renders the annotations, text, and axes as vector graphics and embeds a high resolution png image for the data. This is very useful for exporting data with many tens of thousands of data points without bloating the size of the file.

Applying Data Transformations

The functions menu, f(x), can be used to apply a stack of non-destructive transformations to the data. Smoothing, differentiating, scaling, normalizing etc can be helpful during analysis. Some of the filters when applied twice will change an argument of the filter, e.g. applying smoothing twice will widen the smoothing aperture, applying jitter twice will increase the amount of jitter. Some filter intelligently cancel out, e.g. log(x) and 10^x. The results of the transforms is cached to reduce re-processing. The transforms can be all removed using the "reset" button in the f(x) menu. Just the last applied transform can be removed using the "pop" option. Advanced uses can apply custom transformation and custom filters and combine filters to achieve complex results.

Changing The Graph Style

The style menu in the top right corner of the graph can be used to change many of the visual aspects of the graph including colors, fonts, spacings, ticks, line thicknesses etc. It is possible to change the whole theme of a graph from the "graph->apply theme" menu option.

Modifying Line Types

The symbols, and line mode can be modified for all data series simultaneously using the quick menu in the top left. Individual series can have customized symbols, line modes, dashing, and color using the line menu.