Skip banner and navigation tools.

 |  site map

jsplot Javascript data plotting — documentation



jsplot is a Javascript package developed at the UKSSDC to enable interactive plotting of XRT light curves. It is used for all light curves available through the UKSSDC website. It allows easy zooming, a crosshair and cursor location tools; beneath the hood it also allows for other data-interaction options (such as changing the BAT binning in the burst analyser) to be performed on-the-fly, without the need for large numbers of images to be stored on disk and selected based on user input.

It makes use of Javascript, JQuery and HTML5 <canvas> elements and should work on a reasonably up-to-date browser. It has been tested on Firefox, Chrome and Safari on Linux and Mac OSX. At the present time, jsplot is not documented for general use although a release of the code and API may take place one day.

[Back to contents]

jsplot controls

The majority of the controls in jsplot are concerned with modifying the axes of the plot. These controls presuppose use of a mouse or touchpad; at the present time interaction on touch-screen devices is limited to using the form method. As well as these controls, there are a few additional options activated by key presses.

Keyboard controls

There are currently 3 key bindings which only work when the mouse is over a jsplot plot.

The c key toggles the appearance of a floating box that follows the mouse and reports the co-ordinates of the mouse position. For plots with multiple axes, if the mouse moves from one panel to another, the co-ordinates reported will always for the panel the mouse is currently over.
The x key toggles the presence of a crosshair across the axes, centred on the mouse location.
Pressing escape resets the axes of the plot to their default values. This includes resetting whether they are plotted in linear or log space.

Mouse controls

The mouse can be used to zoom in or out on the plot in the two ways described below. To toggle whether the axes are plotted with log or linear scaling, use the checkboxes above the plot. This will result in the axes being immediately redrawn (unless the input form has been selected). Note that if you have linear axes with a limit below zero and then select log axes, an error will be generated.

On a plot with multiple panels, the time axis is fixed between panels, so any mouse zoom will update the time axis for both plots; however only the y-axis of the selected plot (that over which the mouse is when the gesture begins) will be modified.

Click and drag
The easiest way to use the mouse/touchpad is to left click and drag within the plot axes. A grey box will mark the area selected. When you release the mouse button, the plot will zoom such that the area selected fills the axes. If you started drawing a box by mistake, press escape before releasing the mouse button to cancel the zoom.
Scroll wheel / scroll gesture on a touch pad

You can zoom in and out using the scroll wheel, or a gesture on touchpads that offer this service (e.g. a two-finger swipe). To zoom in, scroll as you would to scroll towards the top of a web page; to zoom out, scroll down the page (NB, I say this rather than simply up or down, as different operating systems interpret up and down on a mousewheel differently).

To prevent accidental zooming while navigating the page, the mouse scroll is only interpreted as a request to zoom if the control or shift key is held down. Holding the control key causes the centre of the plot to remain the same. Holding the shift key causes the zoom to be centred on the mouse location.

To avoid accidentally zooming too far, there is a limit to how far you can zoom with a single gesture.

Using the input form

For fine-control over the axis limits (or for users without a mouse/touch pad) you can manually enter the axis limits. Above the plot are controls to set whether the axes use log or linear units. Above this is a link named something like “Show full plot controls” (the precise wording is plot-specific). Clicking this link will cause a form to appear (the log/linear axis controls will be incorporated into this form). The current axis limits will be shown in the boxes. To rescale the plot, simply enter in the axis limits you want and click the “Plot” button. NOTE at present axes must increase, i.e. the upper limit must be greater than the lower limit.

When the form is shown the mouse and keyboard controls still work. If you zoom with the mouse, the values in the form will automatically update. However, while the form is visible, toggling linear/log axes will have no effect until the “Plot” button is clicked.

[Back to contents]

Saving a png

You can save a png version of the image users your browser's normal means to save an image (e.g. right-click on the image and select “Save image as…”).

[Back to contents]

Generating postscript plots

On the light curve page a link is given either above or below the plot, labelled “Generate postscript plot.” If you click on this link a postscript file will be generated (this may take a few moments). When it is complete, a link is given to the ps file.

To facilitate the creation of postscript files which look like that displayed on-screen, jsplot has been deliberately designed to behave like qdp, however it is inevitable that, from time to time, there may be slight differences between the on-screen image and the postsript file. For this reason, a second file is available for download: the “Data file with qdp plot commands.” This is the file which was plotted in qdp to generate the postscript plot so you can load this into qdp and edit the plot interactively, but beware: for plots containing upper limit, this downloaded file must not be interpreted as containing the actual upper limit values. The qdp symbol used for an upper limit in our plots (mark 31) is an arrow, but the centre of the arrow appears at the data value, whereas we wish the top of the arrow to be at the data value. Therefore a modification is made to the data before plotting to align the arrows correctly. To view the actual data you should use the Data file link described in the next section.

[Back to contents]

View the data

To view the data which went into the plot, simply click the “Data file” link. This will show the data, in qdp format. That is, it will begin with a line READ TERR 1 2 which indicates that the x and y columns contain asymmetric errors. The data lines are given of the form time time(pos_err) time(neg_err) rate rate(pos_err) rate(neg_err) where of course the y-values may be flux, hardness ratio etc, rather than rate. Each data set is preceeded with a comment line (beginning with an !) giving the name of the dataset, and datasets are separated by lines of NO NO NO NO NO NO again for qdp.

This data file can be loaded in to qdp for interactive plotting.

[Back to contents]


Changes since the release of this facility will be listed here, most recent first.

[Back to contents]