9042 lines
296 KiB
JavaScript
9042 lines
296 KiB
JavaScript
/* **********************************************
|
|
mjs_plot
|
|
|
|
CC MATTHEW SARSBY, 2014,Some Rights Reserved.
|
|
|
|
You are free to use, copy, and modify this
|
|
software in non-profit applications.
|
|
Modifications must retain this header, and a file
|
|
name in the format mjs_plot_*.js
|
|
|
|
mjs_plot is distributed with hope it will be useful
|
|
but WITHOUT ANY WARRANTY.
|
|
|
|
TODO:
|
|
add more functions:
|
|
+ annotations system (big!)
|
|
- arrows
|
|
- lines
|
|
- text
|
|
- annotation storage inside graphics_style
|
|
- annotation selector, move, edit.
|
|
- kernals graph
|
|
- improve the interpolation algorythem
|
|
- add fitting errors
|
|
- improve the smooth function
|
|
+ extend graph.data type to include x and y error options
|
|
+ include x,y,x_error_low,x_error_high,y_error_low,y_error_high
|
|
- then expand all the function to correctally manage the propogation of errors. :/
|
|
- start using a Series object to hold each series. this might make things cleaner?
|
|
- add support for a series to use left or right axies top/bottom too
|
|
- put arrows in the lines menu to show what axis that line is on
|
|
- expand units_to_pixels and pixles_to_units to include which one (left/right, top/bottom)
|
|
- add axies menu
|
|
- which axis is active (left, right, both; top, bottom, both)
|
|
- put log-lin mode changes here
|
|
- put changable time modes here
|
|
- expand line menu to have per-line pickable line modes /colour.
|
|
- have functions work an any series, individually. not shore how this will work.
|
|
- add remove_backgound function that seaks the longest straightline removeing the bad points.
|
|
- fix the large year spacing issure to quantise correctally.
|
|
|
|
Hold ups:
|
|
None
|
|
|
|
Known Bugs:
|
|
- time in 10s of years doesn't align correctlly to decade boundaries.
|
|
- on mobile devices if the viewport has a zoom != 1 the position infomaition is wrong.
|
|
- the swap axis button changes the axis modes, but this isn't reset when the reset button is pushed.
|
|
|
|
|
|
Done:
|
|
2_2_6 - added y-c and x-c functions
|
|
- history began
|
|
2_2_7 - fixed transforms making nans (dam logs) by implementing transforms.clean() that cleans data.
|
|
- added a curved line to log/lin and log/log graph that shows what a line in linear space looks like.
|
|
- hooked onto mouseout event so that when the mouse leaves the graph the buttons on the top/bottom don't still show.
|
|
- sum function now works in a basic way.
|
|
- added graph.errors = [] list of strings that prints before getting the scale.
|
|
- added error messages throughout.
|
|
- imporved handling of manuly picked negative scales when chanig to log mode
|
|
- fixed errors trigering other errors. so now only the more useful errors are shown
|
|
- added not_drawn_something and no_data flags
|
|
- added font checks.
|
|
- added version number and me to the extended info page.
|
|
2_2_8 - changed minwidth and maxwidth to guideWidth.
|
|
- implemented polynomial fits and a fits menu.
|
|
- added data reader that sticks to the points
|
|
- implemented smooth function. uses weighting so that it works on unevenly spaced data. Still not great.
|
|
- implemented 'mid' line mode. Like zig and zag but does the vertical at the mid x-point
|
|
- improved the find_scale function. much simpler!
|
|
- fixed the major/minor ticks regression.
|
|
- refactored this.graphics_style inside graph.plot() to gs.
|
|
- refactored context to ctx
|
|
- imporved line mode changing code (smaller, faster, eayser to read)
|
|
- imporved 'hist' line mode
|
|
- added 'mid' and 'hist' to the caption sketch box
|
|
- moved title and subtitle to draw ontop of the data.
|
|
- added transforms text list so you can see the transforms stack.
|
|
- fixed an extra label being drawn at the top of the scale when using narrow log mode.
|
|
- added fittings menu and fittings!
|
|
2_2_9 - split guideWidth into guideWidthx and guideWidthy
|
|
- changed over to load_gs and save_gs function. - much smaller cookies!
|
|
- added options pane. user can now edit everything in graphics style, even though they ofern shouldn't
|
|
- implemented graph.default_graphics_style as a way to change the defaults but still allow the user to make there own changes. uses graphics style peroperty called .modified that is false on fresh graphics styles.
|
|
- zoom out by right click in zoom mode.
|
|
- overridden the right click context menu on the canvas (required for the zooming out)
|
|
- unified label drawing code. (about 100lines less!)
|
|
- added basic ability to draw grids under the data
|
|
- fixed the end of the mouse zoom rectangle ending on a button and activating the button.
|
|
- added graph.ui object. and ui.size as the size of the ui in pixels.
|
|
- graph.ui is set by what will fit on screen, no more buttons going away!
|
|
- unified find_limits. also reducing number of lines.
|
|
- can use local storage if it is avaliable. defaults back to cookie storage.
|
|
- export menu: low res png, high 3x png, data tabbed, data code style, data cvs, png for figure is a 1000px*750px image scaled up by 2.5x.
|
|
- fixed inconvienence with the y axis scale labels covering up the y axis label
|
|
2_2_10 - exported graph now use transparent backgrounds - better for posters
|
|
- text uses the text_center method.
|
|
2_2_10b-removed cookie based storage, reverted back to saving full JSON'd graphics_style object.
|
|
- added basic touch support detections and forwarding touch events to act like mouse.
|
|
- basic touch screen support
|
|
- imporved options menu layout to fit the screen better and simpler code.
|
|
- imporved the visibility of the caption text by using strokeText() this only works if the background isn't transparent.
|
|
- fixed graph.graphics_style.hidden_lines not being populated after a graphics_style reset.
|
|
- imporved visability of fit text by using strokeText
|
|
- fixed issue with the scale stepping changing if 0 was on the edge. (change between -0.0 and 0.0) causing the stepping flag to jump randomly depending on floating point rounding.
|
|
- added mouse mode 'mouse' for moving objects.
|
|
- added captions_position object to graphics_style
|
|
- added fit_text_position object to graphics_style
|
|
- can use mouse mode to move the position of the fit text and the captions
|
|
- captions have correct alignment depending on which quadrant they are in.
|
|
2_2_10c- changed ctx.lineJoin to rounded from miter. looks better.
|
|
- imporved touch support. including zoom out button. (no right click on a touch screen!)
|
|
- view under finger on touch screens.
|
|
- added mobile support as well as touch support.
|
|
- added flag DEBUGG_FORCE_TOUCH to help testing.
|
|
- fixed regression in placement of transforms list.
|
|
2_2_11 - fixed bug where the user pics an manual man/min that is off the range of the data and then picks an autoscale direction that is away from the data causing max to be lower than min (or viser versa).
|
|
- moved fitting function into fits object, unified fitting code.
|
|
- fixed bug with fittings on log scale drawing odd lines between -ve line points
|
|
- added y=c fitting (trivial)
|
|
- added option for fits to extrapolate rather than interpolate
|
|
- added graphics_style.fit_color boolean, no ui avaliable yet.
|
|
- overhaul of the infomation button. now shows other graph infomation
|
|
2_2_11b- added ax^b, a*blnx and abx^c fits.
|
|
- added remove-fit
|
|
- added remove-outliers
|
|
- added keep only outliers
|
|
- added fit option 'old' to show the old fit and not make a new one (usefull for understanding the new functions)
|
|
- added graph.old_fit to hold the old fit.
|
|
- added gauss dirstobution
|
|
2_2_11b2 - added subtitle2 for a second line of subtitles
|
|
- added jitter funciton
|
|
- the transforms list drawn position now depends on if the subtitles are drawn or not. (looks better)
|
|
- improved the drawing of histograms. the bars now only go to zero.
|
|
- fixed bug with intergrate transform.
|
|
- added spacing function. 1/spacing is usefull for finding the data dencity
|
|
- added touch only on screen zoom out button, and auto zoom button.
|
|
- Fixed problum with the menu text now being drawn on mobile devices.
|
|
- Changed default fit-text posision.
|
|
- fixed bug with number_quote causing crashes when given NaNs
|
|
2_2_11b3 - quickfix to change MJSprecision
|
|
2_2_12 - added JSON export [[][]]
|
|
- added matlab style data export. [] with spaces between the numbers.
|
|
2_2_13 - changed -mx+c button to be a user selectable line by drawing. was an automatic line, but that is now acheviable by picking a linear fit and then subtract fit.
|
|
2_2_14 - added time axis
|
|
- added functions to print a time at different precisions
|
|
- added methods to find correct time axis
|
|
- added transofrms to convert time to numbers
|
|
- added time menu in functions menu.
|
|
- modified code to use get_axis_string so that time can be provided in the measure, x-c,y-c tools.
|
|
- added website to info button
|
|
2_2_15 - changed default apperence, font to "sans-serif", white->#111111, dark->#eeeeee.
|
|
- added markers on mouse-zoom while dragging to make it easyer to see where the zoom is going.
|
|
- pinch to zoom on mobile works in drag mode.
|
|
- ping zoom scale has min 0.1x and max of 10x
|
|
- reading off graphs is now easyer as the labels have stroked text
|
|
- data reader mode has stroked text for easyer reading.
|
|
2_2_16 - vastly improved the axis labels stepping charastic using font-metrics on the left
|
|
and right sides. meaning slim fonts jump to stepping less.
|
|
- improved performace after dragging
|
|
- improved performace in mjs_plot() if not dragging, no need to save a drag image.
|
|
- added code to check for visable sequences of data, and then to only draw the data that appears
|
|
on screen. Huge improvements in performance when zoomed in.
|
|
- then only do that if the view is zoomed in, as finding sequences takes time.
|
|
- fixed regression in the options menu where the background wasn't transparent
|
|
- added show_grid option to graphic_style, grid button in lower left, grid drawing
|
|
- added option for middle ground colour. but this is not used anywhere yet.
|
|
- measure mode on mobile devices saves the gradient and measurments after the user lifted one finger.
|
|
- modified date printing behavour.
|
|
- added the 5day interval for timemode axies. the jump from 2d to 7d was too much.
|
|
- added fullscreen button in lower right corner. This kills the rest of the page to put the graph full size and requensts
|
|
that the browser goes full screen too.
|
|
2_2_17 - added shim function between mouse_move_event and the event hander
|
|
so that if the function hasn't ended it won't try to call it again
|
|
- added fps counter and DEBUGG_FPS global flag
|
|
- reverted graph position overlay to be near the pointer, with
|
|
position caped to be on screen. This fixes a performance regression.
|
|
- added custom function to functions.
|
|
- function parser can now use the "now" variable. useful if working with time data.
|
|
- line menu has add function line button and keeps track of fuction lines
|
|
- cleaned up code when drawing simple line on the graph.
|
|
- modified the code for datetime printing. still trying to get this right.
|
|
0_2_18 - added mode menu in top right
|
|
- removed dot_size and circle_size
|
|
- added symbol_size as replacement
|
|
- removed feature: draw label over the graph.
|
|
- added symbols cross and x
|
|
- added captions menu
|
|
- added captions_display and show_captions to graphics style.
|
|
BREAKING CHANGES MADE rename 0_2_13 to 0_3_1
|
|
0_3_1 - fixed fonts changing size in on_mouse_over
|
|
- added normalisation for fits when using a time axis. Huge improvement (now usable)
|
|
- preliminary support for poltting error bars.
|
|
new allowed formats:
|
|
[x,y] // existing
|
|
[x,y,yerror] //using yerrors
|
|
[x,y,yerror,xerror] //using x and y errors.
|
|
//note errors are not accounted for in transformations. yet.
|
|
support for errors should be considered unstable.
|
|
- changed namespace. now using a javascirpt module pattern.
|
|
use mjs_plot.new_graph(name,canvas)
|
|
mjs_plot.convert_time_strings(strings)
|
|
mjs_plot.get_graph_style()
|
|
|
|
all the helper funtioncs are hidden away from the global name space.
|
|
added "use strict"; to many functions to avoid pollution.
|
|
0_3_2 - added area consideration to gauss fitting. much more usefull now.
|
|
- fixed gauss fit area being upside down for right-to-left data
|
|
- fixed the mid variable not beging declaired.
|
|
- added mean_normalise function y' = (y-mean(y))/sigma(y)
|
|
- changed the size of the buttons to scale with the size of the tick text rather than the size of the ticks.
|
|
- the mouse move event text on mobile devices is at the edge rather than near the finger.
|
|
- removed limitation of 1e-13 being the smallest plottable number. now it is 1e-203 ish.
|
|
- modified/fixed time scale behavour when working in different time zones
|
|
- time does scaling to the nearest start of the unit. i.e. going up in every 2h is 0,2,4,6,8 etc, not 1,3,5,7.
|
|
- improved tick labels for time. check if the highprecision is needed. Results in shorter strings with no losses.
|
|
0_3_3svg - added svg output!
|
|
- large and small figure sizes
|
|
- drawing improvements (things spotted when drawing svgs
|
|
0_3_4 - changed website to github.io
|
|
- improved right-click zoom out method. Now uses the guidewidth method.
|
|
- removed the "there is no x/y data to plot" error from popping up, as users draw funciton lines without any data on screen.
|
|
- fixed svg opacity.
|
|
- added svg font handling in fillText
|
|
- fixed bug in find_limits where there are is no data and the user picks a negative low point for a log scale.
|
|
- removed the + and - buttons from the top row, this was confusing new users.
|
|
- replaced it with a 'graph' menu. from which users can set the title and other strings.
|
|
- added new options to hide the transform text.
|
|
this means users can clean up the axis titles to what they want before printing.
|
|
- improved HTML embedding export.
|
|
- improved text to screen. Rather than dumping all over the <body> it now places a textarea with the contents
|
|
and a button to go back.
|
|
- added robustness to users zooming way out trying to break things. caps at +-1e250 and 1e-250 on log mode.
|
|
- time now can have a scale in 1000s of years.
|
|
0_3_5 - imporved the mouse_out functanalitty.
|
|
- improved the options overlay mouse mode.
|
|
- added x_axis_title y_axis_title x_axis_prefix x_axis_postfix y_axis_prefix y_axis_postfix to graphics style
|
|
- added x_label_mode y_label_mode to graphics style
|
|
- added x and y menues.
|
|
- added functanality for pre and postfixes on axies numbers.
|
|
- added functanality for different number writing methods, infix postfix and scientific form
|
|
- fixed bug in drawEclips. This was introduced in the namespace cleanup.
|
|
- changed html embed to html sharing. Gives a single link to a full screen graph.
|
|
this requires a know domain to hold a loader program.
|
|
- embed LZstring.min.js for compression of the strings.
|
|
- added splash screen to be draw when a new graph is made.
|
|
- apperentally my "use strict" was in the wrong palce and wasn't checking globals. This is fixed and
|
|
then a bunch of global fixes followed.
|
|
0_3_6 - imporved axis lable layout.
|
|
- imporved string rendering of linear fits
|
|
- removed options menu. replaced with style menu
|
|
- added font menu. Finds fonts avaliable on the system using MJSFontList.
|
|
- fixed bug with minor ticks being overdrawn. Only visable on SVG output.
|
|
- added groups to the SVG context. This means each line is grouped for easyer editing.
|
|
- added clipPath to SVG output. this prevents the lines going outside the box.
|
|
- added maths number display mode, it uses unicode characters for 10x^3 etc..
|
|
- put in method to find precision on log axis.
|
|
- fixed minor typos
|
|
- imporved mjs_precision output
|
|
- added and using getFloat. a helper function to get a number from the user. Does better checking.
|
|
0_3_7 - touch screens now use a small block in the center in the under-the-finger view
|
|
- the grid uses color_mg rather than transparancy.
|
|
- added per-line colours
|
|
- added per-line symbol and line modes.
|
|
- gs.symbol_modes gs.line_modes and gs.line_colours
|
|
0_3_8 - improved speed of the clean transform by up to 22x. this is used in trim, cut and filter, and many other transforms to remove non-finite values
|
|
- added view last n transform to look at only the last however-many points. usefull for rolling data.
|
|
- added custom filter transform that will evaluate an expression and filter from that. Very useful for looking at only that last hour (rolling) of data from logs.
|
|
- added extra-precision option to the captions menu, so that the values of the captions can be expressed more precisly if the user wants it.
|
|
0_3_9 - fixed bug with graph reset. the colours now are reset correctlly.
|
|
- fixed bug with data display not 'bouncing' off the right side of the screen.
|
|
- fixed bug if mouseMove is called befor mjs_plot trying to draw an image that isn't rendered yet.
|
|
- fixed UI bug where user trys to set an empty string ( a falsy type) and then it is ignored. Added getString function which garrentees a string to return.
|
|
0_3_10 - added svg+png export type, the background data is rendered as a high resolution PNG, while the text and ticks are SVG
|
|
- added us for svg+png in the export menu, this does need an overhaul.
|
|
- fixed bug with error bars not being handled corrently while being cleaned.
|
|
0_3_11 - added a basic annotation system/marker system.
|
|
users can now go to the marker menu at the top to add/remove markers - lines, text and boxes.
|
|
for each of lines, boxes and arrows, the user can pick to add text to it,
|
|
the text when added with a shape has an offset defined by pixels on the screen,
|
|
rather than by graph units, this means better scaling when zooming in.
|
|
to get text drawn on the other side of the object, draw the ojects the other way around.
|
|
0_3_12 - added accumulate funciton, this creates an acumulate count from y.
|
|
- speed improvements by reducing the number of calls to mjs_plot(). this should help working with (large > 100k) data.
|
|
|
|
|
|
|
|
*********************************************** */
|
|
|
|
mjs_plot = (function () {
|
|
|
|
var MJS_PLOT_VERSION = '0_3_12';
|
|
var MJS_PLOT_AUTOR = 'MJS';
|
|
var MJS_PLOT_DATE = '2016';
|
|
var MJS_PLOT_WEBSITE = 'http://generalsarsby.github.io/mjs_plot/';
|
|
|
|
var MJS_PLOT_LINK_LOADER = "http://generalsarsby.github.io/mjs_plot/load.html#";
|
|
|
|
var DEBUGG_FORCE_TOUCH = false;
|
|
var DEBUGG_FPS = false;
|
|
|
|
var svgNS = "http://www.w3.org/2000/svg";
|
|
|
|
var vals = [1,2,5]; // only go up in steps of 1s 2s or 5s.
|
|
var few_minor_ticks = [2,2,5];
|
|
var many_minor_ticks = [5,4,5];
|
|
|
|
//initial color table. hand picked for up to 7 colours.
|
|
//after 7 they are generated automatically.
|
|
var color_table = [['#aa3939'],
|
|
['#aa3939','#383276'],
|
|
['#aa3939','#236467','#7b9f35'],
|
|
['#aa3939','#aa6d39','#236467','#2d882d'],
|
|
['#aa3939','#aa6d39','#236467','#2d882d','#304473'],
|
|
['#aa3939','#aa6d39','#236467','#2d882d','#304473','#ac873c']];
|
|
|
|
function hslToRgb(h, s, l){
|
|
var r, g, b;
|
|
if(s == 0){
|
|
r = g = b = l; // achromatic
|
|
} else {
|
|
function hue2rgb(p, q, t){
|
|
if(t < 0) t += 1;
|
|
if(t > 1) t -= 1;
|
|
if(t < 1/6) return p + (q - p) * 6 * t;
|
|
if(t < 1/2) return q;
|
|
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
|
return p;
|
|
}
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
var p = 2 * l - q;
|
|
r = hue2rgb(p, q, h + 1/3);
|
|
g = hue2rgb(p, q, h);
|
|
b = hue2rgb(p, q, h - 1/3);
|
|
}
|
|
return 'rgb(' + Math.round(r * 255) +','+ Math.round(g * 255) +','+ Math.round(b * 255) + ')';
|
|
}
|
|
|
|
function get_color(i,j){
|
|
//j is number of colors
|
|
//i is current color(0 starting). i.e get color 1 of 7
|
|
//i 0-->(j-1)
|
|
if (j<color_table.length){
|
|
return color_table[j][i];
|
|
}
|
|
var sat = 1 - Math.exp(-1.1*j);
|
|
var lightness = 0.5 + (1-Math.exp(-1.1*j))*Math.cos(i*Math.PI)*0.15;
|
|
return hslToRgb( i/(j+1) , sat, lightness);
|
|
}
|
|
|
|
function parseExpression(text,ax,ay){
|
|
//move some functions around from the math namespace to local so
|
|
//they can be used inside eval.
|
|
//ax and ay are arrays
|
|
var sin = Math.sin;
|
|
var cos = Math.cos;
|
|
var tan = Math.tan;
|
|
var ln = Math.log;
|
|
var pi = Math.PI;
|
|
var e = Math.E;
|
|
var pow = Math.pow;
|
|
var sqrt = Math.sqrt;
|
|
var log = function(x){
|
|
return Math.log(x)/Math.log(10);
|
|
}
|
|
var now = (new Date()).getTime();
|
|
var returny = [];
|
|
for (var i = 0;i<ax.length;i++){
|
|
var x = ax[i];
|
|
var y = ay[i];
|
|
returny.push(eval(text));
|
|
}
|
|
return returny;
|
|
|
|
}
|
|
|
|
function color_from_string(s){
|
|
var hash =321;
|
|
for (var i = 0; i < s.length*50; i++) {
|
|
hash = s.charCodeAt(i%s.length) + ((hash << 5) - hash);
|
|
}
|
|
hash = hash & hash; //convert to 32bit int (signed)
|
|
hue = Math.abs((hash%256)/256);
|
|
sat = 0.9;
|
|
lightness = 0.3 + 0.2*(Math.abs(hash)%3);
|
|
return hslToRgb(hue,sat,lightness);
|
|
}
|
|
|
|
function clone(existingArray) {
|
|
var newObj = (existingArray instanceof Array) ? [] : {};
|
|
for (i in existingArray) {
|
|
if (i == 'clone') continue;
|
|
if (existingArray[i] && typeof existingArray[i] == "object") {
|
|
newObj[i] = clone(existingArray[i]);
|
|
} else {
|
|
newObj[i] = existingArray[i]
|
|
}
|
|
}
|
|
return newObj;
|
|
}
|
|
|
|
function hasLocalStorage(){
|
|
try {
|
|
localStorage.setItem("MJSplot","Stored");
|
|
localStorage.removeItem("MJSplot");
|
|
return true;
|
|
} catch(e) {
|
|
return false;
|
|
}
|
|
}
|
|
function isMobile(){
|
|
var platforms = {
|
|
Android: function() {
|
|
return /Android/i.test(navigator.userAgent);
|
|
},
|
|
BlackBerry: function() {
|
|
return /BlackBerry/i.test(navigator.userAgent);
|
|
},
|
|
iOS: function() {
|
|
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
},
|
|
Windows: function() {
|
|
return /IEMobile/i.test(navigator.userAgent);
|
|
},
|
|
any: function() {
|
|
return (platforms.Android() || platforms.BlackBerry() || platforms.iOS() || platforms.Windows());
|
|
}
|
|
};
|
|
return platforms.any();
|
|
};
|
|
function is_touch_device() {
|
|
|
|
var can_touch = (('ontouchstart' in window)
|
|
|| (navigator.MaxTouchPoints > 0)
|
|
|| (navigator.msMaxTouchPoints > 0));
|
|
return ((can_touch && isMobile()) || DEBUGG_FORCE_TOUCH );
|
|
}
|
|
var mouse_down = false;
|
|
var start_x = 0;
|
|
var end_x = 0;
|
|
var full_screen_graph;
|
|
//fix f****ng google chrome and ie.
|
|
try {
|
|
//might not even have log10.
|
|
Math.log10(100);
|
|
}
|
|
catch(e) {
|
|
//have to add it!
|
|
Math.log10 = function(x){
|
|
return Math.log(x) / Math.LN10;
|
|
};
|
|
}
|
|
|
|
var log_vals = [[1],
|
|
[1,3],
|
|
[1,2,4],
|
|
[1,2,3,6],
|
|
[1,2,3,4,6],
|
|
[1,2,3,4,6,8],
|
|
[1,1.5,2,3,4,6,8],
|
|
[1,1.5,2,2.5,3,4,6,8],
|
|
[1,1.5,2,2.5,3,4,6,7,8],
|
|
[1,1.2,1.5,2,2.5,3,4,5,6,7,9],
|
|
[1,1.2,1.5,2,2.5,3,4,5,6,7,8,9],
|
|
[1,1.2,1.4,1.6,1.8,2,2.5,3,4,5,6,7,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.6,1.8,2,2.2,2.4,2.6,2.8,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5],
|
|
[1,1.1,1.2,1.3,1.4,1.6,1.8,2,2.2,2.4,2.6,2.8,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5],
|
|
[1,1.05,1.1,1.15,1.2,1.25,1.3,1.4,1.6,1.8,2,2.2,2.4,2.6,2.8,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5],
|
|
[1,1.05,1.1,1.15,1.2,1.25,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.2,2.4,2.6,2.8,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5],
|
|
[1,1.05,1.1,1.15,1.2,1.25,1.3,1.35,1.4,1.45,1.5,1.55,1.6,1.65,1.7,1.75,1.8,1.85,1.9,1.95,2,2.1,2.2,2.3,2.4,2.5,2.6,2.7,2.8,2.9,3,3.2,3.4,3.6,3.8,4,4.2,4.4,4.6,4.8,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5],
|
|
];
|
|
|
|
var log_vals_ticks = [[1,3],
|
|
[1,2,3,4,5,6,7,8,9],
|
|
[1,2,3,4,5,6,7,8,9],
|
|
[1,2,3,4,5,6,7,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,3,4,5,6,7,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.5,3,4,5,6,7,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.25,2.75,3,3.5,4,4.5,5,5.5,6,6.5,7,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.25,2.75,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.2,2.4,2.6,2.8,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,9],
|
|
[1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.2,2.4,2.6,2.8,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,9]
|
|
]; //minor tick mode changes after this many.
|
|
|
|
|
|
//There is no ruleset to generate the allowed time intervals. so I've just written them out. all in milliseconds.
|
|
// all the miliseeconds up to the seconds - a base 60 system minuilts - a base 60 system hours - a base 12/24system days
|
|
// 500 ms 1s 2s 5s 10s 20s 30s 1m 2m 5m 10m 15m 20m 30m 1h 2h 3h 6h 12h 1d 2d 5d 7d 14d 30d 60d 180d 1y 2y 5y 10y 20y 50y 100y 200y 500y 1000y
|
|
var allowed_intervals = [1,2,5,10,20,50,100,200,500,1000,2000,5000,10000,20000,30000,60000,120000,300000,600000,900000,1200000,1800000,3600000,7200000,10800000,21600000,43200000,86400000,172800000,432000000,604800000,1209600000,2592000000,5184000000,15552000000,31536000000,63072000000,157680000000,315360000000,630720000000,1576800000000,3153600000000,6307200000000,15768000000000,31536000000000 ];
|
|
var time_ticks=[0.2,0.5,1,2 ,5 ,10,20 ,50 ,100,200 ,500 ,1000,2000 ,5000 ,10000,20000,30000 ,60000 ,120000,300000,300000 ,600000 ,1200000,1800000,3600000 ,7200000 ,10800000,21600000,43200000 ,86400000 , 86400000 ,172800000 ,864000000 ,1728000000,2592000000 ,7884000000 ,31536000000,31536000000 ,63072000000 ,157680000000,315360000000 ,630720000000 ,1576800000000,3153600000000,6307200000000 ];
|
|
// 2d 10d 20d 30d 1/4y 1/y
|
|
var string_precisions = [8,8,8,7, 7 ,7 ,6 ,6 ,6 ,5 ,5 ,5 ,5 ,5 ,5 ,4 ,4 ,4 ,4 ,4 ,4 ,4 ,3 ,3 ,3 ,3 ,3 ,2 ,2 ,2 ,2 ,2 ,1 ,1 , 0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 , 0];
|
|
|
|
//181 is the character code for the micro - mu symbol.
|
|
si_prefixes = ['y','z','a','f','p','n',String.fromCharCode( 181 ),'m','.','k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
|
|
function eng_form_infix(number,precision){
|
|
|
|
if (!isFinite(precision)){precision = 5;}
|
|
if (precision<1){precision =1;}
|
|
if (precision>21){precision =21;}
|
|
|
|
if (Math.abs(number) < 1e-24 || Math.abs(number) >= 1e27){
|
|
return mjs_precision(number,precision);
|
|
}
|
|
//return an infix engeneering form number with at least precision significant figures.
|
|
var neg_sign = '';
|
|
if (number<0){neg_sign = '-';}
|
|
number = Math.abs(number);
|
|
var degree = Math.floor(Math.log10(number) / 3);
|
|
var scaled = number * Math.pow(1000, -degree);
|
|
var first_parts = ( scaled.toFixed(Math.max((precision-3),0)) +'.').split('.');
|
|
var last_parts = ( scaled.toFixed(Math.max(0,precision - first_parts[0].length)) +'.').split('.');
|
|
var infix_form = last_parts[0] + si_prefixes[degree+8] + last_parts[1];
|
|
if (last_parts[1].length==0 && degree ==0){
|
|
infix_form = last_parts[0]
|
|
}
|
|
return neg_sign+infix_form;
|
|
}
|
|
|
|
function eng_form_postfix(number,precision){
|
|
//return an postfix engeneering form number with at least precision significant figures.
|
|
if (!isFinite(precision)){precision = 5;}
|
|
if (precision<1){precision =1;}
|
|
if (precision>21){precision =21;}
|
|
|
|
if (Math.abs(number) < 1e-24 || Math.abs(number) >= 1e27){
|
|
return mjs_precision(number,precision);
|
|
}
|
|
var neg_sign = '';
|
|
if (number<0){neg_sign = '-';}
|
|
number = Math.abs(number);
|
|
var degree = Math.floor(Math.log10(number) / 3);
|
|
var scaled = number * Math.pow(1000, -degree);
|
|
var first_parts = ( scaled.toFixed(Math.max((precision-3),0)) +'.').split('.');
|
|
var last_parts = ( scaled.toFixed(Math.max(0,precision - first_parts[0].length)) +'.').split('.');
|
|
var postfix_form = last_parts[0]+'.'+last_parts[1] + si_prefixes[degree+8];
|
|
if (last_parts[1].length!=0 && degree ==0){
|
|
postfix_form = last_parts[0]+'.'+last_parts[1];
|
|
}
|
|
if (last_parts[1].length==0 && degree !=0){
|
|
postfix_form = last_parts[0] + si_prefixes[degree+8];
|
|
}
|
|
if (last_parts[1].length==0 && degree ==0){
|
|
postfix_form = last_parts[0];
|
|
}
|
|
return neg_sign+postfix_form;
|
|
}
|
|
var superscriptCharacters = [8304,185,178,179,8308,8309,8310,8311,8312,8313]; //zero to 9 in unicode superscripts.
|
|
var superscriptMinus = String.fromCharCode(8315);
|
|
var superscriptPlus = String.fromCharCode(8314);
|
|
var unicodeTimes = String.fromCharCode(215);
|
|
function toSuperscript(n){
|
|
var s
|
|
if (n<0){s = superscriptMinus; n*=-1;}
|
|
else{s=''}
|
|
n=parseInt(n).toString();
|
|
for (var i=0;i<n.length;i++){
|
|
s+=String.fromCharCode( superscriptCharacters[parseInt(n[i])] )
|
|
}
|
|
return s;
|
|
}
|
|
|
|
function maths_form(number,precision){
|
|
var s = number.toExponential(trim(precision-1,0,20));
|
|
var parts = s.split('e');
|
|
if (parts[0] === '1'){
|
|
return '10' + toSuperscript(parts[1]);
|
|
} else {
|
|
return parts[0] + unicodeTimes+'10' + toSuperscript(parts[1])
|
|
}
|
|
}
|
|
|
|
function download_text(text,filename,type){
|
|
var ftype = type || 'data:text/plain;charset=utf-8';
|
|
var pom = document.createElement('a');
|
|
//data:image/svg+xml;charset=utf-8
|
|
pom.setAttribute('href', ftype+',' + encodeURIComponent(text));
|
|
//pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
|
//pom.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text));
|
|
pom.setAttribute('download', filename);
|
|
pom.style.display = 'none';
|
|
document.body.appendChild(pom);
|
|
console.log('downloading '+filename);
|
|
pom.click();
|
|
document.body.removeChild(pom);
|
|
}
|
|
|
|
function new_window_with_text(text,title,width,height){
|
|
var url = 'data:text/plain;charset=utf-8;base64,' + btoa(text);
|
|
window.open(url, title, "width="+width+", height="+height);
|
|
}
|
|
|
|
function save_gs(name, gs){
|
|
//bake_cookie(name, gs);
|
|
if (hasLocalStorage()){
|
|
var string = JSON.stringify(gs);
|
|
localStorage.setItem(name, string);
|
|
} else {
|
|
console.log("No local storage!");
|
|
}
|
|
}
|
|
|
|
function load_gs(graphname){
|
|
var gs = mjs_plot.get_graph_style();
|
|
if (hasLocalStorage()){
|
|
var result = localStorage.getItem(graphname);
|
|
result && (result = JSON.parse(result));
|
|
result && (gs = result);
|
|
} else {
|
|
console.log("No local storage!");
|
|
}
|
|
return gs;
|
|
}
|
|
|
|
function linear_regression(x,y){
|
|
var sum_x = 0;
|
|
var sum_y = 0;
|
|
var sum_xx = 0;
|
|
var sum_xy = 0;
|
|
for (var i = 0;i<x.length;i++){
|
|
sum_x += x[i];
|
|
sum_xx += x[i]*x[i];
|
|
sum_y += y[i];
|
|
sum_xy +=x[i]*y[i];
|
|
}
|
|
var n = x.length;
|
|
sum_xy -= sum_x*sum_y/n;
|
|
sum_xx -= sum_x*sum_x/n;
|
|
var b = sum_xy / sum_xx;
|
|
var a = sum_y/n - b * sum_x/n;
|
|
return slope = {a : a,b : b}
|
|
}
|
|
|
|
function series_stats(x,y){
|
|
var sum_x = 0;
|
|
var sum_y = 0;
|
|
var sum_xx = 0;
|
|
var sum_xy = 0;
|
|
var sum_yy = 0;
|
|
for (var i = 0;i<x.length;i++){
|
|
sum_x += x[i];
|
|
sum_xx += x[i]*x[i];
|
|
sum_y += y[i];
|
|
sum_xy +=x[i]*y[i];
|
|
sum_yy +=y[i]*y[i];
|
|
}
|
|
var n = x.length;
|
|
sum_xy -= sum_x*sum_y/n;
|
|
sum_xx -= sum_x*sum_x/n;
|
|
sum_yy -= sum_y*sum_y/n;
|
|
|
|
//the r^2 value
|
|
var r_2 = sum_xy * sum_xy / sum_xx / sum_yy;
|
|
|
|
var x_mean = sum_x/n;
|
|
var y_mean = sum_y/n;
|
|
var sigma_x = Math.sqrt(sum_xx / n);
|
|
var sigma_y = Math.sqrt(sum_yy / n);
|
|
//covarience(x,y)
|
|
var cov = sum_xy / n;
|
|
//slope of linear regression
|
|
var b = sum_xy / sum_xx;
|
|
//intercept of linear regression
|
|
var a = sum_y/n - b * sum_x/n;
|
|
// s is varience in regression error
|
|
var s = Math.sqrt( (sum_yy - sum_xy*sum_xy/sum_xx)/(n-2) );
|
|
// standard error on b
|
|
var s_b = s / Math.sqrt(sum_xx);
|
|
//standard error in a
|
|
var s_a = s * Math.sqrt( 1/n + x_mean * x_mean/sum_xx );
|
|
var ymin = Math.min.apply(null, y );
|
|
var ymax = Math.max.apply(null, y );
|
|
var xmin = Math.min.apply(null, x );
|
|
var xmax = Math.max.apply(null, x );
|
|
|
|
return stats = {x_mean : x_mean,
|
|
y_mean : y_mean,
|
|
sigma_x: sigma_x,
|
|
sigma_y:sigma_y,
|
|
cov : cov,
|
|
b : b,
|
|
a : a,
|
|
s_b : s_b,
|
|
s_a : s_a,
|
|
n : n,
|
|
r_2 : r_2,
|
|
ymin : ymin,
|
|
ymax : ymax,
|
|
xmin : xmin,
|
|
xmax : xmax};
|
|
}
|
|
|
|
|
|
function padLeft(nr, n, str){
|
|
return Array(n-String(nr).length+1).join(str||'0')+nr;
|
|
}
|
|
|
|
function trim(n,l,h){
|
|
//trimps a number to the range l<-->h
|
|
n = Math.max(n,l);
|
|
n = Math.min(n,h);
|
|
return n;
|
|
}
|
|
function getFloat(promptString,fallback){
|
|
var r = parseFloat(prompt(promptString,fallback));
|
|
if (isFinite(r)){
|
|
return r;
|
|
} else {
|
|
return fallback;
|
|
}
|
|
}
|
|
function getInt(promptString,fallback){
|
|
var r = parseInt(prompt(promptString,fallback));
|
|
if (isFinite(r)){
|
|
return r;
|
|
} else {
|
|
return fallback;
|
|
}
|
|
}
|
|
function getString(promptString,fallback){
|
|
var r = prompt(promptString,fallback);
|
|
if (typeof r ==='string'){
|
|
return r;
|
|
} else {
|
|
return fallback;
|
|
}
|
|
}
|
|
|
|
function getDrawFunctionRotateable(s){
|
|
var t = s.split(' '); //split on spaces
|
|
var commands = [],d = [];
|
|
for (var i =0;i<t.length;i++){
|
|
if (isNaN(t[i])){ commands.push(t[i]); }
|
|
else { d.push(parseFloat(t[i])); }
|
|
}
|
|
str = 'd=['+d.join(',')+'];n=0;';
|
|
for (var i =0;i<commands.length;i++){
|
|
switch (commands[i]){
|
|
case "b":
|
|
str+="ctx.beginPath();";break;
|
|
case "l":
|
|
str+="ctx.lineTo(x + s*(Math.cos(r)*d[n] - Math.sin(r)*d[n+1] ),y + s*(Math.sin(r)*d[n] + Math.cos(r)*d[n+1]));n+=2;";break;
|
|
case "m":
|
|
str+="ctx.moveTo(x + s*(Math.cos(r)*d[n] - Math.sin(r)*d[n+1] ),y + s*(Math.sin(r)*d[n] + Math.cos(r)*d[n+1]));n+=2;";break;
|
|
case "c":
|
|
str+="ctx.closePath();";break;
|
|
case "f":
|
|
str+="ctx.fill();";break;
|
|
case "s":
|
|
str+="ctx.stroke();";break;
|
|
case "q":
|
|
str+="ctx.quadraticCurveTo(x + s*(Math.cos(r)*d[n] - Math.sin(r)*d[n+1] ),y + s*(Math.sin(r)*d[n] + Math.cos(r)*d[n+1]),x + s*(Math.cos(r)*d[n+2] - Math.sin(r)*d[n+3] ),y + s*(Math.sin(r)*d[n+2] + Math.cos(r)*d[n+3]));n+=4;";break;
|
|
case "a": // x y r start stop ( in frac of tau)
|
|
str+="ctx.arc(x + s*(Math.cos(r)*d[n] - Math.sin(r)*d[n+1] ),y + s*(Math.sin(r)*d[n] + Math.cos(r)*d[n+1]),s*d[n+2],r + d[n+3]*6.283185307179586,r + d[n+4]*6.283185307179586,false);n+=5;";break;
|
|
}
|
|
}
|
|
//make this into a compialable function so it runs at full speed.
|
|
return new Function('ctx','x','y','s','r',str);
|
|
}
|
|
|
|
//all the shapes make using the get draw function
|
|
//call any of these using (context, x, y, scale, rotation)
|
|
var arrow = 'b m 1 0 l -5 -2 l -4 0 l -5 2 l 1 0 c f';
|
|
drawArrow= getDrawFunctionRotateable(arrow);
|
|
|
|
function sumArray(a){
|
|
var buf = 0;
|
|
for (var i=0,l=a.length;i<l;i++){
|
|
buf += a[i];
|
|
}
|
|
return buf;
|
|
}
|
|
|
|
function mjs_time_difference_print(milliseconds){
|
|
//for printing the elapsed time. not absolute time.
|
|
var d = milliseconds/1000
|
|
milliseconds = milliseconds%1000;
|
|
var seconds = Math.floor(d%(60));
|
|
var min = Math.floor(d/60%(60));
|
|
var hours = Math.floor(d/60/60%(24));
|
|
var days = Math.floor(d/60/60/24);
|
|
var s = '';
|
|
if (seconds>0){s= seconds+'seconds ' +milliseconds.toFixed(0) +'ms' }
|
|
if (min>0){s= min+'min ' + seconds+'seconds'}
|
|
if (hours>0){s= hours+'hours '+ min+'min ' + seconds+'seconds' ;}
|
|
if (days>0){s = days+'days ' + hours+'hours ' + min+'min'; }
|
|
return s;
|
|
}
|
|
|
|
function mjs_date_print(milliseconds,hp,lp){
|
|
//milliseconds is the date
|
|
//hp and lp in the range 0-8 inclusive
|
|
// yyyy-mm-dd HH:MM:ss.###
|
|
// 0 1 2 3 4 5 678
|
|
//eg hp -> lp
|
|
// mm-dd HH:mm
|
|
//
|
|
hp = isFinite(hp) ? hp : 0;
|
|
lp = isFinite(lp) ? lp : 8;
|
|
|
|
//there is usully enough space for two even if it's not asked for.
|
|
//if (hp == lp){hp--;}
|
|
hp = trim(hp,0,8);
|
|
//if (hp == lp){lp--;}
|
|
lp = trim(lp,0,8);
|
|
hp = Math.min(hp,lp);
|
|
|
|
var d = new Date(milliseconds);
|
|
var s = '';
|
|
|
|
//if the day is first hp==2 put the day mon tue wed...
|
|
var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
|
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
|
if (hp == 2 && lp == 3){
|
|
s+=days[d.getDay()];
|
|
s+= ' ' + padLeft(d.getHours(), 2, '0')+'h';
|
|
return s;
|
|
}
|
|
//if (hp == 2){s+=months[d.getMonth()];}
|
|
|
|
if ( hp == 2 && lp == 2 ){
|
|
s+=(d.getMonth()+1)+'-'//months[d.getMonth()]
|
|
}
|
|
|
|
if (hp == 1 && lp>1){s+=months[d.getMonth()]+'-';hp++;}
|
|
|
|
if (hp == 3 && (lp == 4 || lp == 3)){
|
|
s+=padLeft(d.getHours(),2,'0');
|
|
s+=':'+padLeft(d.getMinutes(),2,'0');
|
|
return s;
|
|
}
|
|
|
|
if (hp == 4 && lp == 4){
|
|
s+=padLeft(d.getHours(),2,'0');
|
|
s+=':'+padLeft(d.getMinutes(),2,'0');
|
|
return s;
|
|
}
|
|
|
|
if (hp == 4 && lp == 5){
|
|
s+=padLeft(d.getMinutes(),2,'0');
|
|
s+='m'+padLeft(d.getSeconds(),2,'0') +'s';
|
|
return s;
|
|
}
|
|
if (hp == 1 && lp == 1){
|
|
s=months[d.getMonth()];
|
|
return s;
|
|
}
|
|
|
|
if (hp <= 0){s+=d.getFullYear();}
|
|
if (hp <= 0 && lp >= 1){s+='-';}
|
|
if (hp <= 1 && lp >= 1){s+=(d.getMonth()+1);}
|
|
if (hp <= 1 && lp >= 2){s+='-';}
|
|
if (hp <= 2 && lp >= 2){s+=(d.getDate());}
|
|
if (hp <= 2 && lp >= 3){s+=' ';}
|
|
if (hp <= 3 && lp >= 3){s+=padLeft(d.getHours(),2,'0');}
|
|
if (hp <= 3 && lp >= 4){s+=':';}
|
|
if (hp <= 4 && lp >= 4){s+=padLeft(d.getMinutes(),2,'0');}
|
|
if (hp <= 4 && lp >= 5){s+=':';}
|
|
if (hp <= 5 && lp >= 5){s+=padLeft(d.getSeconds(),2,'0');}
|
|
if (hp <= 5 && lp >= 6){s+='.';}
|
|
if (hp <= 6 && lp >= 6){s+=padLeft(d.getMilliseconds(),3,'0')[0];}
|
|
if (hp <= 7 && lp >= 7){s+=padLeft(d.getMilliseconds(),3,'0')[1];}
|
|
if (hp <= 8 && lp >= 8){s+=padLeft(d.getMilliseconds(),3,'0')[2];}
|
|
|
|
//touches to make things easyer to read
|
|
//hours are last without seconds
|
|
if (lp == 3 && hp <=3){s+='h';}
|
|
if (lp == 4 && hp == 4){s+='m';}
|
|
if (lp == 5 && (hp ==5 || hp == 4)){s+='s';}
|
|
|
|
return s;
|
|
}
|
|
|
|
function round_to_month(milliseconds){
|
|
//takes a milliseconds date and returns milliseconds rounded to the nearest month
|
|
var d = new Date(milliseconds);
|
|
var down = d.getDate();
|
|
var u = new Date(d.getFullYear(),d.getMonth()+1,0);
|
|
var up = u.getDate() - down;
|
|
if (down < up){
|
|
return milliseconds - (down-1)* 24*60*60*1000;
|
|
} else {
|
|
return milliseconds + (up+1)* 24*60*60*1000;
|
|
}
|
|
}
|
|
|
|
function round_to_year(milliseconds){
|
|
var d = new Date(milliseconds);
|
|
var down = new Date(d.getFullYear(),0,1);
|
|
var up = new Date(d.getFullYear()+1,0,1);
|
|
if (d.getTime()-down.getTime() < up.getTime() - d.getTime() ){
|
|
return down.getTime();
|
|
} else {
|
|
return up.getTime();
|
|
}
|
|
}
|
|
|
|
|
|
var fits = {
|
|
//each fit has some_fit and some_fun
|
|
//some_fun takes an array of x and the params for the fit returning an array of y
|
|
//some_fit takes an array of x and and array of y
|
|
//returning parameters - arbitary length array of numbers from the result of the fit
|
|
//returning strings - an array length 3 of string to describe to the user the results (ofern printed)
|
|
//returning fun - a function that will realise this fit.
|
|
exponential_fun : function(x,params){
|
|
var y = [];
|
|
for (var i=0;i<x.length;i++){
|
|
y.push(params[0] * Math.pow(Math.E, params[1] * x[i]));
|
|
}
|
|
return y;
|
|
},
|
|
exponential : function(ox,oy){
|
|
//y = Ae^Bx
|
|
var x = [];
|
|
var y = [];
|
|
for (var i=0; i<ox.length;i++){
|
|
if ( oy[i] >0){
|
|
x.push(ox[i]);
|
|
y.push(oy[i]);
|
|
}
|
|
}
|
|
var sum = [0, 0, 0, 0, 0, 0];
|
|
var results = [];
|
|
for (var n=0; n < x.length; n++) {
|
|
sum[0] += x[n];
|
|
sum[1] += y[n];
|
|
sum[2] += x[n] * x[n] * y[n];
|
|
sum[3] += y[n] * Math.log(y[n]);
|
|
sum[4] += x[n] * y[n] * Math.log(y[n]);
|
|
sum[5] += x[n] * y[n];
|
|
}
|
|
var denominator = (sum[1] * sum[2] - sum[5] * sum[5]);
|
|
var A = Math.pow(Math.E, (sum[2] * sum[3] - sum[5] * sum[4]) / denominator);
|
|
var B = (sum[1] * sum[4] - sum[5] * sum[3]) / denominator;
|
|
var string = 'y = ' +mjs_precision(A,5) + 'e^(' + mjs_precision(B,5) + 'x)';
|
|
|
|
return { parameters:[A,B], strings : [string,'',''], fun : fits.exponential_fun}
|
|
},
|
|
exponential_plus_c_fun : function(x,params){
|
|
var y = [];
|
|
for (var i=0;i<x.length;i++){
|
|
y.push( params[0] + params[1]*Math.exp(params[2]*x[i]) );
|
|
}
|
|
return y;
|
|
},
|
|
exponential_plus_c : function(x,y){
|
|
//a + b exp(c*x);
|
|
var len = x.length;
|
|
var S_xx=0,S_xs=0,S_ss=0,S_yx=0,S_ys=0,s=[];
|
|
s[0] = 0
|
|
for (var i=1; i < len; i++) {
|
|
s[i] = s[i-1]+0.5*(y[i]+y[i-1])*(x[i]-x[i-1]);
|
|
}
|
|
for (var i=0; i < len; i++) {
|
|
S_xx += (x[i]-x[0])*(x[i]-x[0]);
|
|
S_xs += (x[i]-x[0])*s[i];
|
|
S_ss += s[i]*s[i];
|
|
S_yx += (y[i]-y[0])*(x[i]-x[0]);
|
|
S_ys += (y[i]-y[0])*s[i];
|
|
}
|
|
var f = 1.0/(S_xx*S_ss-S_xs*S_xs);
|
|
var A_1 = f * (S_ss*S_yx - S_xs*S_ys);
|
|
var B_1 = f * (S_xx*S_ys - S_xs*S_yx);//B_1 = C_1 =C_2
|
|
a = -1*A_1/B_1;
|
|
var S_t=0,S_tt=0,S_y=0,S_yt=0,t=0;
|
|
for (var i=0; i < len; i++) {
|
|
t = Math.exp(B_1*x[i]);
|
|
S_t += t;
|
|
S_tt += t*t;
|
|
S_y += y[i];
|
|
S_yt += y[i]*t;
|
|
}
|
|
f = 1/(S_tt*len - S_t*S_t);
|
|
var a_2 = f*(S_tt*S_y-S_t*S_yt);
|
|
var b_2 = f*(len*S_yt-S_t*S_y);
|
|
a=a_2;
|
|
var string = 'y = ' + mjs_precision(a,5) + '+'+mjs_precision(b_2,5)+'e^(' + mjs_precision(B_1,5)+ 'x)';
|
|
return {parameters: [a, b_2,B_1], strings: [string,'',''],fun:fits.exponential_plus_c_fun};
|
|
},
|
|
gauss_fun : function(x,params){
|
|
var y = [];
|
|
var mu = params[0];
|
|
var sig = params[1];
|
|
var root_two_pi = Math.sqrt(Math.PI * 2);
|
|
for (var i=0;i<x.length;i++){
|
|
y.push( params[2]/root_two_pi/sig * Math.exp(-0.5* Math.pow((x[i]-mu)/sig,2)) );//*sig * 1.0/(sig * root_two_pi)
|
|
}
|
|
return y;
|
|
},
|
|
gauss : function(x,y){
|
|
//taken from Cad de la fonction densite de probabilite de Gauss
|
|
// Regression et Equation Intergrale
|
|
// application a la distrobution Gaussienne
|
|
var len = x.length;
|
|
var s=[];
|
|
s[0] = 0;
|
|
var area = 0;
|
|
|
|
for (var i=1; i < len; i++) {
|
|
s[i] = s[i-1]+0.5*(y[i]+y[i-1])*(x[i]-x[i-1]);
|
|
|
|
}
|
|
area =Math.abs(s[i-1]);
|
|
var t = [];
|
|
t[0] = 0;
|
|
for (var i=1; i < len; i++) {
|
|
t[i] = t[i-1]+0.5*(x[i]*y[i]+x[i-1]*y[i-1])*(x[i]-x[i-1]);
|
|
}
|
|
var S_ss=0,S_st=0,S_tt=0,S_ys=0,S_yt=0;
|
|
for (var i=0; i < len; i++) {
|
|
S_ss +=s[i]*s[i];
|
|
S_st +=s[i]*t[i];
|
|
S_tt +=t[i]*t[i];
|
|
S_ys +=(y[i]-y[0])*s[i];
|
|
S_yt +=(y[i]-y[0])*t[i];
|
|
}
|
|
var f = 1/(S_ss*S_tt - S_st*S_st);
|
|
var A = f * ( S_tt*S_ys - S_st*S_yt );
|
|
var B = f * ( S_ss*S_yt - S_st*S_ys );
|
|
//book says:
|
|
var sig = -1.0/B* Math.sqrt(2.0/Math.PI);
|
|
// I found:
|
|
var sig = Math.sqrt(-1.0/B);
|
|
var mu = -A/B;
|
|
var string1 = 'A/(sig * sqrt(2pi)) exp(-0.5*((x-mu)/sig)^2)';
|
|
var string2 = 'sig = ' + mjs_precision(sig,5) + ", A = " + + mjs_precision(area,5);
|
|
var string3 = 'mu = ' + mjs_precision(mu,5);
|
|
|
|
return {parameters: [mu,sig,area], strings: [string1,string2,string3],fun:fits.gauss_fun};
|
|
},
|
|
|
|
linear_fun : function(x,params){
|
|
var y = [];
|
|
for (var i=0;i<x.length;i++){
|
|
y.push( x[i]*params[0]+params[1] );
|
|
}
|
|
return y;
|
|
},
|
|
linear : function(x,y){
|
|
var sum_x = 0;
|
|
var sum_y = 0;
|
|
var sum_xx = 0;
|
|
var sum_xy = 0;
|
|
var sum_yy = 0;
|
|
for (var i = 0;i<x.length;i++){
|
|
sum_x += x[i];
|
|
sum_xx += x[i]*x[i];
|
|
sum_y += y[i];
|
|
sum_xy +=x[i]*y[i];
|
|
sum_yy +=y[i]*y[i];
|
|
}
|
|
var n = x.length;
|
|
sum_xy -= sum_x*sum_y/n;
|
|
sum_xx -= sum_x*sum_x/n;
|
|
sum_yy -= sum_y*sum_y/n;
|
|
var x_mean = sum_x/n;
|
|
var y_mean = sum_y/n;
|
|
//the r^2 value
|
|
var r_2 = sum_xy * sum_xy / sum_xx / sum_yy;
|
|
//slope of linear regression
|
|
var b = sum_xy / sum_xx;
|
|
//intercept of linear regression
|
|
var a = sum_y/n - b * sum_x/n;
|
|
// s is varience in regression error
|
|
var s = Math.sqrt( (sum_yy - sum_xy*sum_xy/sum_xx)/(n-2) );
|
|
// standard error on b
|
|
var s_b = s / Math.sqrt(sum_xx);
|
|
var s_a = s * Math.sqrt( 1/n + x_mean * x_mean/sum_xx );
|
|
var squared = String.fromCharCode( 178 ); //σ²
|
|
string1 = 'r'+squared+' = ' + number_quote(r_2,1-r_2);
|
|
string2 = 'intecept a = ' + number_quote(a,s_a) +String.fromCharCode( 177 ) +mjs_precision(s_a,2);
|
|
string3 = 'slope b = ' + number_quote(b,s_b) + String.fromCharCode( 177 )+mjs_precision(s_b,2);
|
|
return {parameters: [b,a], strings: [string1,string2,string3],fun:fits.linear_fun};
|
|
},
|
|
constant_fun : function(x,params){
|
|
var y = [];
|
|
for (var i=0;i<x.length;i++){
|
|
y.push( params[0] );
|
|
}
|
|
return y;
|
|
},
|
|
constant : function(x,y){
|
|
var sum_y = 0;
|
|
var sum_yy = 0;
|
|
for (var i = 0;i<x.length;i++){
|
|
sum_y += y[i];
|
|
sum_yy +=y[i]*y[i];
|
|
}
|
|
var n = x.length;
|
|
sum_yy -= sum_y*sum_y/n;
|
|
var y_mean = sum_y/n;
|
|
var sigma_y = Math.sqrt(sum_yy / n);
|
|
string1 = 'y='+number_quote(y_mean,sigma_y) + String.fromCharCode( 177 ) + mjs_precision(sigma_y,2);
|
|
return {parameters: [y_mean], strings: [string1,'',''],fun:fits.constant_fun};
|
|
},
|
|
poly2 : function(x,y){
|
|
return fits.polyn_fit(x,y,2);
|
|
},
|
|
poly3 : function(x,y){
|
|
return fits.polyn_fit(x,y,3);
|
|
},
|
|
poly4 : function(x,y){
|
|
return fits.polyn_fit(x,y,4);
|
|
},
|
|
poly5 : function(x,y){
|
|
return fits.polyn_fit(x,y,5);
|
|
},
|
|
poly6 : function(x,y){
|
|
return fits.polyn_fit(x,y,6);
|
|
},
|
|
poly7 : function(x,y){
|
|
return fits.polyn_fit(x,y,7);
|
|
},
|
|
poly8 : function(x,y){
|
|
return fits.polyn_fit(x,y,8);
|
|
},
|
|
//polynomial function break the normal api internally
|
|
//as they forward to the generic poly n method with different order
|
|
polyn_fun : function(x,params){
|
|
var y = [];
|
|
for (var i = 0; i < x.length; i++) {
|
|
y[i] = 0;
|
|
for (var w = 0; w < params.length; w++) {
|
|
y[i] += params[w] * Math.pow(x[i], w);
|
|
}
|
|
}
|
|
return y;
|
|
},
|
|
polyn_fit : function(x,y,o){
|
|
var lhs = [], rhs = [], a = 0, b = 0, i = 0, k = o + 1;
|
|
for (var i = 0; i < k; i++) {
|
|
for (var l = 0, len = x.length; l < len; l++) {
|
|
a += Math.pow(x[l], i) * y[l];
|
|
}
|
|
lhs.push(a);
|
|
a = 0;
|
|
var c = [];
|
|
for (var j = 0; j < k; j++) {
|
|
for (var l = 0, len = x.length; l < len; l++) {
|
|
b += Math.pow(x[l], i + j);
|
|
}
|
|
c.push(b), b = 0;
|
|
}
|
|
rhs.push(c);
|
|
}
|
|
rhs.push(lhs);
|
|
//begin gaussian elemination . . .
|
|
var j = 0, k = 0, maxrow = 0, tmp = 0, n = rhs.length - 1;
|
|
for (i = 0; i < n; i++) {
|
|
maxrow = i;
|
|
for (j = i + 1; j < n; j++) {
|
|
if (Math.abs(rhs[i][j]) > Math.abs(rhs[i][maxrow]))
|
|
maxrow = j;
|
|
}
|
|
for (k = i; k < n + 1; k++) {
|
|
tmp = rhs[k][i];
|
|
rhs[k][i] = rhs[k][maxrow];
|
|
rhs[k][maxrow] = tmp;
|
|
}
|
|
for (j = i + 1; j < n; j++) {
|
|
for (k = n; k >= i; k--) {
|
|
rhs[k][j] -= rhs[k][i] * rhs[i][j] / rhs[i][i];
|
|
}
|
|
}
|
|
}
|
|
var coeffs = [];
|
|
for (j = n - 1; j >= 0; j--) {
|
|
tmp = 0;
|
|
for (k = j + 1; k < n; k++)
|
|
tmp += rhs[k][j] * coeffs[k];
|
|
coeffs[j] = (rhs[n][j] - tmp) / rhs[j][j];
|
|
}
|
|
fit = [];
|
|
for (var i = 0; i < x.length; i++) {
|
|
fit[i] = 0;
|
|
for (var w = 0; w < coeffs.length; w++) {
|
|
fit[i] += coeffs[w] * Math.pow(x[i], w);
|
|
}
|
|
}
|
|
var sum_x = 0;
|
|
var sum_y = 0;
|
|
var sum_xx = 0;
|
|
//var sum_xy = 0;
|
|
var sum_yy = 0;
|
|
var sum_ff = 0;
|
|
for (var i = 0;i<x.length;i++){
|
|
sum_x += x[i];
|
|
sum_xx += x[i]*x[i];
|
|
sum_y += y[i];
|
|
//sum_xy +=x[i]*y[i];
|
|
sum_yy +=y[i]*y[i];
|
|
}
|
|
var y_mean = sum_y/x.length;
|
|
var ss_reg = 0;
|
|
var ss_res = 0;
|
|
for (var i = 0;i<x.length;i++){
|
|
ss_reg += (fit[i] - y_mean)*(fit[i] - y_mean);
|
|
ss_res += (fit[i] - y[i])*(fit[i] - y[i]);
|
|
}
|
|
|
|
var n = x.length;
|
|
var ss_tot = sum_yy - sum_y*sum_y/n;
|
|
var ss_reg = sum_ff;
|
|
var r_squared = 1-ss_res/ss_tot;
|
|
var squared = String.fromCharCode( 178 ); //σ²
|
|
var string2 = '';
|
|
var string3 = '';
|
|
|
|
if (coeffs.length>4){
|
|
for(var i = coeffs.length-1; i >= 4; i--){
|
|
if(i > 1) string2 += mjs_precision(coeffs[i],4)+ 'x^' + i + ' + ';
|
|
else if (i == 1) string2 += mjs_precision(coeffs[i],4) + 'x' + ' + ';
|
|
else string2 += mjs_precision(coeffs[i],4);
|
|
}
|
|
for(; i >= 0; i--){
|
|
if(i > 1) string3 += mjs_precision(coeffs[i],4)+ 'x^' + i + ' + ';
|
|
else if (i == 1) string3 += mjs_precision(coeffs[i],4) + 'x' + ' + ';
|
|
else string3 += mjs_precision(coeffs[i],4);
|
|
}
|
|
} else {
|
|
for(var i = coeffs.length-1; i >= 0; i--){
|
|
if(i > 1) string2 += mjs_precision(coeffs[i],4)+ 'x^' + i + ' + ';
|
|
else if (i == 1) string2 += mjs_precision(coeffs[i],4) + 'x' + ' + ';
|
|
else string2 += mjs_precision(coeffs[i],4);
|
|
}
|
|
}
|
|
|
|
string1 = 'r'+squared+' = ' + number_quote(r_squared,1-r_squared);
|
|
//return coeffs;
|
|
return {parameters: coeffs, strings: [string1,string2,string3],fun:fits.polyn_fun};
|
|
},
|
|
log_fun : function(x,params){
|
|
var y = [];
|
|
for (var i = 0; i < x.length; i++) {
|
|
y.push( params[0] + params[1]*Math.log(x[i] ));
|
|
}
|
|
return y;
|
|
},
|
|
log : function(ox,oy){
|
|
//protect against negative x
|
|
var x = [];
|
|
var y = [];
|
|
for (var i=0; i<ox.length;i++){
|
|
if ( ox[i] > 0 ){
|
|
x.push(ox[i]);
|
|
y.push(oy[i]);
|
|
}
|
|
}
|
|
var S_lx = 0;
|
|
var S_ylx = 0;
|
|
var S_y = 0;
|
|
var S_lxlx=0;
|
|
var l = x.length;
|
|
for (n=0; n < l; n++) {
|
|
S_lx += Math.log(x[n]);
|
|
S_ylx += y[n] * Math.log(x[n]);
|
|
S_y += y[n];
|
|
S_lxlx += Math.pow(Math.log(x[n]), 2);
|
|
}
|
|
|
|
var B = (n * S_ylx - S_y * S_lx) / (n * S_lxlx - S_lx * S_lx);
|
|
var A = (S_y - B * S_lx) / n;
|
|
|
|
var string = 'y=' + mjs_precision(A,4) + ' + ' + mjs_precision(B,4) + ' ln(x)';
|
|
|
|
return {parameters: [A, B], strings: [string,'',''], fun:fits.log_fun};
|
|
},
|
|
power_plus_c_fun : function(x,params){
|
|
var y = [];
|
|
for (var i=0;i<x.length;i++){
|
|
y.push( params[0] + params[1]*Math.pow(x[i],params[2]) );
|
|
}
|
|
return y;
|
|
},
|
|
power_plus_c : function(x,y){
|
|
var nx = [];
|
|
var ny = [];
|
|
for (var i=0; i<x.length;i++){
|
|
xi = Math.log(x[i]);
|
|
if (isFinite(xi)){
|
|
nx.push(xi);
|
|
ny.push(y[i]);
|
|
}
|
|
}
|
|
var r = fits.exponential_plus_c(nx,ny);
|
|
var string = 'y = ' + mjs_precision(r.parameters[0],5) + '+'+mjs_precision(r.parameters[1],5)+'x^' + mjs_precision(r.parameters[2],5);
|
|
r.strings = [string,'',''];
|
|
r.fun = fits.power_plus_c_fun;
|
|
return r
|
|
|
|
},
|
|
power_fun : function(x,params){
|
|
var y = [];
|
|
for (var i = 0; i < x.length; i++) {
|
|
y.push( params[0] *Math.pow(x[i] , params[1] ) );
|
|
}
|
|
return y;
|
|
},
|
|
power : function(ox,oy){
|
|
var x = [];
|
|
var y = [];
|
|
for (var i=0; i<ox.length;i++){
|
|
if ( ox[i] > 0 && oy[i] >0){
|
|
x.push(ox[i]);
|
|
y.push(oy[i]);
|
|
}
|
|
}
|
|
var l = x.length
|
|
var S_lx = 0;
|
|
var S_lylx = 0;
|
|
var S_ly = 0;
|
|
var S_lxlx = 0;
|
|
for (var i=0; i < l; i++) {
|
|
S_lx += Math.log(x[i]);
|
|
S_lylx += Math.log(y[i]) * Math.log(x[i]);
|
|
S_ly += Math.log(y[i]);
|
|
S_lxlx += Math.pow(Math.log(x[i]), 2);
|
|
}
|
|
var B = (l * S_lylx - S_ly * S_lx) / (l * S_lxlx - S_lx * S_lx);
|
|
var A = Math.pow(Math.E, (S_ly - B * S_lx) / l);
|
|
var string = 'y=' + mjs_precision(A,4)+ 'x^' + mjs_precision(B,4);
|
|
return {parameters: [A, B], strings: [string,'',''], fun:fits.power_fun};
|
|
},
|
|
pre_fit_normalizing : function(x){
|
|
var s = series_stats(x,x);
|
|
var x_primed = clone(x);
|
|
for (var i = 0;i<x.length;i++){
|
|
x_primed[i] = (x[i] - s.x_mean)/s.sigma_x;
|
|
}
|
|
var string1 = "normalized (x-" + s.x_mean.toFixed()+")/"+s.sigma_x.toFixed();
|
|
return {x:x_primed,s:string1,x_mean:s.x_mean,sigma_x:s.sigma_x}
|
|
},
|
|
post_fit_normalizing : function(x,normalised){
|
|
var x_primed = clone(x);
|
|
for (var i = 0;i<x.length;i++){
|
|
x_primed[i] = (x[i] - normalised.x_mean)/normalised.sigma_x;
|
|
}
|
|
return x_primed
|
|
}
|
|
}
|
|
fits.fit_strings = ['exp','exp_c','linear','quad', 'cubic','poly4','poly5','poly6','poly7','const','log','power','power_c','gauss'];
|
|
fits.fit_funs = [fits.exponential,fits.exponential_plus_c,fits.linear,fits.poly2,fits.poly3,fits.poly4,fits.poly5,fits.poly6,fits.poly7,fits.constant,fits.log,fits.power,fits.power_plus_c,fits.gauss];
|
|
|
|
function mjs_precision(number,precision){
|
|
precision = trim(precision,1,21);
|
|
var sign = number <0 ? '-' : '';
|
|
number = Math.abs(number);
|
|
|
|
if ( number <= 2e-3){
|
|
var label = number.toExponential(precision-1);
|
|
//this hack gets the scheme to change on the 0.001 rather than the number higher than in.
|
|
// comparing number <= 1e-3 dosn't work as there might be floating point mess keeping it higher. i.e. 0.0010000000003
|
|
// testing against <= 9.99999e-4 could work but breaks when zoomed in. How many 9s, still has floating point problums.
|
|
if (parseInt(label.split('e')[1]) < -3){
|
|
return sign+ label;
|
|
}
|
|
}
|
|
|
|
var label = number.toPrecision(precision);
|
|
//this bit of mess fixes the strings that say 3.1e+2 rather than 310.
|
|
//as '3.1e+2' is longer (6) than '310' (3).
|
|
if (label.length >= number.toPrecision(precision+1).length){
|
|
label = number.toPrecision(precision+1);
|
|
}
|
|
if (label.length >= number.toPrecision(precision+2).length){
|
|
label = number.toPrecision(precision+2);
|
|
}
|
|
if (label.length >= number.toPrecision(precision+3).length){
|
|
label = number.toPrecision(precision+3);
|
|
}
|
|
return sign+label
|
|
}
|
|
|
|
function number_quote(number,error){
|
|
//returns a string which would be correct to quote to the given error.
|
|
// assuming that error is given to 2 sig fig.
|
|
if (! isFinite(error)){error = 1e-20;}
|
|
if (! isFinite(number)){number = 0;}
|
|
return mjs_precision(number, Math.max(2,Math.floor(Math.log10(Math.abs(number))) - Math.floor(Math.log10(Math.abs(error))) + 2) );
|
|
}
|
|
|
|
function drawEllipse(graph,ctx, centerX, centerY, radiusX, radiusY) {
|
|
ctx.beginPath();
|
|
|
|
var rotationAngle = 0.5;
|
|
|
|
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
|
|
var xPos = centerX - (radiusX * Math.sin(i)) * Math.sin(rotationAngle * Math.PI) + (radiusY * Math.cos(i)) * Math.cos(rotationAngle * Math.PI);
|
|
var yPos = centerY + (radiusY * Math.cos(i)) * Math.sin(rotationAngle * Math.PI) + (radiusX * Math.sin(i)) * Math.cos(rotationAngle * Math.PI);
|
|
if (i == 0) {
|
|
ctx.moveTo(graph.units_to_pixels(xPos,'x'),graph.units_to_pixels(yPos,'y') );
|
|
} else {
|
|
ctx.lineTo(graph.units_to_pixels(xPos,'x'),graph.units_to_pixels(yPos,'y'));
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
function mouse_move_event(event,graph){
|
|
graph.ui.latestEvent = event;
|
|
if(!graph.ui.ticking) {
|
|
graph.ui.ticking = true;
|
|
requestAnimationFrame( function(){mouse_move_event_shim(graph.ui.latestEvent,graph);} );
|
|
//setTimeout(function(){mouse_move_event_shim(graph.ui.latestEvent,graph);}, 10);
|
|
}
|
|
|
|
}
|
|
|
|
function mouse_move_event_shim(event,graph){
|
|
var start_time = new Date();
|
|
mouse_move_event_actual(event,graph);
|
|
var end_time = new Date();
|
|
graph.ui.copy_time=end_time.getTime() - start_time.getTime();
|
|
graph.ui.ticking=false;
|
|
}
|
|
|
|
function mouse_move_event_actual(event,graph){
|
|
|
|
var canvas = graph.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
var gs = graph.graphics_style;
|
|
|
|
|
|
//ctx.stroke();
|
|
var rect = canvas.getBoundingClientRect();
|
|
var x = event.clientX - rect.left;
|
|
var y = event.clientY - rect.top;
|
|
var px = graph.pixels_to_units(x,'x');
|
|
var py = graph.pixels_to_units(y,'y');
|
|
|
|
if (graph.graph_image){
|
|
ctx.putImageData(graph.graph_image,0,0);
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
if (graph.ui.touch){
|
|
var edge = Math.min(Math.min(canvas.width / 22, canvas.height/15));
|
|
} else {
|
|
var edge = Math.min(gs.tick_labels_font_size/0.55 * gs.scaling_factor,Math.min(canvas.width / 22, canvas.height/15));
|
|
}
|
|
graph.ui.size = edge;
|
|
var cs = edge/4;
|
|
ctx.font = (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
if (DEBUGG_FPS){
|
|
ctx.fillText('fps: '+ (1/graph.ui.copy_time*1000),30,30);
|
|
}
|
|
|
|
if (mouse_down == false){
|
|
|
|
ctx.textAlign="left";
|
|
//not at the very edges draw interactive stuff
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.strokeStyle = gs.color_fg;
|
|
//do the mouse modes
|
|
if (x>edge && y>edge && canvas.height-y > edge && canvas.width-x > edge ){
|
|
|
|
if (gs.mouse_mode === 'zoom'){
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, cs , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (gs.mouse_mode === 'zoom' || gs.mouse_mode === 'drag' || gs.mouse_mode === 'measure' ){
|
|
|
|
var labelx = graph.get_axis_string(px,'x');
|
|
var labelxWidth = ctx.measureText(labelx).width;
|
|
var labely = graph.get_axis_string(py,'y');
|
|
|
|
lw = labely.length * gs.scaling_factor*gs.axis_labels_font_size;
|
|
|
|
if (graph.ui.touch && graph.ui.is_touching ){
|
|
ctx.fillText(labelx,Math.min(x+cs, canvas.width-edge-labelxWidth), canvas.height-2*edge );
|
|
ctx.fillText(labely,2*edge,y-cs);
|
|
} else {
|
|
ctx.fillText(labelx,Math.min(x+cs, canvas.width-edge-labelxWidth), Math.min(y+2*cs+2*edge,canvas.height-2*edge) );
|
|
ctx.fillText(labely,Math.max(x-2*cs-lw-2*edge,2*edge),Math.max(y-cs,gs.scaling_factor*gs.axis_labels_font_size+edge));
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,y+edge);
|
|
ctx.lineTo(x,canvas.height );
|
|
ctx.moveTo(x,y-edge);
|
|
ctx.lineTo(x,0);
|
|
ctx.moveTo(x-edge,y);
|
|
ctx.lineTo(0,y);
|
|
ctx.moveTo(x+edge,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (gs.mouse_mode === 'trim'){
|
|
ctx.fillText('trim',x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,canvas.height);
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
ctx.stroke();
|
|
}
|
|
if (gs.mouse_mode === 'cut'){
|
|
ctx.fillText('cut',x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,canvas.height);
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
ctx.stroke();
|
|
}
|
|
if (gs.mouse_mode === 'sublin'){
|
|
ctx.fillText('draw a line to subtract',x+cs*2,y-cs*2);
|
|
}
|
|
if (gs.mouse_mode === 'x-c'){
|
|
label = graph.get_axis_string(px,'x');
|
|
ctx.fillText('x-'+label,x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,canvas.height);
|
|
ctx.stroke();
|
|
}
|
|
if (gs.mouse_mode === 'y-c'){
|
|
label = graph.get_axis_string(py,'y');
|
|
ctx.fillText('y-'+label,x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
ctx.stroke();
|
|
}
|
|
if (gs.mouse_mode === 'addmarkertext'){
|
|
label = graph.markerText;
|
|
ctx.textAlign="center";
|
|
ctx.fillText(label,x,y);
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerline' ||
|
|
gs.mouse_mode === 'addmarkerlinentext' ||
|
|
gs.mouse_mode === 'addmarkerarrowntext'||
|
|
gs.mouse_mode === 'addmarkerbox'){
|
|
label = ' click and drag to draw' ;
|
|
ctx.fillText(label,x+cs,y+cs);
|
|
}
|
|
|
|
if (gs.mouse_mode === 'removeMarker' || gs.mouse_mode === 'markeredit'){
|
|
for (var i=0;i<gs.markers.length;i++){
|
|
var m = gs.markers[i];
|
|
ctx.beginPath();
|
|
ctx.arc(graph.units_to_pixels(m.x,'x'), graph.units_to_pixels(m.y,'y'), cs , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
}
|
|
|
|
}
|
|
if (gs.mouse_mode === 'removeMarker' ){ctx.fillText(' click to remove' ,x+cs,y+cs);}
|
|
if (gs.mouse_mode === 'markeredit' ){ctx.fillText(' click to edit text' ,x+cs,y+cs);}
|
|
if (gs.mouse_mode === 'mouse'){
|
|
|
|
|
|
//marker handles
|
|
for (var i=0;i<gs.markers.length;i++){
|
|
var m = gs.markers[i];
|
|
for (var j=0;j<m.handles.length;j++){
|
|
ctx.beginPath();
|
|
ctx.arc(graph.units_to_pixels(m.handles[j][0],'x'),
|
|
graph.units_to_pixels(m.handles[j][1],'y'),
|
|
cs , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
//fit text handle
|
|
if (gs.fits !== 'none'){
|
|
ctx.beginPath();
|
|
ctx.arc(gs.fit_text_position.x*canvas.width, gs.fit_text_position.y*canvas.height, cs , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
}
|
|
//title spacing handle
|
|
ctx.beginPath();
|
|
var title_y = (gs.tick_len+gs.title_spacing+gs.title_font_size)*gs.scaling_factor;
|
|
ctx.arc(canvas.width/2, title_y, cs , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
if (gs.show_captions>0){
|
|
//there are captions visable
|
|
//caption position handle
|
|
var cap_x = gs.scaling_factor*gs.caption_position.x;
|
|
if (gs.caption_position.x>0){
|
|
cap_x += gs.scaling_factor*gs.tick_len;
|
|
} else {
|
|
cap_x = canvas.width + cap_x;
|
|
cap_x -= gs.scaling_factor*gs.tick_len;
|
|
}
|
|
cap_y = gs.scaling_factor*gs.caption_position.y;
|
|
if (gs.caption_position.y>0){
|
|
//going down from top
|
|
cap_y += gs.scaling_factor*gs.tick_len;
|
|
} else {
|
|
//up from botton
|
|
cap_y = canvas.height + cap_y;
|
|
cap_y -= gs.scaling_factor*gs.tick_len;
|
|
}
|
|
ctx.beginPath();
|
|
ctx.arc(cap_x, cap_y, cs , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
}
|
|
|
|
}
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
|
|
if (gs.mouse_mode === 'measure'){
|
|
//measure mode
|
|
ctx.beginPath();
|
|
ctx.moveTo(x-cs,y-cs);
|
|
ctx.lineTo(x+cs,y+cs);
|
|
ctx.moveTo(x-cs,y+cs);
|
|
ctx.lineTo(x+cs,y-cs);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (gs.mouse_mode === 'drag'){
|
|
//center lines
|
|
drag_x = x-0.5*edge;
|
|
drag_y = y-0.5*edge;
|
|
ctx.beginPath();
|
|
ctx.moveTo(drag_x+edge*0.2,drag_y+edge*0.5);
|
|
ctx.lineTo(drag_x+edge*0.8,drag_y+edge*0.5);
|
|
ctx.moveTo(drag_x+edge*0.5,drag_y+edge*0.2);
|
|
ctx.lineTo(drag_x+edge*0.5,drag_y+edge*0.8);
|
|
//diagonals
|
|
ctx.moveTo(drag_x+edge*0.2,drag_y+edge*0.5);
|
|
ctx.lineTo(drag_x+edge*0.3,drag_y+edge*0.6);
|
|
ctx.moveTo(drag_x+edge*0.2,drag_y+edge*0.5);
|
|
ctx.lineTo(drag_x+edge*0.3,drag_y+edge*0.4);
|
|
|
|
ctx.moveTo(drag_x+edge*0.8,drag_y+edge*0.5);
|
|
ctx.lineTo(drag_x+edge*0.7,drag_y+edge*0.6);
|
|
ctx.moveTo(drag_x+edge*0.8,drag_y+edge*0.5);
|
|
ctx.lineTo(drag_x+edge*0.7,drag_y+edge*0.4);
|
|
|
|
ctx.moveTo(drag_x+edge*0.5,drag_y+edge*0.2);
|
|
ctx.lineTo(drag_x+edge*0.4,drag_y+edge*0.3);
|
|
ctx.moveTo(drag_x+edge*0.5,drag_y+edge*0.2);
|
|
ctx.lineTo(drag_x+edge*0.6,drag_y+edge*0.3);
|
|
|
|
ctx.moveTo(drag_x+edge*0.5,drag_y+edge*0.8);
|
|
ctx.lineTo(drag_x+edge*0.4,drag_y+edge*0.7);
|
|
ctx.moveTo(drag_x+edge*0.5,drag_y+edge*0.8);
|
|
ctx.lineTo(drag_x+edge*0.6,drag_y+edge*0.7);
|
|
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (gs.mouse_mode === 'reader'){
|
|
var pi = graph.reader_index[0];
|
|
var pj = graph.reader_index[1];
|
|
var xi = graph.units_to_pixels(graph.data[pi][0][pj],'x');
|
|
var yi = graph.units_to_pixels(graph.data[pi][1][pj],'y');
|
|
|
|
|
|
var old_line_width = ctx.lineWidth;
|
|
ctx.strokeStyle = gs.color_bg;
|
|
ctx.lineWidth = gs.scaling_factor*gs.axis_labels_font_size/3;
|
|
|
|
if (gs.x_scale_mode ==='lin' || gs.x_scale_mode ==='log'){
|
|
label= mjs_precision(graph.data[pi][0][pj],gs.x_precision+5);
|
|
}
|
|
if (gs.x_scale_mode ==='time'){
|
|
label= mjs_date_print(graph.data[pi][0][pj],0,8);
|
|
}
|
|
|
|
ctx.strokeText(label,x+2*cs,y+gs.axis_labels_font_size*1.6);
|
|
ctx.fillText(label,x+2*cs,y+gs.axis_labels_font_size*1.6);
|
|
|
|
|
|
if (gs.y_scale_mode ==='lin' || gs.y_scale_mode ==='log'){
|
|
label= mjs_precision(graph.data[pi][1][pj],gs.y_precision+5);
|
|
}
|
|
if (gs.y_scale_mode ==='time'){
|
|
label= mjs_date_print(graph.data[pi][1][pj],0,8);
|
|
}
|
|
|
|
ctx.strokeText(label,x+2*cs,y);
|
|
ctx.fillText(label,x+2*cs,y);
|
|
|
|
label = graph.captions[pi];
|
|
|
|
ctx.strokeText(label,x+2*cs,y-gs.axis_labels_font_size*1.6);
|
|
ctx.fillText(label,x+2*cs,y-gs.axis_labels_font_size*1.6);
|
|
label = 'i='+pj;//the index of the data point in the series.
|
|
//called j internally, as i if for which series.
|
|
//label = 'y='+graph.data[pi][1][pj];
|
|
ctx.strokeText(label,x+2*cs,y+gs.axis_labels_font_size*1.6*2);
|
|
|
|
ctx.fillText(label,x+2*cs,y+gs.axis_labels_font_size*1.6*2);
|
|
|
|
|
|
ctx.lineWidth = old_line_width;
|
|
ctx.strokeStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,y);
|
|
ctx.lineTo(xi,yi);
|
|
ctx.stroke()
|
|
ctx.beginPath();
|
|
ctx.arc(x,y, edge*0.3*0.8 , 0 ,Math.PI*2, true);
|
|
ctx.moveTo(x,y-edge*.3);
|
|
ctx.lineTo(x,y+edge*.3);
|
|
ctx.moveTo(x+edge*0.3,y);
|
|
ctx.lineTo(x-edge*0.3,y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
// draw some buttons.... top edge
|
|
if (y<edge){
|
|
graph.menushown = true;
|
|
ctx.fillStyle = gs.color_bg;
|
|
|
|
ctx.beginPath();
|
|
ctx.rect(0,0,edge*4,edge);
|
|
ctx.rect(4*edge,0,edge*4,edge);
|
|
ctx.rect(14*edge,0,edge*3,edge);
|
|
ctx.rect(canvas.width-5*edge,0,edge*3,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = gs.color_fg;
|
|
|
|
ctx.beginPath();
|
|
ctx.fillText("symbol/line",0.2*edge,0.8*edge);
|
|
ctx.fillText("Graph",4.2*edge,0.8*edge);
|
|
ctx.fillText("Style",canvas.width-4.8*edge,0.8*edge);
|
|
ctx.fillText("Markers",14.2*edge,0.8*edge);
|
|
|
|
ctx.fillStyle = gs.color_bg;
|
|
|
|
//mouse mode to drag button
|
|
ctx.rect(edge*9,0,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
//center lines
|
|
ctx.moveTo(edge*9.2,edge*0.5);
|
|
ctx.lineTo(edge*9.8,edge*0.5);
|
|
ctx.moveTo(edge*9.5,edge*0.2);
|
|
ctx.lineTo(edge*9.5,edge*0.8);
|
|
//diagonals
|
|
ctx.moveTo(edge*9.2,edge*0.5);
|
|
ctx.lineTo(edge*9.3,edge*0.6);
|
|
ctx.moveTo(edge*9.2,edge*0.5);
|
|
ctx.lineTo(edge*9.3,edge*0.4);
|
|
|
|
ctx.moveTo(edge*9.8,edge*0.5);
|
|
ctx.lineTo(edge*9.7,edge*0.6);
|
|
ctx.moveTo(edge*9.8,edge*0.5);
|
|
ctx.lineTo(edge*9.7,edge*0.4);
|
|
|
|
ctx.moveTo(edge*9.5,edge*0.2);
|
|
ctx.lineTo(edge*9.4,edge*0.3);
|
|
ctx.moveTo(edge*9.5,edge*0.2);
|
|
ctx.lineTo(edge*9.6,edge*0.3);
|
|
|
|
ctx.moveTo(edge*9.5,edge*0.8);
|
|
ctx.lineTo(edge*9.4,edge*0.7);
|
|
ctx.moveTo(edge*9.5,edge*0.8);
|
|
ctx.lineTo(edge*9.6,edge*0.7);
|
|
|
|
ctx.stroke();
|
|
|
|
//mouse mode to zoom button
|
|
ctx.rect(edge*10,0,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(edge*10.5, edge*0.5, edge*0.3*0.8 , 0 ,Math.PI*2, true);
|
|
ctx.moveTo(edge*10.4,edge*0.5);
|
|
ctx.lineTo(edge*10.6,edge*0.5);
|
|
ctx.moveTo(edge*10.5,edge*0.4);
|
|
ctx.lineTo(edge*10.5,edge*0.6);
|
|
ctx.moveTo(edge*10.5+edge*0.3*0.8*0.707,edge*0.5+edge*0.3*0.8*0.707);
|
|
ctx.lineTo(edge*10.9,edge*0.9);
|
|
ctx.stroke();
|
|
|
|
//measure mode
|
|
ctx.rect(edge*11,0,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(edge*11.2,edge*0.8);
|
|
ctx.lineTo(edge*11.8,edge*0.8);
|
|
ctx.lineTo(edge*11.8,edge*0.2);
|
|
ctx.lineTo(edge*11.2,edge*0.8);
|
|
ctx.stroke();
|
|
|
|
//datareader button
|
|
ctx.rect(edge*12,0,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.arc(edge*12.5, edge*0.5, edge*0.3*0.8 , 0 ,Math.PI*2, true);
|
|
ctx.moveTo(edge*12.5,edge*0.2);
|
|
ctx.lineTo(edge*12.5,edge*0.8);
|
|
ctx.moveTo(edge*12.2,edge*0.5);
|
|
ctx.lineTo(edge*12.8,edge*0.5);
|
|
ctx.stroke();
|
|
|
|
//hand/mouse button
|
|
ctx.rect(edge*13,0,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(edge*13.3,edge*0.2);
|
|
ctx.lineTo(edge*13.3,edge*0.8);
|
|
ctx.lineTo(edge*13.7,edge*0.6);
|
|
ctx.lineTo(edge*13.3,edge*0.2);
|
|
|
|
//show/hide captions button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(canvas.width-edge,0,edge,edge);
|
|
ctx.rect(canvas.width-edge*2,0,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font = (0.7*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
ctx.fillText('c',canvas.width-0.7*edge, edge*0.7);
|
|
|
|
// infomation button
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.fillText('i',canvas.width-1.7*edge, edge*0.7);
|
|
|
|
ctx.fillStyle = gs.color_fg;
|
|
//flush the drawing code
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
} else if (y>canvas.height-edge){
|
|
//draw bottom buttons
|
|
graph.menushown = true;
|
|
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.beginPath();
|
|
ctx.rect(0,canvas.height-edge,edge*2,edge);
|
|
|
|
ctx.rect(2*edge,canvas.height-edge,edge*2,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
ctx.fillText('x',0.2*edge, canvas.height - edge*0.3);
|
|
ctx.fillText('y',2.2*edge, canvas.height - edge*0.3);
|
|
|
|
//grid button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(4*edge,canvas.height-edge,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
var lx = 4*edge;
|
|
var ly = canvas.height-edge;
|
|
ctx.moveTo(lx+0.2*edge,ly+0.4*edge);
|
|
ctx.lineTo(lx+0.8*edge,ly+0.4*edge);
|
|
ctx.moveTo(lx+0.2*edge,ly+0.6*edge);
|
|
ctx.lineTo(lx+0.8*edge,ly+0.6*edge);
|
|
ctx.moveTo(lx+0.4*edge,ly+0.2*edge);
|
|
ctx.lineTo(lx+0.4*edge,ly+0.8*edge);
|
|
ctx.moveTo(lx+0.6*edge,ly+0.2*edge);
|
|
ctx.lineTo(lx+0.6*edge,ly+0.8*edge);
|
|
ctx.stroke();
|
|
|
|
//lin log buttons
|
|
|
|
ctx.rect(5*edge,canvas.height-edge,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.rect(6*edge,canvas.height-edge,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.rect(7*edge,canvas.height-edge,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
if (gs.y_scale_mode == 'log'){
|
|
//draw lines showing linear
|
|
ctx.moveTo(5*edge,canvas.height-0.2*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.2*edge);
|
|
ctx.moveTo(5*edge,canvas.height-0.4*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.4*edge);
|
|
ctx.moveTo(5*edge,canvas.height-0.6*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.6*edge);
|
|
ctx.moveTo(5*edge,canvas.height-0.8*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.8*edge);
|
|
} else {
|
|
//draw log like lines
|
|
ctx.moveTo(5*edge,canvas.height-0.4*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.4*edge);
|
|
ctx.moveTo(5*edge,canvas.height-0.65*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.65*edge);
|
|
ctx.moveTo(5*edge,canvas.height-0.8*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.8*edge);
|
|
ctx.moveTo(5*edge,canvas.height-0.9*edge);
|
|
ctx.lineTo(6*edge,canvas.height-0.9*edge);
|
|
}
|
|
if (gs.x_scale_mode === 'log'){
|
|
ctx.moveTo(6.2*edge,canvas.height);
|
|
ctx.lineTo(6.2*edge,canvas.height-edge);
|
|
ctx.moveTo(6.4*edge,canvas.height);
|
|
ctx.lineTo(6.4*edge,canvas.height-edge);
|
|
ctx.moveTo(6.6*edge,canvas.height);
|
|
ctx.lineTo(6.6*edge,canvas.height-edge);
|
|
ctx.moveTo(6.8*edge,canvas.height);
|
|
ctx.lineTo(6.8*edge,canvas.height-edge);
|
|
} else {
|
|
ctx.moveTo(6.4*edge,canvas.height);
|
|
ctx.lineTo(6.4*edge,canvas.height-edge);
|
|
ctx.moveTo(6.65*edge,canvas.height);
|
|
ctx.lineTo(6.65*edge,canvas.height-edge);
|
|
ctx.moveTo(6.8*edge,canvas.height);
|
|
ctx.lineTo(6.8*edge,canvas.height-edge);
|
|
ctx.moveTo(6.9*edge,canvas.height);
|
|
ctx.lineTo(6.9*edge,canvas.height-edge);
|
|
}
|
|
ctx.stroke();
|
|
//time axis button
|
|
var lx = 7*edge;
|
|
var ly = canvas.height-edge;
|
|
ctx.beginPath();
|
|
ctx.moveTo(lx+0.1*edge,ly+0.6*edge);
|
|
ctx.lineTo(lx+0.1*edge,ly+0.9*edge);
|
|
ctx.lineTo(lx+0.9*edge,ly+0.9*edge);
|
|
ctx.lineTo(lx+0.9*edge,ly+0.6*edge);
|
|
ctx.moveTo(lx+0.5*edge,ly+0.9*edge);
|
|
ctx.lineTo(lx+0.5*edge,ly+0.8*edge);
|
|
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.arc(lx+0.5*edge,ly+0.4*edge, edge*0.3 , 0 ,Math.PI*2, true);
|
|
ctx.moveTo(lx+0.5*edge,ly+0.2*edge);
|
|
ctx.lineTo(lx+0.5*edge,ly+0.4*edge);
|
|
ctx.lineTo(lx+0.6*edge,ly+0.4*edge);
|
|
ctx.stroke();
|
|
|
|
//f() button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(8*edge,canvas.height-edge,edge*3,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font= (0.7*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
ctx.fillText('f()',8.2*edge, canvas.height - edge*0.3);
|
|
ctx.stroke();
|
|
|
|
//line menu button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(11*edge,canvas.height-edge,edge*4,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.fillText('lines',11.2*edge, canvas.height - edge*0.3);
|
|
ctx.stroke();
|
|
|
|
//fits menu button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(15*edge,canvas.height-edge,edge*4,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.fillText('fits',15.2*edge, canvas.height - edge*0.3);
|
|
ctx.stroke();
|
|
|
|
//draw data out button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(canvas.width-edge,canvas.height-edge,edge,edge);
|
|
//the fullscreen button
|
|
ctx.rect(canvas.width-edge*3,canvas.height-edge,edge,edge);
|
|
ctx.rect(canvas.width-edge*2.8,canvas.height-edge*.8,edge*0.6,edge*0.6);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.fillText('e',canvas.width-0.7*edge, canvas.height - edge*0.3);
|
|
ctx.stroke();
|
|
|
|
//draw day/nightmode button
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
ctx.rect(canvas.width-2*edge,canvas.height-edge,edge,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.moveTo(canvas.width-2*edge,canvas.height);
|
|
ctx.lineTo(canvas.width-edge-1,canvas.height-edge+1);
|
|
ctx.lineTo(canvas.width-edge-1,canvas.height);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
} else {
|
|
graph.menushown = false;
|
|
}
|
|
|
|
if (graph.drawStylemenu){
|
|
if (x < canvas.width-2*edge && x > canvas.width-10*edge && y < 14*edge){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(canvas.width-10*edge,0,edge*8,edge*14);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = edge*0.8;
|
|
var dy = -1*edge;
|
|
var lx = canvas.width-10*edge+0.2*edge;
|
|
ctx.textAlign="left";
|
|
ctx.fillText('Style',lx+5*edge, ly);ly-=dy;
|
|
ctx.fillText('Pick Font',lx, ly);
|
|
if (gs.font_name.length <10){
|
|
ctx.fillText(gs.font_name,lx+4*edge, ly);
|
|
} else {
|
|
ctx.fillText(gs.font_name.slice(0,9)+'...',lx+4*edge, ly);
|
|
}
|
|
ly-=dy;
|
|
ctx.fillText('Font Size:',lx, ly);
|
|
ctx.fillText('Title:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Ticks:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Axis:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Spacing:',lx, ly);
|
|
ctx.fillText('Title:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Ticks:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Axis:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Colors:',lx, ly);
|
|
ctx.fillText('FG:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('BG:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('MG:',lx+4*edge, ly);ly-=dy;
|
|
ctx.fillText('Line Width:',lx, ly);ly-=dy;
|
|
ctx.fillText('Tick Len -major:',lx, ly);ly-=dy;
|
|
ctx.fillText('Tick Len -minor:',lx, ly);ly-=dy;
|
|
ly = edge*2.8;
|
|
ctx.textAlign="center";
|
|
lx = canvas.width-3.5*edge;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[edit]',lx+0.5*edge, ly);ly-=dy;
|
|
ctx.fillText('[edit]',lx+0.5*edge, ly);ly-=dy;
|
|
ctx.fillText('[edit]',lx+0.5*edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx, ly);ctx.fillText('[+]',lx+edge, ly);ly-=dy;
|
|
} else {
|
|
graph.drawStylemenu = false;
|
|
}
|
|
}
|
|
if (graph.drawxmenu){
|
|
if (x < 12*edge && y > canvas.height - 9*edge){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(0,canvas.height-edge*9,edge*12,edge*9);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = canvas.height - edge*0.2;
|
|
var dy = edge;
|
|
var lx = 0.2*edge;
|
|
ctx.textAlign="left";
|
|
ctx.fillText('x:',lx, ly);ly-=dy;
|
|
ctx.fillText('Min:' + graph.get_axis_string(gs.x_manual_min,'x'),lx, ly);ly-=dy;
|
|
ctx.fillText('Max:' + graph.get_axis_string(gs.x_manual_max,'x'),lx, ly);ly-=dy;
|
|
ctx.fillText('Mode:',lx, ly);ly-=dy;
|
|
ctx.fillText('Spacing: ' + mjs_precision(gs.guideWidthx,2) ,lx, ly);ly-=dy;
|
|
ctx.fillText('Style:',lx, ly);ly-=dy;
|
|
ctx.fillText('Set Prefix:',lx, ly);ly-=dy;
|
|
ctx.fillText('Set Postfix:',lx, ly);ly-=dy;
|
|
ctx.fillText('Set Label:',lx, ly);ly-=dy;
|
|
ly = canvas.height - edge*1.2;
|
|
ctx.textAlign="center";
|
|
ctx.fillText('[auto]',6*edge, ly);
|
|
ctx.fillText('[manual]',10*edge, ly);ly-=dy;
|
|
ctx.fillText('[auto]',6*edge, ly);
|
|
ctx.fillText('[manual]',10*edge, ly);ly-=dy;
|
|
ctx.fillText('[lin]',4.5*edge, ly);
|
|
ctx.fillText('[log]',7.5*edge, ly);
|
|
ctx.fillText('[time]',10.5*edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',6*edge, ly);
|
|
ctx.fillText('[+]',10*edge, ly);ly-=dy;
|
|
ctx.fillText('[1200]',5*edge, ly);
|
|
ctx.fillText('[1k2]',7*edge, ly);
|
|
ctx.fillText('[1.2k]',9*edge, ly);
|
|
ctx.fillText('[1.2e3]',11*edge, ly);ly-=dy;
|
|
|
|
ctx.fillText('"'+gs.x_axis_prefix+'"',8*edge, ly);ly-=dy;
|
|
ctx.fillText('"'+gs.x_axis_postfix+'"',8*edge, ly);ly-=dy;
|
|
ctx.fillText('"'+gs.x_axis_title+'"',8*edge, ly);
|
|
ctx.textAlign="left";
|
|
}else {
|
|
graph.drawxmenu = false;
|
|
}
|
|
}
|
|
if (graph.drawymenu){
|
|
if (x < 14*edge && x>2*edge && y > canvas.height - 9*edge){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(2*edge,canvas.height-edge*9,edge*12,edge*9);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = canvas.height - edge*0.2;
|
|
var dy = edge;
|
|
var lx = 2.2*edge;
|
|
ctx.textAlign="left";
|
|
ctx.fillText('y:',lx, ly);ly-=dy;
|
|
ctx.fillText('Min:' + graph.get_axis_string(gs.y_manual_min,'y'),lx, ly);ly-=dy;
|
|
ctx.fillText('Max:' + graph.get_axis_string(gs.y_manual_max,'y'),lx, ly);ly-=dy;
|
|
ctx.fillText('Mode:',lx, ly);ly-=dy;
|
|
ctx.fillText('Spacing: ' + mjs_precision(gs.guideWidthy,2) ,lx, ly);ly-=dy;
|
|
ctx.fillText('Style:',lx, ly);ly-=dy;
|
|
ctx.fillText('Set Prefix:',lx, ly);ly-=dy;
|
|
ctx.fillText('Set Postfix:',lx, ly);ly-=dy;
|
|
ctx.fillText('Set Label:',lx, ly);ly-=dy;
|
|
ly = canvas.height - edge*1.2;
|
|
ctx.textAlign="center";
|
|
var lx = 2*edge;
|
|
ctx.fillText('[auto]',lx+6*edge, ly);
|
|
ctx.fillText('[manual]',lx+10*edge, ly);ly-=dy;
|
|
ctx.fillText('[auto]',lx+6*edge, ly);
|
|
ctx.fillText('[manual]',lx+10*edge, ly);ly-=dy;
|
|
ctx.fillText('[lin]',lx+4.5*edge, ly);
|
|
ctx.fillText('[log]',lx+7.5*edge, ly);
|
|
ctx.fillText('[time]',lx+10.5*edge, ly);ly-=dy;
|
|
ctx.fillText('[-]',lx+6*edge, ly);
|
|
ctx.fillText('[+]',lx+10*edge, ly);ly-=dy;
|
|
//ctx.fillText('[1.2'+unicodeTimes+'10]'+String.fromCharCode(178),lx+3*edge, ly);
|
|
ctx.fillText('[1200]',lx+5*edge, ly);
|
|
ctx.fillText('[1k2]',lx+7*edge, ly);
|
|
ctx.fillText('[1.2k]',lx+9*edge, ly);
|
|
ctx.fillText('[1.2e3]',lx+11*edge, ly);ly-=dy;
|
|
|
|
ctx.fillText('"'+gs.y_axis_prefix+'"',lx+8*edge, ly);ly-=dy;
|
|
ctx.fillText('"'+gs.y_axis_postfix+'"',lx+8*edge, ly);ly-=dy;
|
|
ctx.fillText('"'+gs.y_axis_title+'"',lx+8*edge, ly);
|
|
ctx.textAlign="left";
|
|
}else {
|
|
graph.drawymenu = false;
|
|
}
|
|
}
|
|
|
|
if (graph.drawmodemenu){
|
|
if (x < 10*edge && y < edge*3){
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
//box
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.beginPath();
|
|
ctx.rect(0,0,edge*10,edge*3);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
ctx.fillText('symbol/line',0.2*edge, 0.8*edge);
|
|
|
|
//+ and - buttons
|
|
ctx.beginPath();
|
|
ctx.moveTo(0.2*edge,1.5*edge);
|
|
ctx.lineTo(0.8*edge,1.5*edge);
|
|
ctx.moveTo(0.5*edge,1.2*edge);
|
|
ctx.lineTo(0.5*edge,1.8*edge);
|
|
ctx.moveTo(1.2*edge,1.5*edge);
|
|
ctx.lineTo(1.8*edge,1.5*edge);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(0.2*edge,2.5*edge);
|
|
ctx.lineTo(0.8*edge,2.5*edge);
|
|
ctx.moveTo(0.5*edge,2.2*edge);
|
|
ctx.lineTo(0.5*edge,2.8*edge);
|
|
ctx.moveTo(1.2*edge,2.5*edge);
|
|
ctx.lineTo(1.8*edge,2.5*edge);
|
|
ctx.stroke();
|
|
|
|
//structure lines
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,edge);
|
|
ctx.lineTo(10*edge,edge);
|
|
ctx.moveTo(0,2*edge);
|
|
ctx.lineTo(10*edge,2*edge);
|
|
ctx.moveTo(2*edge,1*edge)
|
|
ctx.lineTo(2*edge,3*edge);
|
|
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(2.5*edge,1.5*edge,edge*0.35,0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(2.2*edge,1.2*edge)
|
|
ctx.lineTo(2.8*edge,1.8*edge);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.arc(2.5*edge,2.5*edge,edge*0.35,0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(2.2*edge,2.2*edge)
|
|
ctx.lineTo(2.8*edge,2.8*edge);
|
|
ctx.stroke();
|
|
|
|
//symbol buttons
|
|
var lx = 3*edge;
|
|
var ly = 1*edge;//top left corner of a 1x1edge square
|
|
|
|
//dot
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.rect(lx + 0.3*edge,ly + 0.3*edge,edge*0.4,edge*0.4);
|
|
ctx.fill();
|
|
|
|
//filled circle
|
|
lx += edge;
|
|
ctx.arc(edge*0.5+lx, ly+ edge*0.5, edge*0.3 , 0 ,Math.PI*2, true);
|
|
ctx.fill();
|
|
|
|
//box
|
|
lx += edge;
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.beginPath();
|
|
ctx.rect(lx + 0.3*edge,ly + 0.3*edge,edge*0.4,edge*0.4);
|
|
ctx.stroke();
|
|
|
|
//stroked circle
|
|
lx += edge;
|
|
ctx.beginPath();
|
|
ctx.arc(edge*0.5+lx, ly+ edge*0.5, edge*0.3 , 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
|
|
//x
|
|
lx += edge;
|
|
ctx.beginPath();
|
|
ctx.moveTo(lx+0.3*edge,ly+0.3*edge);
|
|
ctx.lineTo(lx+0.7*edge,ly+0.7*edge);
|
|
ctx.moveTo(lx+0.7*edge,ly+0.3*edge);
|
|
ctx.lineTo(lx+0.3*edge,ly+0.7*edge);
|
|
ctx.stroke();
|
|
|
|
//cross
|
|
lx += edge;
|
|
ctx.beginPath();
|
|
ctx.moveTo(lx+0.5*edge,ly+0.3*edge);
|
|
ctx.lineTo(lx+0.5*edge,ly+0.7*edge);
|
|
ctx.moveTo(lx+0.7*edge,ly+0.5*edge);
|
|
ctx.lineTo(lx+0.3*edge,ly+0.5*edge);
|
|
ctx.stroke();
|
|
|
|
//line modes
|
|
ly += 1.5*edge;
|
|
lx = 3.5*edge;
|
|
var ll = 0.3;
|
|
//line
|
|
ctx.beginPath();
|
|
ctx.moveTo(lx-ll*edge,ly-ll*edge);
|
|
ctx.lineTo(lx+ll*edge,ly+ll*edge);
|
|
|
|
//approx
|
|
lx += edge;
|
|
ctx.moveTo(lx-ll*edge,ly+ll*edge);
|
|
ctx.quadraticCurveTo(lx-ll*edge,ly-ll*edge,lx+ll*edge,ly-ll*edge);
|
|
|
|
|
|
//interp
|
|
lx += edge;
|
|
ctx.moveTo(lx-ll*edge,ly+ll*edge);
|
|
ctx.bezierCurveTo(lx+ll*edge,ly+ll*edge,lx-ll*edge,ly-ll*edge,lx+ll*edge,ly-ll*edge);
|
|
|
|
//zig
|
|
lx += edge;
|
|
ctx.moveTo(lx-ll*edge,ly-ll*edge);
|
|
ctx.lineTo(lx-ll*edge,ly+ll*edge);
|
|
ctx.lineTo(lx+ll*edge,ly+ll*edge);
|
|
|
|
//zag
|
|
lx += edge;
|
|
ctx.moveTo(lx-ll*edge,ly-ll*edge);
|
|
ctx.lineTo(lx+ll*edge,ly-ll*edge);
|
|
ctx.lineTo(lx+ll*edge,ly+ll*edge);
|
|
|
|
//mid
|
|
lx += edge;
|
|
ctx.moveTo(lx-ll*edge,ly-ll*edge);
|
|
ctx.lineTo(lx,ly-ll*edge);
|
|
ctx.lineTo(lx,ly+ll*edge);
|
|
ctx.lineTo(lx+ll*edge,ly+ll*edge);
|
|
|
|
//hist
|
|
lx += edge;
|
|
ctx.moveTo(lx-ll*edge,ly-ll*edge);
|
|
ctx.lineTo(lx-ll*edge,ly+ll*edge);
|
|
ctx.moveTo(lx-ll*edge,ly);
|
|
|
|
ctx.lineTo(lx+ll*edge,ly);
|
|
|
|
ctx.lineTo(lx+ll*edge,ly+ll*edge);
|
|
|
|
ctx.stroke();
|
|
|
|
} else {
|
|
console.log('leaving menu');
|
|
graph.drawmodemenu = false;
|
|
}
|
|
}
|
|
|
|
if (graph.drawmarkermenu){
|
|
if (x < 21*edge && x > 14*edge && y < edge*10){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(14*edge,0,edge*7,edge*10);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = edge*0.8;
|
|
var dy = -edge;
|
|
var lx = 14.2*edge;
|
|
var lx2 = 17.2*edge;
|
|
ctx.fillText('Marker',lx, ly);ly-=dy;
|
|
ctx.fillText('Clear All',lx, ly); ctx.fillText('Hide/Show',lx2, ly); ly-=dy;
|
|
ctx.fillText('Remove',lx, ly); ctx.fillText('edit',lx2, ly);ly-=dy;
|
|
ctx.fillText('Add Text',lx, ly);ly-=dy;
|
|
ctx.fillText('Add line',lx, ly); ctx.fillText('+text',lx2, ly);ly-=dy;
|
|
ctx.fillText('Add box',lx, ly); ctx.fillText('+text',lx2, ly);ly-=dy;
|
|
ctx.fillText('Add arrow',lx, ly); ctx.fillText('+text',lx2, ly);ly-=dy;
|
|
} else {
|
|
graph.drawmarkermenu = false;
|
|
}
|
|
}
|
|
if (graph.drawgraphmenu){
|
|
if (x < 12*edge && x > 4*edge && y < edge*10){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(4*edge,0,edge*8,edge*10);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = edge*0.8;
|
|
var dy = -edge;
|
|
var lx = 4.2*edge;
|
|
ctx.fillText('Graph',lx, ly);ly-=dy;
|
|
ctx.fillText('Set title',lx, ly);ly-=dy;
|
|
ctx.fillText('Set subtitle',lx, ly);ly-=dy;
|
|
ctx.fillText('Set subtitle2',lx, ly);ly-=dy;
|
|
ctx.fillText('Toggle show transforms',lx, ly);ly-=dy;
|
|
ctx.fillText('set x-axis title',lx, ly);ly-=dy;
|
|
ctx.fillText('set y-axis title',lx, ly);ly-=dy;
|
|
ctx.fillText('Scaling Factor down',lx, ly);ly-=dy;
|
|
ctx.fillText('Scaling Factor up',lx, ly);ly-=dy;
|
|
ctx.fillText('Reset Graph',lx, ly);ly-=dy;
|
|
|
|
} else {
|
|
graph.drawgraphmenu = false;
|
|
}
|
|
}
|
|
if (graph.drawFontMenu){
|
|
var items = MJSFontList.fontList.length+1;
|
|
if (x < canvas.width-2*edge && x > canvas.width-10*edge && y < edge*items){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(canvas.width-10*edge,0,edge*8,edge*items);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = edge*0.8;
|
|
var dy = -1*edge;
|
|
var lx = canvas.width-10*edge+0.2*edge;
|
|
ctx.textAlign="left";
|
|
ctx.fillText('Other ...',lx, ly);ly-=dy;
|
|
for (var i =0;i<items-1;i++){
|
|
ctx.fillText(MJSFontList.fontList[i],lx, ly);ly-=dy;
|
|
}
|
|
} else {
|
|
graph.drawFontMenu = false;
|
|
}
|
|
}
|
|
|
|
if (graph.drawexportmenu){
|
|
if (x > canvas.width - 16*edge && y > canvas.height-edge*14){
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
//box
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(canvas.width - 16*edge,canvas.height-edge*14,edge*16,edge*14);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.beginPath();
|
|
var ly = canvas.height - edge*0.1;
|
|
var dy = edge;
|
|
var lx = canvas.width - 7.8*edge;
|
|
ctx.fillText('export',lx, ly);ly-=dy;
|
|
ctx.fillText('data (csv)',lx, ly);ly-=dy;
|
|
ctx.fillText('data (code)',lx, ly);ly-=dy;
|
|
ctx.fillText('data (code [matlab])',lx, ly);ly-=dy;
|
|
ctx.fillText('data (code [JSON])',lx, ly);ly-=dy;
|
|
ctx.fillText('data (tabbed)',lx, ly);ly-=dy;
|
|
ctx.fillText('png (hi res)',lx, ly);ly-=dy;
|
|
ctx.fillText('png (low res)',lx, ly);ly-=dy;
|
|
ctx.fillText('png (small figure)',lx, ly);ly-=dy;
|
|
ctx.fillText('png (large figure)',lx, ly);ly-=dy;
|
|
ctx.fillText('svg',lx, ly);ly-=dy;
|
|
ctx.fillText('svg (small figure)',lx, ly);ly-=dy;
|
|
ctx.fillText('svg (large figure)',lx, ly);ly-=dy;
|
|
|
|
ctx.fillText('HTML [link]',lx, ly);ly-=dy;
|
|
|
|
lx = canvas.width - 15.8*edge;
|
|
ly = canvas.height - edge*10.1;
|
|
ctx.fillText('svg+png',lx, ly);ly-=dy;
|
|
ctx.fillText('svg+png(small fig)',lx, ly);ly-=dy;
|
|
ctx.fillText('svg+png(large fig)',lx, ly);ly-=dy;
|
|
|
|
} else {
|
|
graph.drawexportmenu = false;
|
|
}
|
|
}
|
|
|
|
if (graph.drawcaptionmenu){
|
|
if (x>canvas.width-4*edge && y < edge*10){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.beginPath();
|
|
ctx.rect(canvas.width-4*edge,0,edge*4,edge*10);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
ctx.fillText('captions',canvas.width-3.8*edge, 0.8*edge);
|
|
ctx.fillText('Show/Hide',canvas.width-3.8*edge, 1.8*edge);
|
|
|
|
ctx.fillText('x',canvas.width-3.8*edge, 2.8*edge);
|
|
ctx.fillText('y',canvas.width-1.8*edge, 2.8*edge);
|
|
|
|
ctx.fillText('First',canvas.width-3.8*edge, 3.8*edge);
|
|
ctx.fillText('Last',canvas.width-3.8*edge, 4.8*edge);
|
|
ctx.fillText('Min',canvas.width-3.8*edge, 5.8*edge);
|
|
ctx.fillText('Max',canvas.width-3.8*edge, 6.8*edge);
|
|
ctx.fillText('First',canvas.width-1.8*edge, 3.8*edge);
|
|
ctx.fillText('Last',canvas.width-1.8*edge, 4.8*edge);
|
|
ctx.fillText('Min',canvas.width-1.8*edge, 5.8*edge);
|
|
ctx.fillText('Max',canvas.width-1.8*edge, 6.8*edge);
|
|
ctx.fillText('None',canvas.width-2.8*edge, 7.8*edge);
|
|
ctx.fillText('Extra Precision:',canvas.width-3.8*edge, 8.8*edge);
|
|
ctx.fillText(gs.captions_extra_precision,canvas.width-3.8*edge, 9.8*edge);
|
|
ctx.fillText('[-]',canvas.width-1.8*edge, 9.8*edge);
|
|
ctx.fillText('[+]',canvas.width-0.8*edge, 9.8*edge);
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(canvas.width-4*edge,edge);
|
|
ctx.lineTo(canvas.width,edge);
|
|
ctx.moveTo(canvas.width-4*edge,2*edge);
|
|
ctx.lineTo(canvas.width,2*edge);
|
|
ctx.moveTo(canvas.width-4*edge,3*edge);
|
|
ctx.lineTo(canvas.width,3*edge);
|
|
ctx.moveTo(canvas.width-2*edge,2*edge);
|
|
ctx.lineTo(canvas.width-2*edge,7*edge);
|
|
ctx.moveTo(canvas.width-4*edge,8*edge);
|
|
ctx.lineTo(canvas.width,8*edge);
|
|
ctx.stroke();
|
|
|
|
} else {
|
|
graph.drawcaptionmenu = false;
|
|
}
|
|
}
|
|
|
|
//draw fx menue
|
|
if (graph.drawfxmenu){
|
|
|
|
if (x>8*edge && x<22*edge && y > canvas.height-edge*14){
|
|
//f() button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(8*edge,canvas.height-edge*14,edge*14,edge*14);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
ctx.fillText('functions',8.2*edge, canvas.height - edge*0.3);
|
|
ctx.stroke();
|
|
|
|
//the lines seperating buttons
|
|
ctx.beginPath();
|
|
for (var i = 1;i<14;i++){
|
|
ctx.moveTo(edge*8,canvas.height - edge*i);
|
|
ctx.lineTo(edge*22,canvas.height - edge*i);
|
|
}
|
|
ctx.moveTo(edge*12,canvas.height);
|
|
ctx.lineTo(edge*12,canvas.height - edge*14);
|
|
ctx.moveTo(edge*16,canvas.height);
|
|
ctx.lineTo(edge*16,canvas.height - edge*14);
|
|
ctx.moveTo(edge*10,canvas.height - edge*9);
|
|
ctx.lineTo(edge*10,canvas.height - edge*13);
|
|
ctx.moveTo(edge*10,canvas.height - edge*4);
|
|
ctx.lineTo(edge*10,canvas.height - edge*5);
|
|
ctx.moveTo(edge*14,canvas.height - edge*9);
|
|
ctx.lineTo(edge*14,canvas.height - edge*13);
|
|
ctx.moveTo(edge*14,canvas.height - edge*3);
|
|
ctx.lineTo(edge*14,canvas.height - edge*5);
|
|
ctx.stroke();
|
|
|
|
ctx.fillText('reset',8.2*edge, canvas.height - edge*1.3);
|
|
ctx.fillText('cut',8.2*edge, canvas.height - edge*2.3);
|
|
ctx.fillText('norm(y)',8.2*edge, canvas.height - edge*3.3);
|
|
ctx.fillText('y-c',8.2*edge, canvas.height - edge*4.3);
|
|
ctx.fillText('x-c',10.2*edge, canvas.height - edge*4.3);
|
|
|
|
ctx.fillText('smooth',8.2*edge, canvas.height - edge*5.3);
|
|
ctx.fillText('interpolate',8.2*edge, canvas.height - edge*6.3);
|
|
ctx.fillText('-(mx+c)',8.2*edge, canvas.height - edge*7.3);
|
|
ctx.fillText('dy/dx',8.2*edge, canvas.height - edge*8.3);
|
|
ctx.fillText('ln x',8.2*edge, canvas.height - edge*9.3);
|
|
ctx.fillText('e^x',10.2*edge, canvas.height - edge*9.3);
|
|
ctx.fillText('log x',8.2*edge, canvas.height - edge*10.3);
|
|
ctx.fillText('10^x',10.2*edge, canvas.height - edge*10.3);
|
|
ctx.fillText('10x',8.2*edge, canvas.height - edge*11.3);
|
|
ctx.fillText('x/10',10.2*edge, canvas.height - edge*11.3);
|
|
ctx.fillText('-x',8.2*edge, canvas.height - edge*12.3);
|
|
ctx.fillText('1/x',10.2*edge, canvas.height - edge*12.3);
|
|
ctx.fillText('x<->y',12.2*edge, canvas.height - edge*1.3);
|
|
ctx.fillText('trim',12.2*edge, canvas.height - edge*2.3);
|
|
ctx.fillText('x^n',12.2*edge, canvas.height - edge*3.3);
|
|
ctx.fillText('y^n',14.2*edge, canvas.height - edge*3.3);
|
|
ctx.fillText('rt x',12.2*edge, canvas.height - edge*4.3);
|
|
ctx.fillText('rt y',14.2*edge, canvas.height - edge*4.3);
|
|
ctx.fillText('sum',12.2*edge, canvas.height - edge*5.3);
|
|
//ctx.fillText('B-A',14.2*edge, canvas.height - edge*5.3);
|
|
ctx.fillText('jitter(y)',12.2*edge, canvas.height - edge*6.3);
|
|
ctx.fillText('Hist',12.2*edge, canvas.height - edge*7.3);
|
|
ctx.fillText('Intergrate',12.2*edge, canvas.height - edge*8.3);
|
|
ctx.fillText('ln y',12.2*edge, canvas.height - edge*9.3);
|
|
ctx.fillText('e^y',14.2*edge, canvas.height - edge*9.3);
|
|
ctx.fillText('log y',12.2*edge, canvas.height - edge*10.3);
|
|
ctx.fillText('10^y',14.2*edge, canvas.height - edge*10.3);
|
|
ctx.fillText('10y',12.2*edge, canvas.height - edge*11.3);
|
|
ctx.fillText('y/10',14.2*edge, canvas.height - edge*11.3);
|
|
ctx.fillText('-y',12.2*edge, canvas.height - edge*12.3);
|
|
ctx.fillText('1/y',14.2*edge, canvas.height - edge*12.3);
|
|
ctx.fillText('pop',12.2*edge, canvas.height - edge*0.3);
|
|
ctx.fillText('y vs y',8.2*edge, canvas.height - edge*13.3);
|
|
|
|
ctx.fillText('sub fit',16.2*edge, canvas.height - edge*13.3);
|
|
ctx.fillText('rmv outliers',16.2*edge, canvas.height - edge*12.3);
|
|
ctx.fillText('keep outliers',16.2*edge, canvas.height - edge*11.3);
|
|
ctx.fillText('custom y=f(x,y)',16.2*edge, canvas.height - edge*10.3);
|
|
ctx.fillText('custom filter',16.2*edge, canvas.height - edge*9.3);
|
|
|
|
ctx.fillText('accumulate(y)',16.2*edge, canvas.height - edge*4.3);
|
|
ctx.fillText('view last n',16.2*edge, canvas.height - edge*3.3);
|
|
ctx.fillText('(y - mean)/sigma',16.2*edge, canvas.height - edge*2.3);
|
|
ctx.fillText('x spacing',16.2*edge, canvas.height - edge*1.3);
|
|
ctx.fillText('time->number',16.2*edge, canvas.height - edge*0.3);
|
|
} else {
|
|
graph.drawfxmenu = false;
|
|
}
|
|
}
|
|
|
|
if (graph.drawtimemenu){
|
|
graph.drawfxmenu = false;
|
|
if (x>10*edge && x<20*edge && y > canvas.height-edge*6){
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.beginPath();
|
|
ctx.rect(10*edge,canvas.height-edge*6,edge*10,edge*6);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
ctx.fillText('time->number',10.2*edge, canvas.height - edge*0.3);
|
|
|
|
var timeoptionsstrings = [['days','hours','mins','sec'],['now','ago','start','end']];
|
|
var lx = 10.2*edge;
|
|
var ldx = 2*edge;
|
|
var ly = canvas.height - edge*3.3;
|
|
var ldy = edge;
|
|
|
|
for (var i = 0;i<2;i++){
|
|
for (var j = 0;j<4;j++){
|
|
var label = timeoptionsstrings[i][j];
|
|
if (graph.timemenuoptions[i] == j ){
|
|
label = '['+label+']';
|
|
} else
|
|
{
|
|
label = ' '+label+' ';
|
|
}
|
|
ctx.fillText(label,lx+j*ldx, ly -i*ldy);
|
|
}
|
|
}
|
|
ctx.fillText('Pick reference and unit',lx, ly -2*ldy);
|
|
ctx.fillText('apply on x',lx, ly +2*ldy);
|
|
ctx.fillText('apply on y',lx+3*ldx, ly +2*ldy);
|
|
|
|
} else {
|
|
graph.drawtimemenu = false;
|
|
}
|
|
}
|
|
|
|
//draw line menu buttons
|
|
if (graph.drawlinemenu){
|
|
//get number of lines
|
|
var no_of_lines = graph.data_backup.length;
|
|
for (var i = 0;i<no_of_lines;i++){
|
|
gs.hidden_lines[i] = gs.hidden_lines[i] || false;
|
|
|
|
}
|
|
//add in the number of function lines
|
|
var no_of_function_lines = gs.function_lines.length;
|
|
|
|
//draw the menu
|
|
if (x>11*edge && x<21*edge && y > canvas.height-edge*(no_of_lines+no_of_function_lines+2)){
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
//box
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(11*edge,canvas.height-edge*(no_of_lines+no_of_function_lines+2),edge*10,edge*(no_of_lines+no_of_function_lines+2));
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(edge*11,canvas.height - edge);
|
|
ctx.lineTo(edge*21,canvas.height - edge);
|
|
ctx.moveTo(edge*11,canvas.height - edge*(no_of_lines+1));
|
|
ctx.lineTo(edge*21,canvas.height - edge*(no_of_lines+1));
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.fillText('line menu',11.2*edge+0.2, canvas.height -edge*0.2);
|
|
var ly = canvas.height - no_of_lines*edge - 0.2*edge;
|
|
var lx = 13.2*edge+0.2;
|
|
for (var i = 0;i<no_of_function_lines;i++){
|
|
ly -= edge;
|
|
ctx.fillText(gs.function_lines[i],lx, ly);
|
|
ctx.fillText( '(-) ' ,11.2*edge+0.2, ly);
|
|
|
|
}
|
|
ly -= edge;
|
|
ctx.fillText( 'new function line',lx, ly);
|
|
|
|
for (var i = no_of_lines-1;i+1>0;i--){
|
|
var label = graph.captions_backup[i] || 'label' ;
|
|
ctx.fillStyle = graph.colors_backup[i];
|
|
ctx.fillText(label,13.2*edge+0.2, canvas.height -no_of_lines*edge + edge*(i-0.2));
|
|
//show or hide button
|
|
if (gs.hidden_lines[i]){
|
|
ctx.fillText('( )',11.2*edge+0.2, canvas.height - no_of_lines*edge + edge*(i-0.2));
|
|
} else {
|
|
ctx.fillText('(+)',11.2*edge+0.2, canvas.height - no_of_lines*edge + edge*(i-0.2));
|
|
}
|
|
ctx.beginPath();
|
|
ctx.rect(20.2*edge,canvas.height - no_of_lines*edge + edge*(i-0.8),0.6*edge,0.6*edge);
|
|
ctx.fill();
|
|
ctx.beginPath();
|
|
ctx.rect(19.2*edge,canvas.height - no_of_lines*edge + edge*(i-0.8),0.6*edge,0.6*edge);
|
|
ctx.stroke();
|
|
|
|
}
|
|
ctx.fillStyle = gs.color_fg;
|
|
//all button
|
|
//none button
|
|
ctx.fillText('all',15.2*edge+0.2, canvas.height -edge*0.2);
|
|
ctx.fillText('none',17.2*edge+0.2, canvas.height -edge*0.2);
|
|
|
|
}else {
|
|
graph.drawlinemenu = false;
|
|
}
|
|
|
|
}
|
|
|
|
//draw fit's menu buttons
|
|
if (graph.drawfitsmenu){
|
|
if (x>15*edge && x<21*edge && y > canvas.height-edge*10){
|
|
//f() button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(15*edge,canvas.height-edge*10,edge*6,edge*10);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
|
|
var label = '';
|
|
if (gs.extrapolate){
|
|
label = '(+) extrapolate';
|
|
} else {
|
|
label = '( ) extrapolate';
|
|
}
|
|
var lx = 18.2*edge;
|
|
var ly= canvas.height - edge*0.3;
|
|
var dly = edge;
|
|
ctx.fillText('none',lx, ly);ly-=dly;
|
|
ly-=dly;//extrapolate takes up two.
|
|
ctx.fillText('stats',lx, ly);ly-=dly;
|
|
ctx.fillText('ae^bx',lx, ly);ly-=dly;
|
|
ctx.fillText('a+be^cx',lx, ly);ly-=dly;
|
|
ctx.fillText('a+blnx',lx, ly);ly-=dly;
|
|
ctx.fillText('ax^b',lx, ly);ly-=dly;
|
|
ctx.fillText('a+bx^c',lx, ly);ly-=dly;
|
|
ctx.fillText('gauss',lx, ly);ly-=dly;
|
|
lx = 15.2*edge;
|
|
ly = canvas.height - edge*0.3;
|
|
ctx.fillText('fits',lx, ly);ly-=dly;
|
|
ctx.fillText(label,lx, ly);ly-=dly;
|
|
ctx.fillText('y=c',lx, ly);ly-=dly;
|
|
ctx.fillText('linear',lx, ly);ly-=dly;
|
|
ctx.fillText('quad',lx,ly);ly-=dly;
|
|
ctx.fillText('cubic',lx, ly);ly-=dly;
|
|
ctx.fillText('poly 4',lx, ly);ly-=dly;
|
|
ctx.fillText('poly 5',lx,ly);ly-=dly;
|
|
ctx.fillText('poly 6',lx, ly);ly-=dly;
|
|
ctx.fillText('poly 7',lx,ly);ly-=dly;
|
|
|
|
} else {
|
|
graph.drawfitsmenu = false;
|
|
}
|
|
}
|
|
//the x and y menu should not be under the button. Don't draw if the menus are open.
|
|
if (graph.ui.touch && graph.ui.is_touching && (gs.mouse_mode === 'zoom' || gs.mouse_mode === 'drag') && !( graph.drawxmenu || graph.drawymenu) ){
|
|
//big zoom out button
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(0,canvas.height-2*edge,edge*4,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
if (gs.mouse_mode === 'zoom'){
|
|
ctx.rect(0,canvas.height-3*edge,edge*4,edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
}
|
|
ctx.fillStyle = gs.color_fg;
|
|
//ctx.font= (0.55*edge) + 'px ' + gs.font_name;//"24px Courier New";
|
|
|
|
ctx.fillText('Auto Zoom',0.2*edge, canvas.height - edge*1.3);
|
|
if (gs.mouse_mode === 'zoom'){
|
|
ctx.fillText('Zoom out',0.2*edge, canvas.height - edge*2.3);
|
|
}
|
|
}
|
|
|
|
if (graph.ui.touch && graph.ui.is_touching ){
|
|
//draw the bit under the finger. in the middle
|
|
var image = ctx.getImageData(x-2*edge,y-2*edge,edge*4,4*edge);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,y);
|
|
ctx.lineTo(canvas.width/2,canvas.height/2);
|
|
ctx.stroke();
|
|
//the bit is 4edge by 4edge. the boarder has 2px on each side as well.
|
|
ctx.rect(canvas.width/2-2*edge-2,canvas.height/2-2*edge-2,4*edge+4,4*edge+4);
|
|
ctx.stroke();
|
|
ctx.putImageData(image,canvas.width/2-2*edge,canvas.height/2-2*edge);
|
|
ctx.beginPath();
|
|
var cd = Math.max(0.1*edge,2); //center dot size
|
|
ctx.rect(canvas.width/2-cd,canvas.height/2-cd,2*cd,2*cd);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
|
|
if (mouse_down && gs.mouse_mode === 'zoom'){
|
|
//is dragging for zoom
|
|
end_x = x;
|
|
end_y = y;
|
|
//draw bounding box
|
|
ctx.beginPath();
|
|
ctx.rect(start_x+1,start_y+1,end_x-start_x-1,end_y-start_y-1);
|
|
ctx.moveTo(start_x,0);
|
|
ctx.lineTo(start_x,2*edge);
|
|
ctx.moveTo(start_x,canvas.height);
|
|
ctx.lineTo(start_x,canvas.height-2*edge);
|
|
ctx.moveTo(end_x,canvas.height);
|
|
ctx.lineTo(end_x,canvas.height-2*edge);
|
|
ctx.moveTo(end_x,0);
|
|
ctx.lineTo(end_x,2*edge);
|
|
|
|
ctx.moveTo(0,start_y);
|
|
ctx.lineTo(2*edge,start_y);
|
|
ctx.moveTo(canvas.width-2*edge,start_y);
|
|
ctx.lineTo(canvas.width,start_y);
|
|
|
|
ctx.moveTo(0,end_y);
|
|
ctx.lineTo(2*edge,end_y);
|
|
ctx.moveTo(canvas.width-2*edge,end_y);
|
|
ctx.lineTo(canvas.width,end_y);
|
|
ctx.stroke();
|
|
|
|
//this is a hack to get the screen to redraw correctly.
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (mouse_down && gs.mouse_mode === 'drag'){
|
|
//is dragging
|
|
|
|
if (graph.ui.is_touching){
|
|
|
|
is_touch_dragging = true;
|
|
start_x = 0.5*(touch_start_x[0]+touch_start_x[1]);
|
|
start_y = 0.5*(touch_start_y[0]+touch_start_y[1]);
|
|
|
|
end_x = 0.5*(touch_x[0]+touch_x[1]);
|
|
end_y = 0.5*(touch_y[0]+touch_y[1]);
|
|
|
|
scale_x = (touch_x[0]-touch_x[1]) / (touch_start_x[0]-touch_start_x[1]);
|
|
scale_y = (touch_y[0]-touch_y[1]) / (touch_start_y[0]-touch_start_y[1]);
|
|
scale_x = trim(Math.abs(scale_x),0.1,10);
|
|
scale_y = trim(Math.abs(scale_y),0.1,10);
|
|
|
|
ctx.putImageData(graph.graph_image_for_drag,0,0);
|
|
ctx.save();
|
|
ctx.translate((start_x) ,(start_y) );
|
|
ctx.scale(scale_x,scale_y);
|
|
ctx.translate((end_x-start_x)/scale_x ,(end_y-start_y)/scale_y );
|
|
//draw the canvas on its self. Crazy.
|
|
ctx.drawImage(canvas, -start_x, -start_y);// this dam line too me ages to figure out.
|
|
|
|
ctx.restore();
|
|
} else {
|
|
end_x = x;
|
|
end_y = y;
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.putImageData(graph.graph_image_for_drag,end_x-start_x,end_y-start_y);
|
|
}
|
|
}
|
|
if (mouse_down && gs.mouse_mode === 'measure'){
|
|
ctx.beginPath();
|
|
ctx.moveTo(start_x,start_y);
|
|
ctx.lineTo(x,y);
|
|
ctx.stroke();
|
|
dx = x - start_x;
|
|
dy = y - start_y;
|
|
px = graph.pixels_to_units(x,'x');
|
|
py = graph.pixels_to_units(y,'y');
|
|
px_start = graph.pixels_to_units(start_x,'x');
|
|
py_start = graph.pixels_to_units(start_y,'y');
|
|
|
|
label = graph.get_axis_string(px,'x');
|
|
ctx.fillText(label,x+cs,canvas.height-1.5*edge);
|
|
|
|
label = graph.get_axis_string(py,'y');
|
|
ctx.fillText(label,2*edge,y-cs*2);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,canvas.height);
|
|
ctx.lineTo(x,canvas.height - 1.5*edge );
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,2*edge);
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(2*edge,y);
|
|
ctx.moveTo(canvas.width,y);
|
|
ctx.lineTo(canvas.width-2*edge,y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
label = graph.get_axis_string(px_start,'x');
|
|
ctx.fillText(label,start_x+cs,canvas.height-2*edge);
|
|
label = graph.get_axis_string(py_start,'y');
|
|
ctx.fillText(label,2*edge,start_y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(start_x,canvas.height);
|
|
ctx.lineTo(start_x,canvas.height - 2*edge );
|
|
ctx.moveTo(start_x,0);
|
|
ctx.lineTo(start_x,2*edge);
|
|
ctx.moveTo(0,start_y);
|
|
ctx.lineTo(2*edge,start_y);
|
|
ctx.moveTo(canvas.width,start_y);
|
|
ctx.lineTo(canvas.width-2*edge,start_y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
|
|
//show dx infomation
|
|
if (dx > edge/2 || dx < -edge/2){
|
|
x_meas = Math.min(y,start_y)-edge;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,x_meas-0.3*edge);
|
|
ctx.lineTo(x,x_meas+0.3*edge);
|
|
ctx.moveTo(start_x,x_meas-0.3*edge);
|
|
ctx.lineTo(start_x,x_meas+0.3*edge);
|
|
ctx.moveTo(x,x_meas);
|
|
ctx.lineTo(start_x,x_meas);
|
|
ctx.stroke();
|
|
|
|
|
|
if (gs.x_scale_mode === 'time'){
|
|
label = mjs_time_difference_print(px-px_start);
|
|
} else {
|
|
label = graph.get_axis_string(px-px_start,'x');
|
|
}
|
|
|
|
ctx.fillText(label,(x+start_x)/2-.3*gs.scaling_factor*gs.axis_labels_font_size*label.length,x_meas-.4*gs.axis_labels_font_size);
|
|
|
|
}
|
|
|
|
//show dy infomation
|
|
if (dy > edge/2 || dy < -edge/2){
|
|
y_meas = Math.min(x,start_x)-edge;
|
|
//label = mjs_precision(py-py_start, gs.y_precision );
|
|
|
|
if (gs.y_scale_mode === 'time'){
|
|
label = mjs_time_difference_print(py-py_start);
|
|
} else {
|
|
label = graph.get_axis_string(py-py_start,'y');
|
|
}
|
|
|
|
label_pos = y_meas - .7*gs.axis_labels_font_size*gs.scaling_factor*label.length;
|
|
ctx.beginPath();
|
|
ctx.moveTo(y_meas-0.3*edge,y);
|
|
ctx.lineTo(y_meas+0.3*edge,y);
|
|
ctx.moveTo(y_meas-0.3*edge,start_y);
|
|
ctx.lineTo(y_meas+0.3*edge,start_y);
|
|
ctx.moveTo(y_meas,y);
|
|
ctx.lineTo(y_meas,start_y);
|
|
ctx.stroke();
|
|
ctx.fillText(label,label_pos,(y+start_y)/2);
|
|
}
|
|
//show grad
|
|
if ((dx > edge/2 || dx < -edge/2) && (dy > edge/2 || dy < -edge/2)){
|
|
grad = (py-py_start) / (px-px_start);
|
|
|
|
var unit = '';
|
|
if ( (gs.y_scale_mode === 'lin' || gs.y_scale_mode === 'log' ) && gs.x_scale_mode === 'time'){
|
|
unit = '/ms';
|
|
|
|
if (Math.abs(grad)<1){grad*=1000; unit='/s';}
|
|
if (Math.abs(grad)<1){grad*=60; unit='/m';}
|
|
if (Math.abs(grad)<1){grad*=60; unit='/h';}
|
|
if (Math.abs(grad)<1){grad*=24; unit='/d';}
|
|
grad = mjs_precision(grad,5);
|
|
}
|
|
else {
|
|
grad = mjs_precision(grad, Math.min(gs.y_precision,gs.x_precision));
|
|
}
|
|
ctx.fillText('g = ' + grad+unit,x+cs,y-cs);
|
|
//show tau if semi log y graph.
|
|
if ( gs.y_scale_mode === 'log' && (gs.x_scale_mode === 'lin' || gs.x_scale_mode === 'time' )){
|
|
var tau = (Math.log10(py)-Math.log10(py_start)) / (px-px_start);
|
|
|
|
if ( gs.x_scale_mode === 'time'){
|
|
|
|
unit = '/ms';
|
|
if (Math.abs(tau)<1){tau*=1000; unit='/s';}
|
|
if (Math.abs(tau)<1){tau*=60; unit='/m';}
|
|
if (Math.abs(tau)<1){tau*=60; unit='/h';}
|
|
if (Math.abs(tau)<1){tau*=24; unit='/d';}
|
|
tau = mjs_precision(tau,5);
|
|
|
|
} else {
|
|
unit = '';
|
|
tau = mjs_precision(tau, Math.min(gs.y_precision,gs.x_precision));
|
|
|
|
}
|
|
ctx.fillText('tau =' + tau+unit,x+cs,y+cs);
|
|
|
|
var n = Math.ceil(Math.max(dx,dy)/4);
|
|
|
|
ctx.beginPath();
|
|
for (var k = 0;k<n;k++){
|
|
var yi = graph.units_to_pixels(py_start+k*(py-py_start)/n,'y');
|
|
var xi = graph.units_to_pixels(px_start+k*(px-px_start)/n,'x');
|
|
ctx.moveTo(xi,yi);
|
|
var yi = graph.units_to_pixels(py_start+(k+1)*(py-py_start)/n,'y');
|
|
var xi = graph.units_to_pixels(px_start+(k+1)*(px-px_start)/n,'x');
|
|
ctx.lineTo(xi,yi);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
//show powerlaw if log log graph.
|
|
if ( gs.y_scale_mode === 'log' && gs.x_scale_mode === 'log'){
|
|
var powerlaw = (Math.log10(py)-Math.log10(py_start)) / (Math.log10(px)-Math.log10(px_start));
|
|
powerlaw = mjs_precision(powerlaw, Math.min(gs.y_precision,gs.x_precision));
|
|
ctx.fillText('p =' + powerlaw,x+cs,y+cs);
|
|
|
|
var n = Math.ceil(Math.max(dx,dy)/2);
|
|
|
|
ctx.beginPath();
|
|
var yi = 0;
|
|
var xi = 0;
|
|
for (var k = 0;k<n;k++){
|
|
xi = Math.exp(Math.log(px_start)+k*(Math.log(px)-Math.log(px_start))/n);
|
|
yi = (xi-px_start) * grad+py_start;
|
|
xi = graph.units_to_pixels(xi,'x');
|
|
yi = graph.units_to_pixels(yi,'y');
|
|
ctx.moveTo(xi,yi);
|
|
xi = Math.exp(Math.log(px_start)+(k+1)*(Math.log(px)-Math.log(px_start))/n);
|
|
yi = (xi-px_start) * grad+py_start;
|
|
xi = graph.units_to_pixels(xi,'x');
|
|
yi = graph.units_to_pixels(yi,'y');
|
|
ctx.lineTo(xi,yi);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (mouse_down && gs.mouse_mode === 'trim'){
|
|
//is dragging for trim
|
|
end_x = x;
|
|
end_y = y;
|
|
//draw bounding box
|
|
ctx.beginPath();
|
|
ctx.rect(start_x,start_y,end_x-start_x,end_y-start_y);
|
|
ctx.stroke();
|
|
//this is a hack to get the screen to redraw correctly.
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (mouse_down && gs.mouse_mode === 'cut'){
|
|
//is dragging for cut
|
|
end_x = x;
|
|
end_y = y;
|
|
//draw bounding box
|
|
ctx.beginPath();
|
|
ctx.rect(start_x,start_y,end_x-start_x,end_y-start_y);
|
|
ctx.stroke();
|
|
//this is a hack to get the screen to redraw correctly.
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (mouse_down && gs.mouse_mode === 'x-c'){
|
|
label = mjs_precision(px,gs.y_precision+1);
|
|
ctx.fillText('x-'+label,x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,canvas.height);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (mouse_down && gs.mouse_mode === 'y-c'){
|
|
label = mjs_precision(py,gs.y_precision+1);
|
|
ctx.fillText('y-'+label,x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
if (mouse_down && gs.mouse_mode === 'sublin'){
|
|
ctx.fillText('draw line to subtract',x+cs*2,y-cs*2);
|
|
ctx.beginPath();
|
|
ctx.moveTo(start_x,start_y);
|
|
ctx.lineTo(x,y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (mouse_down && gs.mouse_mode === 'mouse'){
|
|
|
|
graph.ui.mouse_is_dragging = false;
|
|
|
|
//distance from fit text handle
|
|
var d = Math.sqrt(Math.pow(start_x-gs.fit_text_position.x*canvas.width,2)+Math.pow(start_y-gs.fit_text_position.y*canvas.height,2));
|
|
if (d<2*cs){
|
|
ctx.beginPath();
|
|
ctx.moveTo(start_x,start_y);
|
|
ctx.lineTo(x,y);
|
|
ctx.stroke();
|
|
graph.ui.mouse_is_dragging = true;
|
|
graph.ui.drag_object = 'fit_text';
|
|
return;
|
|
}
|
|
|
|
//distance from title spacing handle
|
|
d = Math.sqrt(Math.pow(start_x-canvas.width/2,2)+Math.pow((start_y-(gs.tick_len+gs.title_spacing+gs.title_font_size)*gs.scaling_factor),2));
|
|
if (d<2*cs){
|
|
ctx.beginPath();
|
|
ctx.moveTo(canvas.width/2,start_y);
|
|
ctx.lineTo(canvas.width/2,y); //force a vertical line
|
|
ctx.stroke();
|
|
graph.ui.mouse_is_dragging = true;
|
|
graph.ui.drag_object = 'title_spacing';
|
|
return;
|
|
}
|
|
//distance from caption handle
|
|
var cap_x = gs.scaling_factor*gs.caption_position.x;
|
|
if (gs.caption_position.x>0){
|
|
cap_x += gs.scaling_factor*gs.tick_len;
|
|
} else {
|
|
cap_x = canvas.width + cap_x;
|
|
cap_x -= gs.scaling_factor*gs.tick_len;
|
|
}
|
|
cap_y = gs.scaling_factor*gs.caption_position.y;
|
|
if (gs.caption_position.y>0){
|
|
//going down from top
|
|
cap_y += gs.scaling_factor*gs.tick_len;
|
|
} else {
|
|
//up from botton
|
|
cap_y = canvas.height + cap_y;
|
|
cap_y -= gs.scaling_factor*gs.tick_len;
|
|
}
|
|
d = Math.sqrt(Math.pow(start_x-cap_x,2) + Math.pow(start_y-cap_y,2));
|
|
if (d<2*cs){
|
|
ctx.beginPath();
|
|
ctx.moveTo(start_x,start_y);
|
|
ctx.lineTo(x,y);
|
|
ctx.stroke();
|
|
|
|
var l = 2*cs;
|
|
ctx.beginPath();
|
|
|
|
if (x>canvas.width/2 && y>canvas.height/2){
|
|
ctx.moveTo(x-l,y);ctx.lineTo(x,y);ctx.lineTo(x,y-l);
|
|
}
|
|
if (x>canvas.width/2 && y<canvas.height/2){
|
|
ctx.moveTo(x-l,y);ctx.lineTo(x,y);ctx.lineTo(x,y+l);
|
|
}
|
|
if (x<canvas.width/2 && y>canvas.height/2){
|
|
ctx.moveTo(x+l,y);ctx.lineTo(x,y);ctx.lineTo(x,y-l);
|
|
}
|
|
if (x<canvas.width/2 && y<canvas.height/2){
|
|
ctx.moveTo(x+l,y);ctx.lineTo(x,y);ctx.lineTo(x,y+l);
|
|
}
|
|
ctx.stroke();
|
|
|
|
graph.ui.mouse_is_dragging = true;
|
|
graph.ui.drag_object = 'caption_position';
|
|
|
|
return;
|
|
}
|
|
|
|
//go through the markers and find the item being clicked
|
|
var best = 1e200;
|
|
var bi = 0;
|
|
var bj = 0;
|
|
var d = 1e200;
|
|
for (var i=0;i<gs.markers.length;i++){
|
|
var m = gs.markers[i];
|
|
for (var j=0;j<m.handles.length;j++){
|
|
d = Math.sqrt( Math.pow(start_x - graph.units_to_pixels(m.handles[j][0],'x'),2) +
|
|
Math.pow(start_y - graph.units_to_pixels(m.handles[j][1],'y'),2));
|
|
if (d<best){
|
|
best = d;
|
|
bi = i;
|
|
bj = j;
|
|
}
|
|
|
|
}
|
|
}
|
|
if (best<2*cs){
|
|
//have picked up a marker by it's handle, i , j
|
|
graph.ui.mouse_is_dragging = true;
|
|
graph.ui.drag_object = {item:'marker',i:bi,j:bj};
|
|
|
|
//draw vertical and horisontal
|
|
ctx.beginPath();
|
|
ctx.moveTo(graph.units_to_pixels(gs.markers[bi].handles[bj][0],'x'),
|
|
graph.units_to_pixels(gs.markers[bi].handles[bj][1],'y'));
|
|
ctx.lineTo(x,y);
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,canvas.height);
|
|
ctx.stroke();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (mouse_down && (gs.mouse_mode === 'addmarkerline' ||
|
|
gs.mouse_mode === 'addmarkerlinentext' ||
|
|
gs.mouse_mode === 'addmarkerarrow' ||
|
|
gs.mouse_mode === 'addmarkerarrowntext'
|
|
)
|
|
){
|
|
ctx.beginPath();
|
|
ctx.moveTo(start_x,start_y);
|
|
ctx.lineTo(x,y);
|
|
ctx.stroke();
|
|
}
|
|
if (mouse_down && (gs.mouse_mode === 'addmarkerbox' || gs.mouse_mode === 'addmarkerboxntext')){
|
|
ctx.beginPath();
|
|
ctx.rect(start_x+1,start_y+1,x-start_x-1,y-start_y-1);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function mouse_down_event(event,graph){
|
|
mouse_down = true;
|
|
var canvas = graph.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
var rect = canvas.getBoundingClientRect();
|
|
start_x = event.clientX - rect.left;
|
|
start_y = event.clientY - rect.top;
|
|
//freeze the scaling stuff in place for the duration of the drag
|
|
drag_x_max = graph.pixels_to_units(canvas.width,'x');
|
|
drag_x_min = graph.pixels_to_units(0,'x');
|
|
drag_y_max = graph.pixels_to_units(0,'y');
|
|
drag_y_min = graph.pixels_to_units(canvas.height,'y');
|
|
}
|
|
var dotcount = 0;
|
|
|
|
function mouse_out_event(event,graph){
|
|
var canvas = graph.canvas;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.putImageData(graph.graph_image,0,0);
|
|
graph.drawfxmenu = false;
|
|
graph.drawlinemenu = false;
|
|
graph.drawmodemenu=false;
|
|
graph.drawfitsmenu = false;
|
|
graph.drawtimemenu = false;
|
|
graph.drawgraphmenu = false;
|
|
graph.drawcaptionmenu=false;
|
|
graph.drawxmenu=false;
|
|
graph.drawymenu=false;
|
|
if (graph.graphics_style.o == 1 ){
|
|
graph.graphics_style.mouse_mode = graph.pre_mouse_mode;
|
|
graph.graphics_style.o = 0;
|
|
}
|
|
}
|
|
|
|
function keypress_event(event,graph){
|
|
console.log('in keypress');
|
|
var c = String.fromCharCode(event.keyCode || event.charCode);
|
|
console.log(c);
|
|
console.log('in keypress');
|
|
}
|
|
|
|
function mouse_up_event(event,graph){
|
|
"use strict";
|
|
var canvas = graph.canvas;
|
|
var gs = graph.graphics_style;
|
|
var ctx = canvas.getContext('2d');
|
|
mouse_down = false;
|
|
var rect = canvas.getBoundingClientRect();
|
|
var end_x = event.clientX - rect.left;
|
|
var end_y = event.clientY - rect.top;
|
|
|
|
var no_drag_size = gs.tick_len;
|
|
var edge = graph.ui.size;
|
|
//zooming with rectangle.
|
|
if (gs.mouse_mode === 'zoom'){
|
|
|
|
if (Math.abs(start_x - end_x) > no_drag_size && Math.abs(start_y - end_y) > no_drag_size){
|
|
console.log('mouse zoom');
|
|
start_x = graph.pixels_to_units(start_x,'x');
|
|
start_y = graph.pixels_to_units(start_y,'y');
|
|
end_x = graph.pixels_to_units(end_x,'x');
|
|
end_y = graph.pixels_to_units(end_y,'y');
|
|
|
|
gs.x_manual_min = Math.min(start_x,end_x);
|
|
gs.x_manual_max = Math.max(start_x,end_x);
|
|
gs.y_manual_min = Math.min(start_y,end_y);
|
|
gs.y_manual_max = Math.max(start_y,end_y);
|
|
gs.x_scale_auto_min = false;
|
|
gs.y_scale_auto_min = false;
|
|
gs.x_scale_auto_max = false;
|
|
gs.y_scale_auto_max = false;
|
|
gs.y_scale_tight = true;
|
|
gs.x_scale_tight = true;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
}
|
|
//touch zoom out button
|
|
if (graph.ui.touch && (gs.mouse_mode === 'zoom' || gs.mouse_mode === 'drag') && end_x < 4*edge && end_y >canvas.height-2*edge && end_y <canvas.height-1*edge ){
|
|
//document.getElementById('errors').innerHTML="zoom out button";
|
|
gs.y_scale_auto_min = true;
|
|
gs.y_scale_tight = false;
|
|
gs.y_scale_auto_max = true;
|
|
gs.y_scale_tight = false;
|
|
gs.x_scale_auto_min = true;
|
|
gs.x_scale_tight = false;
|
|
gs.x_scale_auto_max = true;
|
|
gs.x_scale_tight = false;
|
|
}
|
|
|
|
//touch zoom out button event.button === 2
|
|
if (graph.ui.touch && gs.mouse_mode === 'zoom' && end_x < 4*edge && end_y >canvas.height-3*edge && end_y <canvas.height-2*edge ){
|
|
event.button = 2;
|
|
}
|
|
|
|
|
|
if(graph.drawcaptionmenu){
|
|
var lx = Math.floor((canvas.width-end_x)/2/edge); //1 for left, 0 for right
|
|
var ly = Math.floor(end_y/edge);
|
|
graph.drawcaptionmenu=false;
|
|
if (ly==0){
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
if (ly==1){
|
|
gs.show_captions= !gs.show_captions;
|
|
}
|
|
if (ly==7){
|
|
gs.captions_display= "none";
|
|
}
|
|
if (lx ==1){
|
|
switch (ly){
|
|
case 3:
|
|
gs.captions_display = "xfirst";
|
|
break;
|
|
case 4:
|
|
gs.captions_display = "xlast";
|
|
break;
|
|
case 5:
|
|
gs.captions_display = "xmin";
|
|
break;
|
|
case 6:
|
|
gs.captions_display = "xmax";
|
|
break;
|
|
}
|
|
}
|
|
if (lx == 0){
|
|
switch (ly){
|
|
case 3:
|
|
gs.captions_display = "yfirst";
|
|
break;
|
|
case 4:
|
|
gs.captions_display = "ylast";
|
|
break;
|
|
case 5:
|
|
gs.captions_display = "ymin";
|
|
break;
|
|
case 6:
|
|
gs.captions_display = "ymax";
|
|
break;
|
|
}
|
|
}
|
|
if (ly >2 && ly<7){
|
|
gs.show_captions=true;
|
|
}
|
|
if (ly > 7){
|
|
graph.drawcaptionmenu=true;
|
|
if (end_x > canvas.width-edge){
|
|
gs.captions_extra_precision = Math.min(gs.captions_extra_precision + 1, 10);
|
|
} else if (end_x > canvas.width - 2*edge){
|
|
gs.captions_extra_precision = Math.max(0,gs.captions_extra_precision - 1);
|
|
}
|
|
}
|
|
graph.mjs_plot();
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
if (graph.drawxmenu){
|
|
var lx = Math.floor(end_x/edge);
|
|
var ly = Math.floor((canvas.height-end_y)/edge);
|
|
switch(ly){
|
|
case 0:
|
|
graph.drawxmenu = false
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
case 1:
|
|
if (lx < 8){
|
|
gs.x_scale_auto_min=true;
|
|
gs.x_scale_tight=false;
|
|
} else {
|
|
gs.x_scale_auto_min=false;
|
|
if (gs.x_scale_mode ==='time'){
|
|
var d = new Date(gs.x_manual_min);
|
|
var r = Date.parse( prompt("new low limit",d.toISOString() ) );
|
|
gs.x_manual_min = r || gs.x_manual_min;
|
|
} else {
|
|
gs.x_manual_min = getFloat("new low limit",gs.x_manual_min );
|
|
}
|
|
}
|
|
break;
|
|
case 2:
|
|
if (lx < 8){
|
|
gs.x_scale_auto_max=true;
|
|
gs.x_scale_tight=false;
|
|
} else {
|
|
gs.x_scale_auto_max=false;
|
|
if (gs.x_scale_mode ==='time'){
|
|
var d = new Date(gs.x_manual_max);
|
|
var r = Date.parse( prompt("new high limit",d.toISOString() ) );
|
|
gs.x_manual_max = r || gs.x_manual_max;
|
|
} else {
|
|
gs.x_manual_max = getFloat("new high limit",gs.x_manual_max );
|
|
}
|
|
}
|
|
break;
|
|
case 3:
|
|
if (lx < 6){
|
|
gs.x_scale_mode='lin';
|
|
} else if ( lx > 9) {
|
|
gs.x_scale_mode='time';
|
|
} else {
|
|
gs.x_scale_mode='log';
|
|
}
|
|
break;
|
|
case 4:
|
|
if (lx < 8){
|
|
gs.guideWidthx /= 1.5;
|
|
} else {
|
|
gs.guideWidthx *= 1.5;
|
|
}
|
|
break;
|
|
case 5:
|
|
if (lx < 6){
|
|
gs.x_label_mode='norm';
|
|
} else if ( lx >= 10) {
|
|
gs.x_label_mode='sci';
|
|
} else if ( lx >= 8) {
|
|
gs.x_label_mode='postfix';
|
|
} else {
|
|
gs.x_label_mode='infix';
|
|
}
|
|
console.log(gs.x_label_mode);
|
|
break;
|
|
case 6:
|
|
gs.x_axis_prefix = getString("new prefix",gs.x_axis_prefix);
|
|
break;
|
|
case 7:
|
|
gs.x_axis_postfix = getString("new postfix",gs.x_axis_postfix );
|
|
break;
|
|
case 8:
|
|
gs.x_axis_title = getString("new title",gs.x_axis_title );
|
|
graph.transform_index--;
|
|
break;
|
|
}
|
|
graph.mjs_plot();
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
if (graph.drawymenu){
|
|
var lx = Math.floor(end_x/edge)-2;
|
|
var ly = Math.floor((canvas.height-end_y)/edge);
|
|
switch(ly){
|
|
case 0:
|
|
graph.drawymenu = false
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
case 1:
|
|
if (lx < 8){
|
|
gs.y_scale_auto_min=true;
|
|
gs.y_scale_tight=false;
|
|
} else {
|
|
gs.y_scale_auto_min=false;
|
|
if (gs.y_scale_mode ==='time'){
|
|
var d = new Date(gs.y_manual_min);
|
|
var r = Date.parse( prompt("new low limit",d.toISOString() ) );
|
|
gs.y_manual_min = r || gs.y_manual_min;
|
|
} else {
|
|
gs.y_manual_min = getFloat("new low limit",gs.y_manual_min );
|
|
}
|
|
}
|
|
break;
|
|
case 2:
|
|
if (lx < 8){
|
|
gs.y_scale_auto_max=true;
|
|
gs.y_scale_tight=false;
|
|
} else {
|
|
gs.y_scale_auto_max=false;
|
|
if (gs.y_scale_mode ==='time'){
|
|
var d = new Date(gs.y_manual_max);
|
|
var r = Date.parse( prompt("new high limit",d.toISOString() ) );
|
|
gs.y_manual_max = r || gs.y_manual_max;
|
|
} else {
|
|
gs.y_manual_max =getFloat("new high limit",gs.y_manual_max )
|
|
}
|
|
}
|
|
break;
|
|
case 3:
|
|
if (lx < 6){
|
|
gs.y_scale_mode='lin';
|
|
} else if ( lx > 9) {
|
|
gs.y_scale_mode='time';
|
|
} else {
|
|
gs.y_scale_mode='log';
|
|
}
|
|
break;
|
|
case 4:
|
|
if (lx < 8){
|
|
gs.guideWidthy /= 1.5;
|
|
} else {
|
|
gs.guideWidthy *= 1.5;
|
|
}
|
|
break;
|
|
case 5:
|
|
if (lx < 6){
|
|
gs.y_label_mode='norm';
|
|
} else if ( lx >= 10) {
|
|
gs.y_label_mode='sci';
|
|
} else if ( lx >= 8) {
|
|
gs.y_label_mode='postfix';
|
|
} else {
|
|
gs.y_label_mode='infix';
|
|
}
|
|
console.log(gs.y_label_mode);
|
|
break;
|
|
case 6:
|
|
gs.y_axis_prefix = getString("new prefix",gs.y_axis_prefix );
|
|
break;
|
|
case 7:
|
|
gs.y_axis_postfix = getString("new postfix",gs.y_axis_postfix );
|
|
break;
|
|
case 8:
|
|
gs.y_axis_title = getString("new title",gs.y_axis_title );
|
|
graph.transform_index--;
|
|
break;
|
|
}
|
|
graph.mjs_plot();
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
if(graph.drawmodemenu){
|
|
var lx = Math.floor(end_x/edge);
|
|
var ly = Math.floor(end_y/edge);
|
|
if (ly==0){
|
|
graph.drawmodemenu=false;
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
if (ly==1){
|
|
//symbols
|
|
switch(lx){
|
|
case 0:
|
|
gs.symbol_size*=1.2;
|
|
break;
|
|
case 1:
|
|
gs.symbol_size/=1.2;
|
|
break;
|
|
case 2:
|
|
gs.symbol_mode = "none";
|
|
break;
|
|
case 3:
|
|
gs.symbol_mode = "dot";
|
|
break;
|
|
case 4:
|
|
gs.symbol_mode = "cdot";
|
|
break;
|
|
case 5:
|
|
gs.symbol_mode = "box";
|
|
break;
|
|
case 6:
|
|
gs.symbol_mode = "circ";
|
|
break;
|
|
case 7:
|
|
gs.symbol_mode = "x";
|
|
break;
|
|
case 8:
|
|
gs.symbol_mode = "cross";
|
|
break;
|
|
}
|
|
if (lx > 1){
|
|
gs.symbol_modes = [];
|
|
}
|
|
|
|
|
|
}
|
|
if (ly==2){
|
|
//lines
|
|
switch(lx){
|
|
case 0:
|
|
gs.line_thickness*=1.2;
|
|
break;
|
|
case 1:
|
|
gs.line_thickness/=1.2;
|
|
break;
|
|
case 2:
|
|
gs.line_mode = "none";
|
|
break;
|
|
case 3:
|
|
gs.line_mode = "line";
|
|
break;
|
|
case 4:
|
|
gs.line_mode = "approx";
|
|
break;
|
|
case 5:
|
|
gs.line_mode = "interp";
|
|
break;
|
|
case 6:
|
|
gs.line_mode = "zig";
|
|
break;
|
|
case 7:
|
|
gs.line_mode = "zag";
|
|
break;
|
|
case 8:
|
|
gs.line_mode = "mid";
|
|
break;
|
|
case 9:
|
|
gs.line_mode = "hist";
|
|
break;
|
|
}
|
|
if (lx > 1){
|
|
gs.line_modes = [];
|
|
}
|
|
}
|
|
graph.do_line_modes();
|
|
graph.mjs_plot();
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
if(graph.drawgraphmenu){
|
|
var ly = Math.floor(end_y/edge);
|
|
switch(ly){
|
|
case 0:
|
|
graph.drawgraphmenu=false;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
case 1:
|
|
gs.title = getString("new title",gs.title );
|
|
break;
|
|
case 2:
|
|
gs.subtitle = getString("new subtitle",gs.subtitle );
|
|
break;
|
|
case 3:
|
|
gs.subtitle2 = getString("new subtitle",gs.subtitle2 );
|
|
break;
|
|
case 4:
|
|
gs.showTransformTexts = !gs.showTransformTexts;
|
|
break;
|
|
case 5:
|
|
gs.x_axis_title = getString("new x axis title",gs.x_axis_title )
|
|
graph.transform_index--;
|
|
break;
|
|
case 6:
|
|
gs.y_axis_title = getString("new y axis title",gs.y_axis_title )
|
|
graph.transform_index--;
|
|
break;
|
|
case 7:
|
|
gs.scaling_factor/=1.1;
|
|
break;
|
|
case 8:
|
|
gs.scaling_factor*=1.1;
|
|
break;
|
|
case 9:
|
|
graph.reset();
|
|
break;
|
|
}
|
|
graph.mjs_plot();
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
if(graph.drawmarkermenu){
|
|
var ly = Math.floor(end_y/edge);
|
|
if (ly>=2 && ! gs.show_markers){
|
|
gs.show_markers = true;
|
|
setTimeout(function(){ graph.mjs_plot(); }, 0);
|
|
}
|
|
if (end_x <17*edge){
|
|
switch(ly){
|
|
case 0:
|
|
break;
|
|
case 1:
|
|
gs.markers = [];
|
|
graph.mjs_plot();
|
|
break
|
|
case 2:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'removeMarker';
|
|
break
|
|
case 3:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkertext';
|
|
graph.markerText = getString("Text:",'' );
|
|
break;
|
|
case 4:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkerline';
|
|
break;
|
|
case 5:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkerbox';
|
|
break;
|
|
case 6:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkerarrow';
|
|
break;
|
|
}
|
|
|
|
} else {
|
|
switch(ly){
|
|
case 0:
|
|
break;
|
|
case 1:
|
|
//hide and show all markers
|
|
gs.show_markers = ! gs.show_markers;
|
|
graph.mjs_plot();
|
|
break
|
|
case 2:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'markeredit';
|
|
break
|
|
case 4:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkerlinentext';
|
|
graph.markerText = getString("Text:",'' );
|
|
break
|
|
case 5:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkerboxntext';
|
|
graph.markerText = getString("Text:",'' );
|
|
break
|
|
case 6:
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'addmarkerarrowntext';
|
|
graph.markerText = getString("Text:",'' );
|
|
break
|
|
}
|
|
}
|
|
graph.drawmarkermenu=false;
|
|
//graph.mjs_plot();
|
|
setTimeout(function(){ mouse_move_event(event,graph); }, 0);
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
|
|
if(graph.drawStylemenu){
|
|
var ly = Math.floor(end_y/edge);
|
|
var lx = Math.floor((canvas.width-end_x)/edge)-2; //true for right side false for left
|
|
switch(ly){
|
|
case 0:
|
|
graph.drawStylemenu=false;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
case 1:
|
|
//pick font
|
|
graph.drawStylemenu=false;
|
|
graph.drawFontMenu=true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
case 2:
|
|
if (lx){gs.title_font_size--;} else {gs.title_font_size++;}
|
|
break;
|
|
case 3:
|
|
if (lx){gs.tick_labels_font_size--;} else {gs.tick_labels_font_size++;}
|
|
break;
|
|
case 4:
|
|
if (lx){gs.axis_labels_font_size--;} else {gs.axis_labels_font_size++;}
|
|
break;
|
|
case 5:
|
|
if (lx){gs.title_spacing--;} else {gs.title_spacing++;}
|
|
break;
|
|
case 6:
|
|
if (lx){gs.tick_lables_font_padding--;} else {gs.tick_lables_font_padding++;}
|
|
break;
|
|
case 7:
|
|
if (lx){gs.lable_spacing--;} else {gs.lable_spacing++;}
|
|
break;
|
|
case 8:
|
|
gs.color_fg = getString("new forground color",gs.color_fg );
|
|
break;
|
|
case 9:
|
|
gs.color_bg = getString("new background color",gs.color_bg );
|
|
break;
|
|
case 10:
|
|
gs.color_mg = getString("new midground color",gs.color_mg );
|
|
break;
|
|
case 11:
|
|
if (lx){gs.graph_line_thickness = Math.max(0.1,gs.graph_line_thickness-0.5);} else {gs.graph_line_thickness+=0.5;}
|
|
break;
|
|
case 12:
|
|
if (lx){gs.tick_len = Math.max(0.1,gs.tick_len-1);} else {gs.tick_len+=1;}
|
|
break;
|
|
case 13:
|
|
if (lx){gs.minor_tick_len = Math.max(0.1,gs.minor_tick_len-1);} else {gs.minor_tick_len+=1;}
|
|
break;
|
|
}
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if(graph.drawFontMenu){
|
|
var ly = Math.floor(end_y/edge)-1;
|
|
if (ly == -1){
|
|
gs.font_name = getString("font",gs.font_name );
|
|
} else {
|
|
gs.font_name = MJSFontList.fontList[ly];
|
|
}
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
|
|
//top buttons
|
|
if (end_y < edge){
|
|
if ( end_x < 4*edge){
|
|
graph.drawmodemenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x >4*edge && end_x <8 *edge){
|
|
graph.drawgraphmenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 10*edge && end_x > 9*edge){
|
|
//drag button
|
|
gs.mouse_mode = 'drag';
|
|
graph.needs_drag_image = true;
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 11*edge && end_x > 10*edge){
|
|
//zoom button
|
|
gs.mouse_mode = 'zoom';
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 12*edge && end_x > 11*edge){
|
|
//measure button
|
|
gs.mouse_mode = 'measure';
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 13*edge && end_x > 12*edge){
|
|
//data reader button
|
|
gs.mouse_mode = 'reader';
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 14*edge && end_x > 13*edge){
|
|
//mouse button
|
|
gs.mouse_mode = 'mouse';
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x > 14*edge && end_x < 17*edge){
|
|
//mouse button
|
|
graph.drawmarkermenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < canvas.width && end_x > canvas.width - edge){
|
|
//show/hide captions
|
|
graph.drawcaptionmenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < canvas.width - edge && end_x > canvas.width - 2*edge){
|
|
//infomation button
|
|
gs.i = (gs.i + 1)%2;//a two state button.
|
|
}
|
|
if ( end_x < canvas.width - 2*edge && end_x > canvas.width - 5*edge){
|
|
graph.drawStylemenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
|
|
if(graph.drawtimemenu){
|
|
var lx = 10*edge;
|
|
var ldx = 2*edge;
|
|
var ly = canvas.height - edge*3;
|
|
var ldy = edge;
|
|
|
|
for (var i = 0;i<2;i++){
|
|
if (end_y > ly-(i+1)*ldy && end_y < ly-i*ldy && end_x>lx && end_x < lx+4*ldx){
|
|
for (var j = 0;j<4;j++){
|
|
var selected = end_x>lx+j*ldx && end_x < lx+(j+1)*ldx;
|
|
if (selected){graph.timemenuoptions[i] = j;}
|
|
}
|
|
}
|
|
}
|
|
if (end_y < ly +2*ldy && end_y > ly +1*ldy && end_x > lx && end_x < lx+3*ldx){
|
|
//apply to x button
|
|
console.log('apply button');
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "time_to_num";
|
|
gs.x_scale_mode ='lin';
|
|
var now = new Date();
|
|
gs.data_transforms_args[n] = [graph.timemenuoptions[1],graph.timemenuoptions[0],'x',now.getTime()];
|
|
graph.drawtimemenu = false;
|
|
graph.mjs_plot();
|
|
|
|
}
|
|
if (end_y < ly +2*ldy && end_y > ly +1*ldy && end_x > lx+3*ldx && end_x < lx+6*ldx){
|
|
//apply to ybutton
|
|
console.log('apply button');
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "time_to_num";
|
|
gs.y_scale_mode ='lin';
|
|
var now = new Date();
|
|
gs.data_transforms_args[n] = [graph.timemenuoptions[1],graph.timemenuoptions[0],'y',now.getTime()];
|
|
graph.drawtimemenu = false;
|
|
graph.mjs_plot();
|
|
}
|
|
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
//function buttons
|
|
if (graph.drawfxmenu){
|
|
var n = gs.data_transforms.length;
|
|
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height-edge){
|
|
//pressed the fit menu button again
|
|
graph.drawfxmenu = false;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*2 && end_y < canvas.height - edge*1){
|
|
// reset button
|
|
console.log('resetbutton');
|
|
graph.graphics_style.data_transforms = [];
|
|
graph.graphics_style.data_transforms_args = [];
|
|
|
|
if (gs.mode === 'hist dot'){
|
|
gs.mode = 'line dot';
|
|
}
|
|
}
|
|
if ( end_x < 16*edge && end_x > 12*edge && end_y > canvas.height - edge*1){
|
|
// pop button
|
|
console.log('pop');
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
}
|
|
if ( end_x < 12*edge && end_x >8*edge && end_y > canvas.height - edge*14 && end_y < canvas.height - edge*13){
|
|
// y vs y button
|
|
console.log('y vs y');
|
|
if (gs.data_transforms[n-1] == "y_vs_y"){
|
|
gs.data_transforms_args[n-1][0] += 1;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "y_vs_y";
|
|
gs.data_transforms_args[n] = [1];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*3 && end_y < canvas.height - edge*2){
|
|
// cut button button
|
|
console.log('cut button');
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'cut';
|
|
graph.drawfxmenu = false;
|
|
|
|
}
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*4 && end_y < canvas.height - edge*3){
|
|
// normalise button
|
|
console.log('normalise');
|
|
if (gs.data_transforms[n-1] == "normalise"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "normalise";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
gs.y_scale_auto_min = true;
|
|
gs.y_scale_auto_max = true;
|
|
|
|
}
|
|
if ( end_x < 10*edge && end_x > 8*edge && end_y > canvas.height - edge*5 && end_y < canvas.height - edge*4){
|
|
// y-c button
|
|
console.log('y-c');
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'y-c';
|
|
graph.drawfxmenu = false;
|
|
}
|
|
if ( end_x < 12*edge && end_x > 10*edge && end_y > canvas.height - edge*5 && end_y < canvas.height - edge*4){
|
|
// x-c button
|
|
console.log('x-c');
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'x-c';
|
|
graph.drawfxmenu = false;
|
|
}
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*6 && end_y < canvas.height - edge*5){
|
|
// smooth button
|
|
console.log('smooth');
|
|
if (gs.data_transforms[n-1] == "smooth"){
|
|
gs.data_transforms_args[n-1][0] = gs.data_transforms_args[n-1][0]*1.467799;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "smooth";
|
|
gs.data_transforms_args[n] = [2.1544339];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*7 && end_y < canvas.height - edge*6){
|
|
// interpolate button
|
|
console.log('interpolate');
|
|
if (gs.data_transforms[n-1] == "interpolate"){
|
|
gs.data_transforms_args[n-1][0] *= 2;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "interpolate";
|
|
gs.data_transforms_args[n] = [20];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*8 && end_y < canvas.height - edge*7){
|
|
// subtract user defined line
|
|
console.log('-baseline');
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'sublin';
|
|
graph.drawfxmenu = false;
|
|
//gs.data_transforms[n] = "remove_linear";
|
|
//gs.data_transforms_args[n] = [];
|
|
}
|
|
if ( end_x < 12*edge && end_x > 8*edge && end_y > canvas.height - edge*9 && end_y < canvas.height - edge*8){
|
|
// differentiate button
|
|
console.log('dy/dx');
|
|
gs.data_transforms[n] = "differentiate";
|
|
gs.data_transforms_args[n] = [0];
|
|
gs.y_scale_auto_min = true;
|
|
gs.y_scale_auto_max = true;
|
|
}
|
|
if ( end_x < 12*edge && end_x > 10*edge && end_y > canvas.height - edge*10 && end_y < canvas.height - edge*9){
|
|
// e to the power x button
|
|
console.log('ex');
|
|
if (gs.data_transforms[n-1] == "ln_x"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "e_to_x";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
}
|
|
if ( end_x < 10*edge && end_x > 8*edge && end_y > canvas.height - edge*10 && end_y < canvas.height - edge*9){
|
|
// ln x button
|
|
console.log('lnx');
|
|
if (gs.data_transforms[n-1] == "e_to_x"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "ln_x";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
}
|
|
if ( end_x < 12*edge && end_x > 10*edge && end_y > canvas.height - edge*11 && end_y < canvas.height - edge*10){
|
|
// ten to the x button
|
|
console.log('10^x');
|
|
if (gs.data_transforms[n-1] == "log_x"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "ten_to_x";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
}
|
|
if ( end_x < 10*edge && end_x > 8*edge && end_y > canvas.height - edge*11 && end_y < canvas.height - edge*10){
|
|
// log x button
|
|
console.log('logx');
|
|
if (gs.data_transforms[n-1] == "ten_to_x"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "log_x";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
}
|
|
if ( end_x < 12*edge && end_x > 10*edge && end_y > canvas.height - edge*12 && end_y < canvas.height - edge*11){
|
|
// x over 10 button
|
|
console.log('x/10');
|
|
if (gs.data_transforms[n-1] == "scale_x"){
|
|
console.log('incresing scaling');
|
|
gs.data_transforms_args[n-1][0] *= 0.1;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "scale_x";
|
|
gs.data_transforms_args[n] = [0.1];
|
|
}
|
|
gs.x_manual_min *=0.10;
|
|
gs.x_manual_max *=0.10;
|
|
}
|
|
if ( end_x < 10*edge && end_x > 8*edge && end_y > canvas.height - edge*12 && end_y < canvas.height - edge*11){
|
|
// ten x button
|
|
console.log('10x');
|
|
if (gs.data_transforms[n-1] == "scale_x"){
|
|
console.log('incresing scaling');
|
|
gs.data_transforms_args[n-1][0] *= 10;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "scale_x";
|
|
gs.data_transforms_args[n] = [10];
|
|
}
|
|
gs.x_manual_min *=10;
|
|
gs.x_manual_max *=10;
|
|
}
|
|
if ( end_x < 12*edge && end_x > 10*edge && end_y > canvas.height - edge*13 && end_y < canvas.height - edge*12){
|
|
// one over x button
|
|
console.log('1/x');
|
|
if (gs.data_transforms[n-1] == "one_over_x"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "one_over_x";
|
|
gs.data_transforms_args[n] = [];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 10*edge && end_x > 8*edge && end_y > canvas.height - edge*13 && end_y < canvas.height - edge*12){
|
|
// neg x button
|
|
console.log('-x');
|
|
if (gs.data_transforms[n-1] == "scale_x"){
|
|
console.log('incresing scaling');
|
|
gs.data_transforms_args[n-1][0] *= -1;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "scale_x";
|
|
gs.data_transforms_args[n] = [-1];
|
|
}
|
|
var oldmin = gs.x_manual_min*-1;
|
|
var oldmax = gs.x_manual_max*-1;
|
|
gs.x_manual_min = Math.min(oldmin,oldmax);
|
|
gs.x_manual_max = Math.max(oldmin,oldmax);
|
|
}
|
|
|
|
if ( end_x < 16*edge && end_x > 12*edge && end_y > canvas.height - edge*2 && end_y < canvas.height - edge*1){
|
|
// swap button
|
|
console.log('x<->y');
|
|
if (gs.data_transforms[n-1] == "swap_x_y"){
|
|
console.log('undoing swap');
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "swap_x_y";
|
|
gs.data_transforms_args[n] = [];
|
|
}
|
|
var temp = gs.x_manual_min;
|
|
gs.x_manual_min =gs.y_manual_min;
|
|
gs.y_manual_min =temp;
|
|
temp =gs.x_manual_max;
|
|
gs.x_manual_max =gs.y_manual_max;
|
|
gs.y_manual_max =temp;
|
|
temp = gs.x_scale_mode;
|
|
gs.x_scale_mode = gs.y_scale_mode;
|
|
gs.y_scale_mode = temp;
|
|
|
|
//swap the axis prefixs postfixes
|
|
temp = gs.x_axis_prefix;
|
|
gs.x_axis_prefix = gs.y_axis_prefix;
|
|
gs.y_axis_prefix = temp;
|
|
|
|
temp = gs.x_axis_postfix
|
|
gs.x_axis_postfix = gs.y_axis_postfix;
|
|
gs.y_axis_postfix = temp;
|
|
|
|
temp = gs.x_label_mode;
|
|
gs.x_label_mode = gs.y_label_mode;
|
|
gs.y_label_mode = temp;
|
|
|
|
}
|
|
if ( end_x < 16*edge && end_x > 12*edge && end_y > canvas.height - edge*3 && end_y < canvas.height - edge*2){
|
|
// trim button
|
|
console.log('trim');
|
|
graph.pre_mouse_mode = gs.mouse_mode;
|
|
gs.mouse_mode = 'trim';
|
|
graph.drawfxmenu = false;
|
|
}
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*4 && end_y < canvas.height - edge*3){
|
|
// y^(n) button
|
|
console.log('y^(n)');
|
|
if (gs.data_transforms[n-1] == "y_pow_n"){
|
|
console.log('incresing power');
|
|
gs.data_transforms_args[n-1][0] += 1;
|
|
var pwr = gs.data_transforms_args[n-1][0];
|
|
gs.y_manual_min = Math.pow(gs.y_manual_min,pwr/(pwr-1));
|
|
gs.y_manual_max = Math.pow(gs.y_manual_max,pwr/(pwr-1));
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "y_pow_n";
|
|
gs.data_transforms_args[n] = [2];
|
|
gs.y_manual_min = Math.pow(gs.y_manual_min,2);
|
|
gs.y_manual_max = Math.pow(gs.y_manual_max,2);
|
|
}
|
|
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*4 && end_y < canvas.height - edge*3){
|
|
// some button
|
|
console.log('x^(n)');
|
|
if (gs.data_transforms[n-1] == "x_pow_n"){
|
|
console.log('incresing power');
|
|
gs.data_transforms_args[n-1][0] += 1;
|
|
var pwr = gs.data_transforms_args[n-1][0];
|
|
gs.x_manual_min = Math.pow(gs.x_manual_min,pwr/(pwr-1));
|
|
gs.x_manual_max = Math.pow(gs.x_manual_max,pwr/(pwr-1));
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "x_pow_n";
|
|
gs.data_transforms_args[n] = [2];
|
|
gs.x_manual_min = Math.pow(gs.x_manual_min,2);
|
|
gs.x_manual_max = Math.pow(gs.x_manual_max,2);
|
|
}
|
|
}
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*5 && end_y < canvas.height - edge*4){
|
|
// some button
|
|
console.log('sqrty');
|
|
if (gs.data_transforms[n-1] == "y_nth_root"){
|
|
console.log('incresing power');
|
|
gs.data_transforms_args[n-1][0] += 1;
|
|
var pwr = gs.data_transforms_args[n-1][0];
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "y_nth_root";
|
|
gs.data_transforms_args[n] = [2];
|
|
var pwr = 2;
|
|
}
|
|
var rtmin = Math.pow(Math.abs(gs.y_manual_min),1/2);
|
|
var rtmax = Math.pow(Math.abs(gs.y_manual_max),1/2)
|
|
if (gs.y_manual_min < 0 && gs.y_manual_max > 0){
|
|
//if graph is accross zero then make the minimum zero. max could be ether still.
|
|
var make_zero = 0;
|
|
} else {make_zero = 1;}
|
|
gs.y_manual_min = Math.min( rtmin,rtmax)*make_zero;
|
|
gs.y_manual_max = Math.max( rtmin,rtmax);
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*5 && end_y < canvas.height - edge*4){
|
|
// some button
|
|
console.log('sqrtx');
|
|
if (gs.data_transforms[n-1] == "x_nth_root"){
|
|
console.log('incresing power');
|
|
gs.data_transforms_args[n-1][0] += 1;
|
|
var pwr = gs.data_transforms_args[n-1][0];
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "x_nth_root";
|
|
gs.data_transforms_args[n] = [2];
|
|
var pwr = 2;
|
|
}
|
|
var rtmin = Math.pow(Math.abs(gs.x_manual_min),1/2);
|
|
var rtmax = Math.pow(Math.abs(gs.x_manual_max),1/2)
|
|
if (gs.x_manual_min < 0 && gs.x_manual_max > 0){
|
|
//if graph is accross zero then make the minimum zero. max could be ether still.
|
|
var make_zero = 0;
|
|
} else {make_zero = 1;}
|
|
gs.x_manual_min = Math.min( rtmin,rtmax)*make_zero;
|
|
gs.x_manual_max = Math.max( rtmin,rtmax);
|
|
}
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*6 && end_y < canvas.height - edge*5){
|
|
// some button
|
|
console.log('B-A');
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*6 && end_y < canvas.height - edge*5){
|
|
// some button
|
|
console.log('sum');
|
|
gs.data_transforms[n] = "sum";
|
|
gs.data_transforms_args[n] = [];
|
|
}
|
|
if ( end_x < 16*edge && end_x > 12*edge && end_y > canvas.height - edge*7 && end_y < canvas.height - edge*6){
|
|
// some button
|
|
console.log('Jitter');
|
|
if (gs.data_transforms[n-1] == "jitter"){
|
|
gs.data_transforms_args[n-1][0] += 1;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "jitter";
|
|
gs.data_transforms_args[n] = [1];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 16*edge && end_x > 12*edge && end_y > canvas.height - edge*8 && end_y < canvas.height - edge*7){
|
|
// some button
|
|
console.log('Hist');
|
|
gs.data_transforms[n] = "hist";
|
|
gs.data_transforms_args[n] = [0];
|
|
gs.x_scale_auto_max = true;
|
|
gs.x_scale_auto_min = true;
|
|
gs.y_scale_auto_max = true;
|
|
gs.y_scale_auto_min = true;
|
|
gs.x_scale_mode = 'lin';
|
|
gs.y_scale_mode = 'lin';
|
|
gs.mode = 'hist dot';
|
|
}
|
|
if ( end_x < 16*edge && end_x > 12*edge && end_y > canvas.height - edge*9 && end_y < canvas.height - edge*8){
|
|
// some button
|
|
console.log('Intergrate');
|
|
gs.data_transforms[n] = "intergrate";
|
|
gs.data_transforms_args[n] = [0];
|
|
gs.y_scale_auto_min = true;
|
|
gs.y_scale_auto_max = true;
|
|
|
|
}
|
|
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*10 && end_y < canvas.height - edge*9){
|
|
// some button
|
|
console.log('ey');
|
|
gs.data_transforms[n] = "e_to_y";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*10 && end_y < canvas.height - edge*9){
|
|
// some button
|
|
console.log('lny');
|
|
gs.data_transforms[n] = "ln_y";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*11 && end_y < canvas.height - edge*10){
|
|
// some button
|
|
console.log('10^y');
|
|
gs.data_transforms[n] = "ten_to_y";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*11 && end_y < canvas.height - edge*10){
|
|
// some button
|
|
console.log('logy');
|
|
gs.data_transforms[n] = "log_y";
|
|
gs.data_transforms_args[n] = [0];
|
|
}
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*12 && end_y < canvas.height - edge*11){
|
|
// some button
|
|
console.log('y/10');
|
|
if (gs.data_transforms[n-1] == "scale_y"){
|
|
console.log('incresing scaling');
|
|
gs.data_transforms_args[n-1][0] *= 0.1;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "scale_y";
|
|
gs.data_transforms_args[n] = [0.1];
|
|
}
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*12 && end_y < canvas.height - edge*11){
|
|
// some button
|
|
console.log('10y');
|
|
if (gs.data_transforms[n-1] == "scale_y"){
|
|
console.log('incresing scaling');
|
|
gs.data_transforms_args[n-1][0] *= 10;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "scale_y";
|
|
gs.data_transforms_args[n] = [10];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 16*edge && end_x > 14*edge && end_y > canvas.height - edge*13 && end_y < canvas.height - edge*12){
|
|
// some button
|
|
console.log('1/y');
|
|
|
|
if (gs.data_transforms[n-1] == "one_over_y"){
|
|
gs.data_transforms.pop();
|
|
gs.data_transforms_args.pop();
|
|
} else {
|
|
gs.data_transforms[n] = "one_over_y";
|
|
gs.data_transforms_args[n] = [];
|
|
}
|
|
|
|
}
|
|
if ( end_x < 14*edge && end_x > 12*edge && end_y > canvas.height - edge*13 && end_y < canvas.height - edge*12){
|
|
// some button
|
|
console.log('-y');
|
|
if (gs.data_transforms[n-1] == "scale_y"){
|
|
console.log('incresing scaling');
|
|
gs.data_transforms_args[n-1][0] *= -1;
|
|
graph.transform_index--;
|
|
} else {
|
|
gs.data_transforms[n] = "scale_y";
|
|
gs.data_transforms_args[n] = [-1];
|
|
}
|
|
var oldmin = gs.y_manual_min*-1;
|
|
var oldmax = gs.y_manual_max*-1;
|
|
gs.y_manual_min = Math.min(oldmin,oldmax);
|
|
gs.y_manual_max = Math.max(oldmin,oldmax);
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*14 && end_y < canvas.height - edge*13){
|
|
// subtract trend button
|
|
console.log('subtract trend');
|
|
if (fits.fit_strings.indexOf(gs.fits)>-1){
|
|
gs.data_transforms[n] = "subtract_fit";
|
|
gs.data_transforms_args[n] = [gs.fits];
|
|
gs.fits = 'none';
|
|
} else {
|
|
graph.errors.push('No fit chosen');
|
|
}
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*13 && end_y < canvas.height - edge*12){
|
|
// remove outliers button
|
|
console.log('subtract trend');
|
|
if (gs.data_transforms[n-1] == "remove_outliers"){
|
|
gs.data_transforms_args[n-1][1] -= 1;
|
|
graph.transform_index--;
|
|
} else {
|
|
if (fits.fit_strings.indexOf(gs.fits)>-1){
|
|
//only add if there is a valid fit
|
|
gs.data_transforms[n] = "remove_outliers";
|
|
gs.data_transforms_args[n] = [gs.fits,5];
|
|
gs.fits = 'old';
|
|
} else {
|
|
graph.errors.push('No fit chosen');
|
|
}
|
|
}
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*12 && end_y < canvas.height - edge*11){
|
|
// remove outliers button
|
|
console.log('subtract trend');
|
|
if (gs.data_transforms[n-1] == "keep_outliers"){
|
|
gs.data_transforms_args[n-1][1] += 1;
|
|
graph.transform_index--;
|
|
} else {
|
|
if (fits.fit_strings.indexOf(gs.fits)>-1){
|
|
gs.data_transforms[n] = "keep_outliers";
|
|
gs.data_transforms_args[n] = [gs.fits,0];
|
|
gs.fits = 'old';
|
|
} else {
|
|
graph.errors.push('No fit chosen');
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*11 && end_y < canvas.height - edge*10){
|
|
console.log('custom f(x) button');
|
|
var f = prompt('y = f(x,y) =','y');
|
|
if (f){
|
|
gs.data_transforms[n] = "custom_y";
|
|
gs.data_transforms_args[n] = [f];
|
|
|
|
}
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*10 && end_y < canvas.height - edge*9){
|
|
// remove outliers button
|
|
console.log('custom filter button');
|
|
var f;
|
|
if (gs.x_scale_mode ==='time' || gs.y_scale_mode ==='time' ){
|
|
f = prompt('use, >, <, >=, <=, ==, x, y, now (time) and maths','x > now - 1000*60*60');
|
|
} else {
|
|
f = prompt('use, >, <, >=, <=, ==, x, y and maths','x*2+y*2 < 16');
|
|
}
|
|
if (f){
|
|
gs.data_transforms[n] = "custom_filter";
|
|
gs.data_transforms_args[n] = [f];
|
|
}
|
|
}
|
|
|
|
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*2 && end_y < canvas.height - edge*1){
|
|
// spacing button
|
|
console.log('x spacing');
|
|
gs.data_transforms[n] = "spacing";
|
|
gs.data_transforms_args[n] = [];
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*5 && end_y < canvas.height - edge*4){
|
|
gs.data_transforms[n] = "accumulate";
|
|
gs.data_transforms_args[n] = [ ];
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*4 && end_y < canvas.height - edge*3){
|
|
// view last n button
|
|
console.log('view_last_n');
|
|
gs.data_transforms[n] = "view_last_n";
|
|
gs.data_transforms_args[n] = [ getInt("How Many Points",512) ];
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*3 && end_y < canvas.height - edge*2){
|
|
// mean_normalise button
|
|
console.log('mean_normalise');
|
|
gs.data_transforms[n] = "mean_normalise";
|
|
gs.data_transforms_args[n] = [];
|
|
}
|
|
if ( end_x < 22*edge && end_x >16*edge && end_y > canvas.height - edge*1 && end_y < canvas.height){
|
|
// time menu button
|
|
console.log('time menu');
|
|
graph.drawtimemenu=true;
|
|
graph.drawfxmenu = false;
|
|
}
|
|
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
//line menu buttons
|
|
if (graph.drawlinemenu){
|
|
if ( end_x < 15*edge && end_x > 11*edge && end_y > canvas.height-edge){
|
|
//pressed the fit menu button again
|
|
graph.drawlinemenu = false;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
//pressed hide/show
|
|
if ( end_x < 21*edge && end_x > 11*edge && end_y < canvas.height-edge){
|
|
|
|
var no_of_lines = graph.data_backup.length;
|
|
var no_of_function_lines = gs.function_lines.length;
|
|
|
|
var item = Math.floor((no_of_lines+no_of_function_lines+1)-((canvas.height-end_y) / edge -1));
|
|
|
|
if (item == 0){
|
|
console.log('new function');
|
|
var f;
|
|
if (gs.x_scale_mode === 'time'){
|
|
f = prompt('y = f(x)','cos(2*pi*x/1000/60/60/24)');
|
|
} else {
|
|
f = prompt('y = f(x)','x*x/2');
|
|
}
|
|
if (f){
|
|
gs.function_lines.push(f);
|
|
}
|
|
}
|
|
item -=1;
|
|
if (item < no_of_function_lines && item >= 0 && end_x < 13*edge){
|
|
console.log('remove item '+ item);
|
|
gs.function_lines.splice(no_of_function_lines-item-1,1);
|
|
}
|
|
if (item < no_of_function_lines && item >= 0 && end_x > 13*edge){
|
|
console.log('edit item '+ item);
|
|
var f = prompt('y = f(x)',gs.function_lines[no_of_function_lines-item-1]);
|
|
if (f){
|
|
gs.function_lines[no_of_function_lines-item-1] = f;
|
|
}
|
|
//gs.function_lines.splice(no_of_function_lines-item-1,1);
|
|
}
|
|
|
|
item -= no_of_function_lines;
|
|
if (item >= 0){
|
|
console.log('hideshow'+ item);
|
|
if (end_x > 20*edge){
|
|
//line colour stuff
|
|
gs.line_colours[item] = getString("new color name or hex",graph.colors_backup[item] );
|
|
} else if (end_x > 19*edge){
|
|
gs.symbol_modes[item] = getString("new symbol mode ( dot cdot circ box x cross)",graph.symbol_modes_backup[item] );
|
|
gs.line_modes[item] = getString("new line mode ( line zig zag mid arrpox interp hist)",graph.line_modes_backup[item] );
|
|
graph.do_line_modes()
|
|
} else {
|
|
gs.hidden_lines[item] = !gs.hidden_lines[item];
|
|
}
|
|
}
|
|
}
|
|
//all button
|
|
if ( end_x < 17*edge && end_x > 15*edge && end_y > canvas.height-edge){
|
|
console.log('all');
|
|
for (var k = 0;k<gs.hidden_lines.length;k++){
|
|
gs.hidden_lines[k] = false;
|
|
}
|
|
}
|
|
//none button
|
|
if ( end_x < 19*edge && end_x > 17*edge && end_y > canvas.height-edge){
|
|
console.log('non');
|
|
for (var k = 0;k<gs.hidden_lines.length;k++){
|
|
gs.hidden_lines[k] = true;
|
|
}
|
|
}
|
|
|
|
graph.transform_index--;
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
|
|
//export menu buttons
|
|
if (graph.drawexportmenu){
|
|
graph.drawexportmenu = false;
|
|
mouse_move_event(event,graph);
|
|
var my = canvas.height;
|
|
var dy = edge;
|
|
|
|
if ( end_y > my - dy && end_y < my){
|
|
return;
|
|
}
|
|
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('csv');
|
|
//find longest data set
|
|
len = 0;
|
|
for (i = 0;i<graph.data.length;i++){
|
|
len = Math.max(len,graph.data[i][0].length);
|
|
}
|
|
//traverse the data variable in an odd way.
|
|
//just to get copy and paste to origin/matlab working
|
|
var text = "";
|
|
for(var ii = 0; ii <len; ii++) {
|
|
for (i = 0;i<graph.data.length;i++){
|
|
try{
|
|
text += graph.data[i][0][ii].toString() + ","+ graph.data[i][1][ii].toString() + ",";
|
|
} catch(e){
|
|
text += ",,";
|
|
}
|
|
}
|
|
text = text.substring(0, text.length - 1); //removes the trailing comma
|
|
text += "\n";
|
|
}
|
|
|
|
download_text(text,'mjsplot_graph.csv');
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('code');
|
|
var theBody = document.getElementsByTagName('body')[0];
|
|
var text = '';
|
|
for (i = 0;i<graph.data.length;i++){
|
|
text += graph.captions[i].replace( /\W/g, "")+'_x = [';
|
|
for (ii = 0;ii<graph.data[i][0].length-1;ii++){
|
|
text += graph.data[i][0][ii] + ','
|
|
}
|
|
text += graph.data[i][0][ii] + '];\n';
|
|
|
|
text += graph.captions[i].replace( /\W/g, "")+'_y = [';
|
|
for (ii = 0;ii<graph.data[i][1].length-1;ii++){
|
|
text += graph.data[i][1][ii] + ','
|
|
}
|
|
text += graph.data[i][1][ii] + '];\n';
|
|
|
|
|
|
}
|
|
new_window_with_text(text,
|
|
graph.graphics_style.title,
|
|
graph.canvas.width,
|
|
graph.canvas.height
|
|
);
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('code matlab');
|
|
var theBody = document.getElementsByTagName('body')[0];
|
|
var text = '';
|
|
for (i = 0;i<graph.data.length;i++){
|
|
text += graph.captions[i].replace( /\W/g, "")+'_x = [';
|
|
for (ii = 0;ii<graph.data[i][0].length-1;ii++){
|
|
text += graph.data[i][0][ii] + ' '
|
|
}
|
|
text += graph.data[i][0][ii] + '];\n';
|
|
|
|
text += graph.captions[i].replace( /\W/g, "")+'_y = [';
|
|
for (ii = 0;ii<graph.data[i][1].length-1;ii++){
|
|
text += graph.data[i][1][ii] + ' '
|
|
}
|
|
text += graph.data[i][1][ii] + '];\n';
|
|
}
|
|
new_window_with_text(text,
|
|
graph.graphics_style.title,
|
|
graph.canvas.width,
|
|
graph.canvas.height
|
|
);
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('code JSON');
|
|
var text = '';
|
|
text = JSON.stringify(graph.data);
|
|
download_text(text,'mjsplot_graph.json');
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('tabbed');
|
|
//find longest data set
|
|
var len = 0;
|
|
for (i = 0;i<graph.data.length;i++){
|
|
len = Math.max(len,graph.data[i][0].length);
|
|
}
|
|
//traverse the data variable in an odd way.
|
|
//just to get copy and paste to origin/matlab working
|
|
var text = "";
|
|
for(var ii = 0; ii <len; ii++) {
|
|
for (i = 0;i<graph.data.length;i++){
|
|
try{
|
|
text += graph.data[i][0][ii].toString() + "\t"+ graph.data[i][1][ii].toString() + "\t";
|
|
} catch(e){
|
|
text += "\t\t";
|
|
}
|
|
}
|
|
text += "\n";
|
|
}
|
|
download_text(text,'mjsplot_graph.dat');
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('png hi');
|
|
graph.export_png(graph.canvas.width*3,graph.canvas.height*3,3);
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('png low');
|
|
graph.export_png(graph.canvas.width,graph.canvas.height,1);
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('png (small figure)');
|
|
graph.export_png(1000,750,2.5);
|
|
}
|
|
my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('png (large figure)');
|
|
graph.export_png(1000*2,750*2,2.5);
|
|
}
|
|
my-=dy;
|
|
if (end_x > canvas.width - 8*edge){
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('svg');
|
|
graph.export_svg(graph.canvas.width,graph.canvas.height);
|
|
}my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('svg (small fig)');
|
|
graph.export_svg(1000/2.5,750/2.5);
|
|
}my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('svg (large fig)');
|
|
graph.export_svg(2*1000/2.5,2*750/2.5);
|
|
}my-=dy;
|
|
} else {
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('svgpng');
|
|
graph.export_svg_png(graph.canvas.width,graph.canvas.height,3);
|
|
}my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('svgpng (small fig)');
|
|
graph.export_svg_png(1000/2.5,750/2.5,3);
|
|
}my-=dy;
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('svgpng (large fig)');
|
|
graph.export_svg_png(2*1000/2.5,2*750/2.5,3);
|
|
}my-=dy;
|
|
}
|
|
|
|
if ( end_y > my - dy && end_y < my){
|
|
console.log('html (link)');
|
|
var text = '';
|
|
var nl= ' \n';
|
|
var graph_name = "egraph";//graph.graph_name;
|
|
//get a random 4 character name.
|
|
var graph_name = window.btoa(Math.random().toString()).slice(6,10);
|
|
var canvas_name = graph.canvas_name ;
|
|
var mjsplot_embed = '<script src="mjs_plot_0_3_3svg.js"></script>'
|
|
var canvas_embed = '<canvas id="'+ canvas_name+'" width="'+graph.canvas.width+'px" height="'+graph.canvas.height+'px"></canvas>';
|
|
var data_code = JSON.stringify(graph.data_backup);
|
|
var gs_code = JSON.stringify(graph.graphics_style);
|
|
var captions_code = JSON.stringify(graph.captions_backup);
|
|
|
|
text+= graph_name+'.set_data( '+data_code+' );'+nl;
|
|
text+= graph_name+'.set_captions( '+captions_code+' ); '+nl;
|
|
text+= graph_name+'.default_graphics_style = '+gs_code+'; '+nl;
|
|
|
|
var shower = MJS_PLOT_LINK_LOADER;
|
|
var url = shower+graph_name+LZString.compressToEncodedURIComponent(text);
|
|
window.open(url, graph.graphics_style.title, "width="+graph.canvas.width+", height="+graph.canvas.height);
|
|
|
|
}my-=dy;
|
|
|
|
return;
|
|
}
|
|
|
|
//fit menu buttons
|
|
if (graph.drawfitsmenu){
|
|
|
|
if ( end_x < 21*edge && end_x > 18*edge && end_y > canvas.height-edge){
|
|
//pressed none fits button
|
|
gs.fits = 'none';
|
|
}
|
|
if ( end_y > canvas.height-2*edge && end_y < canvas.height-1*edge){
|
|
gs.extrapolate = !gs.extrapolate;
|
|
}
|
|
if ( end_y > canvas.height-3*edge && end_y < canvas.height-2*edge && end_x > 18*edge){
|
|
gs.fits = 'stats';
|
|
}
|
|
if ( end_y > canvas.height-4*edge && end_y < canvas.height-3*edge && end_x > 18*edge){
|
|
gs.fits = 'exp';
|
|
}
|
|
if ( end_y > canvas.height-5*edge && end_y < canvas.height-4*edge && end_x > 18*edge){
|
|
gs.fits = 'exp_c';
|
|
}
|
|
if ( end_y > canvas.height-6*edge && end_y < canvas.height-5*edge && end_x > 18*edge){
|
|
gs.fits = 'log';
|
|
}
|
|
if ( end_y > canvas.height-7*edge && end_y < canvas.height-6*edge && end_x > 18*edge){
|
|
gs.fits = 'power';
|
|
}
|
|
if ( end_y > canvas.height-8*edge && end_y < canvas.height-7*edge && end_x > 18*edge){
|
|
gs.fits = 'power_c';
|
|
}
|
|
if ( end_y > canvas.height-9*edge && end_y < canvas.height-8*edge && end_x > 18*edge){
|
|
gs.fits = 'gauss';
|
|
}
|
|
if ( end_y > canvas.height-3*edge && end_y < canvas.height-2*edge && end_x < 18*edge){
|
|
gs.fits = 'const';
|
|
}
|
|
if ( end_y > canvas.height-4*edge && end_y < canvas.height-3*edge && end_x < 18*edge){
|
|
gs.fits = 'linear';
|
|
}
|
|
if ( end_y > canvas.height-5*edge && end_y < canvas.height-4*edge && end_x < 18*edge){
|
|
gs.fits = 'quad';
|
|
}
|
|
if ( end_y > canvas.height-6*edge && end_y < canvas.height-5*edge && end_x < 18*edge){
|
|
gs.fits = 'cubic';
|
|
}
|
|
if ( end_y > canvas.height-7*edge && end_y < canvas.height-6*edge && end_x < 18*edge){
|
|
gs.fits = 'poly4';
|
|
}
|
|
if ( end_y > canvas.height-8*edge && end_y < canvas.height-7*edge && end_x < 18*edge){
|
|
gs.fits = 'poly5';
|
|
}
|
|
if ( end_y > canvas.height-9*edge && end_y < canvas.height-8*edge && end_x < 18*edge){
|
|
gs.fits = 'poly6';
|
|
}
|
|
if ( end_y > canvas.height-10*edge && end_y < canvas.height-9*edge && end_x < 18*edge){
|
|
gs.fits = 'poly5';
|
|
}
|
|
|
|
|
|
if ( end_x < 18*edge && end_x > 15*edge && end_y > canvas.height-edge){
|
|
//pressed the fit menu button again
|
|
graph.drawfitsmenu = false;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 21*edge && end_x > 18*edge && end_y > canvas.height-edge){
|
|
//pressed none fits button
|
|
gs.fits = 'none';
|
|
graph.drawfitsmenu = false;
|
|
|
|
|
|
}
|
|
graph.mjs_plot();
|
|
console.log(gs.fits);
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
//bottom buttons
|
|
if (end_y>canvas.height-edge){
|
|
if ( end_x < 2*edge && end_x > 0*edge){
|
|
graph.drawxmenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 4*edge && end_x > 2*edge){
|
|
graph.drawymenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 5*edge && end_x > 4*edge){
|
|
gs.show_grid = !gs.show_grid;
|
|
}
|
|
if ( end_x < 6*edge && end_x > 5*edge){
|
|
//y scalemode button
|
|
if (gs.y_scale_mode === 'log' ){
|
|
gs.y_scale_mode = 'lin';
|
|
} else {
|
|
gs.y_scale_mode = 'log';
|
|
}
|
|
}
|
|
if ( end_x < 7*edge && end_x > 6*edge){
|
|
//x scalemode button
|
|
if (gs.x_scale_mode === 'log' ){
|
|
gs.x_scale_mode = 'lin';
|
|
} else {
|
|
gs.x_scale_mode = 'log';
|
|
}
|
|
}
|
|
if ( end_x < 8*edge && end_x > 7*edge){
|
|
//x scalemode button
|
|
gs.x_scale_mode = 'time';
|
|
}
|
|
if ( end_x < 11*edge && end_x > 8*edge){
|
|
//f() menu button
|
|
graph.drawfxmenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 15*edge && end_x > 11*edge){
|
|
//line menu button
|
|
console.log('line menu button');
|
|
graph.drawlinemenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < 19*edge && end_x > 15*edge){
|
|
//fits menu button
|
|
console.log('fits menu button');
|
|
graph.drawfitsmenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < canvas.width && end_x > canvas.width - edge){
|
|
graph.drawexportmenu = true;
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
if ( end_x < canvas.width-edge && end_x > canvas.width - 2*edge){
|
|
//day/night data button
|
|
var temp = gs.color_fg
|
|
gs.color_fg = gs.color_bg;
|
|
gs.color_bg = temp;
|
|
}
|
|
if ( end_x < canvas.width-edge*2 && end_x > canvas.width - edge*3){
|
|
//fullscreen button
|
|
if (graph.isFullscreen){
|
|
graph.exit_full_screen();
|
|
} else {
|
|
graph.make_full_screen(graph);
|
|
}
|
|
}
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
//zoom without drag
|
|
if (gs.mouse_mode === 'zoom'){
|
|
ctx.rect(start_x-no_drag_size*0.5,start_y-no_drag_size*0.5,no_drag_size,no_drag_size);
|
|
ctx.stroke();
|
|
if( event.button=== 0){
|
|
gs.x_scale_auto_min = true;
|
|
gs.y_scale_auto_min = true;
|
|
gs.x_scale_auto_max = true;
|
|
gs.y_scale_auto_max = true;
|
|
gs.y_scale_tight = false;
|
|
gs.x_scale_tight = false;
|
|
}
|
|
else if(event.button === 2){
|
|
//console.log('was right click');
|
|
gs.x_scale_auto_min = false;
|
|
gs.y_scale_auto_min = false;
|
|
gs.x_scale_auto_max = false;
|
|
gs.y_scale_auto_max = false;
|
|
gs.y_scale_tight = false;
|
|
gs.x_scale_tight = false;
|
|
var f = 0.8;
|
|
gs.x_manual_min = graph.pixels_to_units(-f*gs.guideWidthx,'x');
|
|
gs.x_manual_max = graph.pixels_to_units(canvas.width+f*gs.guideWidthx,'x');
|
|
gs.y_manual_min = graph.pixels_to_units(canvas.height+f*gs.guideWidthy,'y');
|
|
gs.y_manual_max = graph.pixels_to_units(-f*gs.guideWidthy,'y');
|
|
}
|
|
}
|
|
|
|
//on mobile, don't replot the graph if using the measure mode.
|
|
if (graph.ui.touch && gs.mouse_mode === 'measure' && graph.ui.is_touching){
|
|
graph.graph_image = ctx.getImageData(0,0,canvas.width,canvas.height);
|
|
return;
|
|
}
|
|
//on mobile, don't replot the graph if using the measure mode.
|
|
if (graph.ui.touch && gs.mouse_mode === 'measure'){
|
|
graph.mjs_plot();return;
|
|
}
|
|
//dragging
|
|
if (gs.mouse_mode === 'drag'){
|
|
if (graph.ui.touch && graph.ui.is_touching){
|
|
|
|
start_x = 0.5*(touch_start_x[0]+touch_start_x[1]);
|
|
start_y = 0.5*(touch_start_y[0]+touch_start_y[1]);
|
|
|
|
end_x = 0.5*(touch_x[0]+touch_x[1]);
|
|
end_y = 0.5*(touch_y[0]+touch_y[1]);
|
|
|
|
var scale_x = (touch_x[0]-touch_x[1]) / (touch_start_x[0]-touch_start_x[1]);
|
|
var scale_y = (touch_y[0]-touch_y[1]) / (touch_start_y[0]-touch_start_y[1]);
|
|
scale_x = trim(Math.abs(scale_x),0.1,10);
|
|
scale_y = trim(Math.abs(scale_y),0.1,10);
|
|
|
|
//p + (1-1/scale)*( start-p )+ end - start
|
|
//this set of equations took two days of trial and fuck error. Lots of error.
|
|
var new_max_y = 0 + (1-1/scale_y)*( start_y-0 ) +(- end_y + start_y)/scale_y;
|
|
var new_min_y = canvas.height + (1-1/scale_y)*( start_y-canvas.height )+(- end_y + start_y)/scale_y
|
|
|
|
var new_max_x = canvas.width + (1-1/scale_x)*( start_x-canvas.width ) +(- end_x + start_x)/scale_x;
|
|
var new_min_x = 0 + (1-1/scale_x)*( start_x-0 ) +(- end_x + start_x)/scale_x
|
|
|
|
gs.y_manual_max = Math.min(1e250,graph.pixels_to_units(new_max_y,'y'));
|
|
gs.y_manual_min = Math.max(-1e250,graph.pixels_to_units(new_min_y,'y'));
|
|
gs.x_manual_min = Math.max(-1e250,graph.pixels_to_units(new_min_x,'x'));
|
|
gs.x_manual_max = Math.min(1e250,graph.pixels_to_units(new_max_x,'x'));
|
|
//the 1e250 is to protect the
|
|
|
|
gs.x_scale_auto_min = false;
|
|
gs.y_scale_auto_min = false;
|
|
gs.x_scale_auto_max = false;
|
|
gs.y_scale_auto_max = false;
|
|
gs.y_scale_tight = true;
|
|
gs.x_scale_tight = true;
|
|
|
|
graph.mjs_plot();return;
|
|
}
|
|
if (!graph.ui.touch){
|
|
|
|
gs.y_manual_max = graph.pixels_to_units(start_y-end_y+gs.guideWidthy+1,'y');
|
|
gs.y_manual_min = graph.pixels_to_units(canvas.height+start_y-end_y-gs.guideWidthy-1,'y');
|
|
gs.x_manual_min = graph.pixels_to_units(start_x-end_x+gs.guideWidthx-1,'x');
|
|
gs.x_manual_max = graph.pixels_to_units(canvas.width+start_x-end_x-gs.guideWidthx+1,'x');
|
|
gs.x_scale_auto_min = false;
|
|
gs.y_scale_auto_min = false;
|
|
gs.x_scale_auto_max = false;
|
|
gs.y_scale_auto_max = false;
|
|
gs.y_scale_tight = true;
|
|
gs.x_scale_tight = true;
|
|
|
|
graph.mjs_plot();return;
|
|
}
|
|
}
|
|
if (gs.mouse_mode === 'reader'){
|
|
//the the point that is closed to whene the mouse ended the click
|
|
//end_x = graph.pixels_to_units(end_x,'x');
|
|
//end_y = graph.pixels_to_units(end_y,'y');
|
|
var pi = 0;//index of the series it is in
|
|
var pj = 0;// index in the series.
|
|
var best_dist = 1e200;
|
|
var dist = 1e200;
|
|
for (i = 0;i<graph.data.length;i++){
|
|
for (j = 0;j<graph.data[i][0].length;j++){
|
|
var xi = graph.units_to_pixels(graph.data[i][0][j],'x');
|
|
var yi = graph.units_to_pixels(graph.data[i][1][j],'y');
|
|
dist = Math.sqrt( Math.pow(xi-end_x,2) + Math.pow(yi-end_y,2) );
|
|
if (dist < best_dist){
|
|
best_dist = dist;
|
|
pi = i;
|
|
pj = j;
|
|
}
|
|
}
|
|
}
|
|
graph.reader_index = [pi,pj];
|
|
mouse_move_event(event,graph);
|
|
return;
|
|
}
|
|
|
|
if (gs.mouse_mode === 'trim'){
|
|
//running trim
|
|
console.log('mouse trim');
|
|
var start_px = graph.pixels_to_units(start_x,'x');
|
|
var start_py = graph.pixels_to_units(start_y,'y');
|
|
var end_px = graph.pixels_to_units(end_x,'x');
|
|
var end_py = graph.pixels_to_units(end_y,'y');
|
|
var xlow = Math.min(start_px,end_px);
|
|
var ylow = Math.min(start_py,end_py);
|
|
var xhigh = Math.max(start_px,end_px);
|
|
var yhigh = Math.max(start_py,end_py);
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "trim";
|
|
gs.data_transforms_args[n] = [xlow,xhigh,ylow,yhigh];
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
|
|
if (gs.mouse_mode === 'sublin'){
|
|
//running cut
|
|
console.log('sublin');
|
|
var start_px = graph.pixels_to_units(start_x,'x');
|
|
var start_py = graph.pixels_to_units(start_y,'y');
|
|
var end_px = graph.pixels_to_units(end_x,'x');
|
|
var end_py = graph.pixels_to_units(end_y,'y');
|
|
|
|
var grad = (end_py-start_py) /(end_px-start_px);
|
|
var intercept = start_py-(grad*start_px);
|
|
|
|
if (isFinite(grad) && isFinite(intercept)){
|
|
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "sublin";
|
|
gs.data_transforms_args[n] = [grad,intercept];
|
|
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
}
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
return;
|
|
}
|
|
|
|
if (gs.mouse_mode === 'cut'){
|
|
//running cut
|
|
console.log('mouse cut');
|
|
var start_px = graph.pixels_to_units(start_x,'x');
|
|
var start_py = graph.pixels_to_units(start_y,'y');
|
|
var end_px = graph.pixels_to_units(end_x,'x');
|
|
var end_py = graph.pixels_to_units(end_y,'y');
|
|
var xlow = Math.min(start_px,end_px);
|
|
var ylow = Math.min(start_py,end_py);
|
|
var xhigh = Math.max(start_px,end_px);
|
|
var yhigh = Math.max(start_py,end_py);
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "cut";
|
|
gs.data_transforms_args[n] = [xlow,xhigh,ylow,yhigh];
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
|
|
if (graph.graphics_style.mouse_mode === 'y-c'){
|
|
//running cut
|
|
console.log('y-c');
|
|
var c = graph.pixels_to_units(end_y,'y');
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "y_c";
|
|
gs.data_transforms_args[n] = [c];
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'x-c'){
|
|
//running cut
|
|
console.log('y-c');
|
|
var c = graph.pixels_to_units(end_x,'x');
|
|
var n = gs.data_transforms.length;
|
|
gs.data_transforms[n] = "x_c";
|
|
gs.data_transforms_args[n] = [c];
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkertext'){
|
|
|
|
var x = graph.pixels_to_units(end_x,'x');
|
|
var y = graph.pixels_to_units(end_y,'y');
|
|
|
|
gs.markers.push( {type:'text',text:graph.markerText,handles:[ [x,y] ] } );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerarrow'){
|
|
var x = graph.pixels_to_units(end_x,'x');
|
|
var y = graph.pixels_to_units(end_y,'y');
|
|
var sx = graph.pixels_to_units(start_x,'x');
|
|
var sy = graph.pixels_to_units(start_y,'y');
|
|
gs.markers.push( {type:'arrow',text:'',handles:[[x,y],[sx,sy]]} );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerarrowntext'){
|
|
var x = graph.pixels_to_units(end_x,'x');
|
|
var y = graph.pixels_to_units(end_y,'y');
|
|
var sx = graph.pixels_to_units(start_x,'x');
|
|
var sy = graph.pixels_to_units(start_y,'y');
|
|
gs.markers.push( {type:'arrowntext',text:graph.markerText,handles:[[x,y],[sx,sy]]} );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerline'){
|
|
console.log('adding marker line');
|
|
var sx = graph.pixels_to_units(start_x,'x');
|
|
var sy = graph.pixels_to_units(start_y,'y');
|
|
var ex = graph.pixels_to_units(end_x,'x');
|
|
var ey = graph.pixels_to_units(end_y,'y');
|
|
gs.markers.push( { type:'line',text:'', handles:[[sx,sy],[ex,ey]]} );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerlinentext'){
|
|
console.log('adding marker line');
|
|
var sx = graph.pixels_to_units(start_x,'x');
|
|
var sy = graph.pixels_to_units(start_y,'y');
|
|
var ex = graph.pixels_to_units(end_x,'x');
|
|
var ey = graph.pixels_to_units(end_y,'y');
|
|
gs.markers.push( { type:'linentext',text:graph.markerText, handles:[[sx,sy],[ex,ey]]} );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerbox'){
|
|
console.log('adding marker line');
|
|
var sx = graph.pixels_to_units(start_x,'x');
|
|
var sy = graph.pixels_to_units(start_y,'y');
|
|
var ex = graph.pixels_to_units(end_x,'x');
|
|
var ey = graph.pixels_to_units(end_y,'y');
|
|
gs.markers.push( { type:'box',text:'',handles:[ [sx,sy] , [ex,ey] ] } );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
if (gs.mouse_mode === 'addmarkerboxntext'){
|
|
console.log('adding marker line');
|
|
var sx = graph.pixels_to_units(start_x,'x');
|
|
var sy = graph.pixels_to_units(start_y,'y');
|
|
var ex = graph.pixels_to_units(end_x,'x');
|
|
var ey = graph.pixels_to_units(end_y,'y');
|
|
gs.markers.push( { type:'boxntext',text:graph.markerText, handles:[ [sx,sy] , [ex,ey] ] } );
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
|
|
|
|
if (gs.mouse_mode === 'removeMarker'){
|
|
var best_dist = 1e200;
|
|
var dist = 1e200;
|
|
var pi=0;
|
|
for (i = 0;i<gs.markers.length;i++){
|
|
var m = gs.markers[i];
|
|
dist = Math.sqrt( Math.pow(graph.units_to_pixels(m.x,'x')-end_x,2) + Math.pow(graph.units_to_pixels(m.y,'y')-end_y,2) );
|
|
if (dist < best_dist){
|
|
best_dist = dist;
|
|
pi = i;
|
|
}
|
|
}
|
|
if (best_dist < edge){
|
|
gs.markers.splice(pi,1);
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
}
|
|
if (gs.mouse_mode === 'markeredit'){
|
|
var best_dist = 1e200;
|
|
var dist = 1e200;
|
|
var pi=0;
|
|
for (i = 0;i<gs.markers.length;i++){
|
|
var m = gs.markers[i];
|
|
dist = Math.sqrt( Math.pow(graph.units_to_pixels(m.x,'x')-end_x,2) + Math.pow(graph.units_to_pixels(m.y,'y')-end_y,2) );
|
|
if (dist < best_dist){
|
|
best_dist = dist;
|
|
pi = i;
|
|
}
|
|
}
|
|
if (best_dist < edge){
|
|
gs.markers[pi].text = getString("New Text:",gs.markers[pi].text );
|
|
graph.mjs_plot();
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
if (gs.mouse_mode === 'mouse'){
|
|
console.log(graph.ui.drag_object.item)
|
|
if (graph.ui.mouse_is_dragging && graph.ui.drag_object.item === 'marker'){
|
|
console.log(graph.ui.drag_object)
|
|
gs.markers[graph.ui.drag_object.i].handles[graph.ui.drag_object.j][0] =
|
|
graph.pixels_to_units(end_x,'x');
|
|
gs.markers[graph.ui.drag_object.i].handles[graph.ui.drag_object.j][1] =
|
|
graph.pixels_to_units(end_y,'y');
|
|
|
|
}
|
|
if (graph.ui.mouse_is_dragging && graph.ui.drag_object === 'fit_text'){
|
|
gs.fit_text_position.x = end_x/canvas.width;
|
|
gs.fit_text_position.y = end_y/canvas.height;
|
|
}
|
|
if (graph.ui.mouse_is_dragging && graph.ui.drag_object === 'title_spacing'){
|
|
gs.title_spacing = (end_y - (gs.tick_len+gs.title_font_size)*gs.scaling_factor)/gs.scaling_factor;
|
|
|
|
//gs.+gs.title_font_size
|
|
}
|
|
if (graph.ui.mouse_is_dragging && graph.ui.drag_object === 'caption_position'){
|
|
if (end_x > canvas.width/2){
|
|
//on right side
|
|
gs.caption_position.x = (canvas.width-end_x-gs.tick_len*gs.scaling_factor)*-1/gs.scaling_factor;
|
|
} else {
|
|
gs.caption_position.x = (end_x-gs.tick_len*gs.scaling_factor)/gs.scaling_factor;
|
|
}
|
|
if (end_y > canvas.height/2){
|
|
//on bottom half
|
|
gs.caption_position.y = (canvas.height-end_y-gs.tick_len*gs.scaling_factor)*-1/gs.scaling_factor;
|
|
} else {
|
|
gs.caption_position.y = (end_y-gs.tick_len*gs.scaling_factor)/gs.scaling_factor;
|
|
}
|
|
}
|
|
graph.mjs_plot();
|
|
mouse_move_event(event,graph);
|
|
graph.ui.mouse_is_dragging = false;
|
|
return;
|
|
}
|
|
// if the mouse mode is 'i' then the covering rectangle hides everything
|
|
// clicking in this mode changes the mouse to zoom and remove the info panel.
|
|
//this should stop users feeling stuck.
|
|
if (gs.mouse_mode === 'i'){
|
|
gs.mouse_mode = graph.pre_mouse_mode;
|
|
gs.i = 0;
|
|
//if the last mouse mode was laso 'i' then just switch to zoom. a psudo default.
|
|
if (gs.mouse_mode === 'i'){
|
|
gs.mouse_mode = 'zoom';
|
|
}
|
|
}
|
|
|
|
graph.mjs_plot();
|
|
}
|
|
|
|
var touch_start_x = [];
|
|
var touch_start_y = [];
|
|
var touch_x = [];
|
|
var touch_y = [];
|
|
|
|
function touch_start_event(event,graph){
|
|
//console.log('touch start');
|
|
event.preventDefault();
|
|
graph.ui.is_touching = true;
|
|
var rect = graph.canvas.getBoundingClientRect();
|
|
touch_start_x[0] = event.targetTouches[0].clientX-rect.left;
|
|
touch_start_y[0] = event.targetTouches[0].clientY-rect.top;
|
|
if (event.targetTouches.length >= 2){
|
|
touch_start_x[1] = event.targetTouches[1].clientX-rect.left;
|
|
touch_start_y[1] = event.targetTouches[1].clientY-rect.top;
|
|
}
|
|
touch_move_event(event,graph);
|
|
}
|
|
|
|
function touch_move_event(event,graph){
|
|
//console.log('touch move');
|
|
//document.getElementById('errors').innerHTML="touch move event";
|
|
my_touches = event.targetTouches;
|
|
event.preventDefault();
|
|
graph.ui.is_touching = true;
|
|
mouse_down = my_touches.length >=2;
|
|
var rect = graph.canvas.getBoundingClientRect();
|
|
|
|
start_x = event.targetTouches[0].clientX-rect.left;
|
|
start_y = event.targetTouches[0].clientY-rect.top;
|
|
|
|
touch_x[0] = event.targetTouches[0].clientX-rect.left;
|
|
touch_y[0] = event.targetTouches[0].clientY-rect.top;
|
|
if (event.targetTouches.length > 1){
|
|
touch_x[1] = event.targetTouches[1].clientX-rect.left;
|
|
touch_y[1] = event.targetTouches[1].clientY-rect.top;
|
|
}
|
|
event.clientX = my_touches[my_touches.length-1].clientX;//+rect.left;
|
|
event.clientY = my_touches[my_touches.length-1].clientY;//+rect.top;
|
|
mouse_move_event(event,graph);
|
|
|
|
}
|
|
|
|
function touch_cancel_event(event,graph){
|
|
graph.ui.is_touching = event.targetTouches.length != 0;
|
|
event.preventDefault();
|
|
touch_end_event(event,graph);
|
|
}
|
|
function touch_leave_event(event,graph){
|
|
touch_end_event(event,graph);
|
|
}
|
|
|
|
function touch_click_event(event,graph){
|
|
rect = graph.canvas.getBoundingClientRect();
|
|
start_x = event.clientX - rect.left;
|
|
start_y = event.clientY - rect.top;
|
|
mouse_up_event(event,graph);
|
|
|
|
}
|
|
function touch_end_event(event,graph){
|
|
//event.preventDefault();
|
|
graph.ui.is_touching = event.targetTouches.length != 0;
|
|
rect = graph.canvas.getBoundingClientRect();
|
|
start_x = my_touches[0].clientX-rect.left;;//+rect.left;
|
|
start_y = my_touches[0].clientY-rect.top;;//+rect.top;
|
|
event.clientX = my_touches[my_touches.length-1].clientX;//+rect.left;
|
|
event.clientY = my_touches[my_touches.length-1].clientY;//+rect.top;
|
|
mouse_up_event(event,graph);
|
|
}
|
|
|
|
function keep_parent_sized (e,graph){
|
|
// Make it visually fill the positioned parent
|
|
graph.canvas.style.width ='100%';
|
|
graph.canvas.style.height='100%';
|
|
// ...then set the internal size to match
|
|
graph.canvas.width = canvas.offsetWidth;
|
|
graph.canvas.height = canvas.offsetHeight;
|
|
//graph.canvas.width = some_graph.canvas.parentNode.clientWidth;
|
|
//graph.canvas.height = some_graph.canvas.parentNode.clientHeight;
|
|
graph.mjs_plot();
|
|
}
|
|
|
|
function make_interactive(graph){
|
|
if (graph.ui.touch){
|
|
graph.canvas.addEventListener("touchstart", function(event){touch_start_event(event,graph);}, false);
|
|
graph.canvas.addEventListener("touchend", function(event){touch_end_event(event,graph);}, false);
|
|
graph.canvas.addEventListener("touchmove", function(event){touch_move_event(event,graph);}, false);
|
|
graph.canvas.addEventListener("touchcancel", function(event){touch_cancel_event(event,graph);}, false);
|
|
graph.canvas.addEventListener("touchleave", function(event){touch_leave_event(event,graph);}, false);
|
|
graph.canvas.addEventListener("click", function(event){touch_click_event(event,graph);}, false);
|
|
} else {
|
|
graph.canvas.addEventListener('mousemove', function(event){mouse_move_event(event,graph);}, false);
|
|
graph.canvas.addEventListener('mousedown', function(event){mouse_down_event(event,graph);}, false);
|
|
graph.canvas.addEventListener('mouseup', function(event){mouse_up_event(event,graph);} , false);
|
|
graph.canvas.addEventListener('mouseout', function(event){mouse_out_event(event,graph);} , false);
|
|
}
|
|
|
|
graph.canvas.oncontextmenu = function (e) {e.preventDefault();};
|
|
// TODO get keyboard to work. z for zoom, m for measure, c for cut etc....
|
|
//graph.canvas.addEventListener('keydown', function(event){keypress_event(event,graph);} , false);
|
|
}
|
|
|
|
function SVGContext(ctx){
|
|
this.target = document.getElementById("_mjsplotSVG");
|
|
this.targetStack = [];
|
|
this._ctx = ctx;//borrow from the 2dcanvas context
|
|
this.x=0;
|
|
this.y=0;
|
|
this.strokeStyle = '#000';
|
|
this.lineWidth = 2;
|
|
this.lineCap;
|
|
this.lineJoin;
|
|
this.miterLimit=10;
|
|
//.getLineDash()
|
|
//.setLineDash()
|
|
//.lineDashOffset
|
|
this.font;
|
|
this.textAlign = 'left';// or center or right
|
|
this.textBaseline = 'alphabetic';//or top hanging middle ideographic bottom.
|
|
this.direction = 'inherit';//or ltr rtl
|
|
//.createLinearGradient()
|
|
//.createRadialGradient()
|
|
this._pixel_precision = 2;
|
|
//.createPattern()
|
|
//.shadowBlur = 0;
|
|
//.shadowColor = ctx.shadowColor;
|
|
//.shadowOffsetX
|
|
//.shadowOffsetY
|
|
|
|
/*.bezierCurveTo()
|
|
.arc()
|
|
.arcTo()
|
|
.rect()
|
|
.drawFocusIfNeeded()
|
|
.scrollPathIntoView()
|
|
.clip()
|
|
.isPointInPath()
|
|
.isPointInStroke()
|
|
*/
|
|
this._shape_type = 'path';
|
|
this.fillStyle = '#000';
|
|
this._path = '';
|
|
this._isdrawn = false;
|
|
this.clearAll = function(){
|
|
while (this.target.lastChild) {
|
|
this.target.removeChild(this.target.lastChild);
|
|
}
|
|
}
|
|
this.arc = function(x,y,r,a1,a2,direction){
|
|
this._shape_type = 'arc';
|
|
this._shape = document.createElementNS(svgNS, "circle");
|
|
this._shape.setAttributeNS(null, "stroke-width", this.lineWidth.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "stroke", this.strokeStyle);
|
|
this._shape.setAttributeNS(null, "r", r.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "cx", x.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "cy", y.toFixed(this._pixel_precision));
|
|
}
|
|
this.moveTo = function (x,y){
|
|
this._path+= ' M' + x.toFixed(this._pixel_precision) + ' ' + y.toFixed(this._pixel_precision);
|
|
}
|
|
this.lineTo = function (x,y){
|
|
this._path += ' L' + x.toFixed(this._pixel_precision) + ' ' + y.toFixed(this._pixel_precision);
|
|
}
|
|
this.beginPath = function(){
|
|
this._shape_type = 'path';
|
|
this._shape = document.createElementNS(svgNS, "path");
|
|
this._path = '';
|
|
this._isdrawn = false;
|
|
}
|
|
this.closePath = function(){
|
|
this._path += 'Z';
|
|
}
|
|
this.quadraticCurveTo = function(x1,y1,x2,y2){
|
|
this._path += ' Q' + x1.toFixed(this._pixel_precision) +' '+ y1.toFixed(this._pixel_precision) +' '+ x2.toFixed(this._pixel_precision) +' '+ y2.toFixed(this._pixel_precision);
|
|
}
|
|
this.bezierCurveTo = function(x1,y1,x2,y2,x3,y3){
|
|
console.log('bezierCurveTo is not implemented yet');
|
|
this._path += ' Q' + (x1+x2)/02 +' '+ (y1+y2)/2 +' '+ x3.toFixed(this._pixel_precision) +' '+ y3.toFixed(this._pixel_precision);
|
|
}
|
|
this.stroke = function (){
|
|
|
|
this._shape.setAttributeNS(null, "fill", 'none');
|
|
this._shape.setAttributeNS(null, "stroke-width", this.lineWidth.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "stroke", this.strokeStyle);
|
|
if (!this._isdrawn){
|
|
if (this._shape_type === 'path'){ this._shape.setAttributeNS(null, "d", this._path); }
|
|
if (this.globalAlpha <1 ){
|
|
this._shape.setAttributeNS(null, "opacity", this.globalAlpha.toFixed(2));
|
|
}
|
|
this.target.appendChild(this._shape);
|
|
this._isdrawn = true;
|
|
}
|
|
}
|
|
this.fill = function(){
|
|
this._shape.setAttributeNS(null, "fill", this.fillStyle);
|
|
if (!this._isdrawn){
|
|
if (this._shape_type === 'path'){ this._shape.setAttributeNS(null, "d", this._path); }
|
|
this.target.appendChild(this._shape);
|
|
this._isdrawn = true;
|
|
}
|
|
}
|
|
this.fillText = function (l,x,y){
|
|
var t = document.createElementNS(svgNS, "text");
|
|
var anchor = 'start';
|
|
switch (this.textAlign){
|
|
case 'left':anchor = 'start';break
|
|
case 'right':anchor = 'end';break
|
|
case 'center':anchor = 'middle';break
|
|
case 'middle':anchor = 'middle';break
|
|
}
|
|
t.setAttributeNS(null, "text-anchor", anchor);
|
|
t.setAttributeNS(null, "fill", this.fillStyle);
|
|
t.setAttributeNS(null, "x", x.toFixed(this._pixel_precision));
|
|
t.setAttributeNS(null, "x", x.toFixed(this._pixel_precision));
|
|
t.setAttributeNS(null, "font-family", this.font_name );
|
|
t.setAttributeNS(null, "y", y.toFixed(this._pixel_precision));
|
|
t.setAttributeNS(null, "font-size", parseFloat(this.font.split(' ')[0].slice(0,-2)).toFixed(this._pixel_precision) );
|
|
|
|
t.textContent=l;
|
|
this.target.appendChild(t);
|
|
}
|
|
this.rect = function(x,y,w,h){
|
|
this.moveTo(x,y);
|
|
this.lineTo(x+w,y);
|
|
this.lineTo(x+w,y+h);
|
|
this.lineTo(x,y+h);
|
|
this.lineTo(x,y);
|
|
}
|
|
this.fillRect = function(x,y,w,h){
|
|
this.beginPath();
|
|
this.rect(x,y,w,h);
|
|
this.fill();
|
|
}
|
|
this.strokeText = function (l,x,y){ }
|
|
this.startGroup = function(){
|
|
this.targetStack.push(this.target);
|
|
var g = document.createElementNS(svgNS, "g");
|
|
this.target.appendChild(g);
|
|
this.target = g;
|
|
}
|
|
this.endGroup = function(){
|
|
this.target = this.targetStack.pop();
|
|
}
|
|
this.startClipBox = function(x,y,w,h){
|
|
var defs = document.createElementNS(svgNS, "defs");
|
|
var clippath = document.createElementNS(svgNS, "clipPath");
|
|
clippath.setAttributeNS(null, "id", "graphClipPath");
|
|
var rect = document.createElementNS(svgNS, "rect");
|
|
rect.setAttributeNS(null, 'x', x.toFixed());
|
|
rect.setAttributeNS(null, 'y', y.toFixed());
|
|
rect.setAttributeNS(null, 'width', w.toFixed());
|
|
rect.setAttributeNS(null, 'height', h.toFixed());
|
|
|
|
clippath.appendChild(rect);
|
|
defs.appendChild(clippath);
|
|
this.target.appendChild(defs);
|
|
this.targetStack.push(this.target);
|
|
var g = document.createElementNS(svgNS, "g");
|
|
g.setAttributeNS(null, 'clip-path', 'url(#graphClipPath)' );
|
|
this.target.appendChild(g);
|
|
this.target = g;
|
|
}
|
|
this.getImageData = this._ctx.getImageData;
|
|
this.measureText = function(s){return {width:this._ctx.measureText(s).width}} ;
|
|
|
|
this.image = function (x,y,w,h,data){
|
|
this._shape = document.createElementNS(svgNS, "image");
|
|
|
|
this._shape.setAttributeNS(null, "x", x.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "y", y.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "width", w.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS(null, "height", h.toFixed(this._pixel_precision));
|
|
this._shape.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", data );
|
|
this.target.appendChild(this._shape);
|
|
this._isdrawn = true;
|
|
}
|
|
}
|
|
|
|
function drawSplash(canvas,ctx){
|
|
ctx.textAlign="center";
|
|
|
|
ctx.beginPath();
|
|
ctx.font='20 px "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace"';
|
|
ctx.fillText('MJS Plot',canvas.width/2,canvas.height/2-20);
|
|
ctx.font='10 px "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace"';
|
|
ctx.fillText('Setting Up',canvas.width/2,canvas.height/2+20);
|
|
ctx.rect(10,10,canvas.width-20,canvas.height-20);
|
|
ctx.stroke();
|
|
}
|
|
|
|
var transforms = {
|
|
scale_x: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = data[i][0][j] * args[0];
|
|
}
|
|
}
|
|
graph.transform_text_x= graph.transform_text_x +'*'+mjs_precision(args[0],1);
|
|
},
|
|
log_x: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = Math.log10(data[i][0][j]);
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_x= 'log('+graph.transform_text_x +')';
|
|
},
|
|
x_c: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = data[i][0][j]-args[0];
|
|
}
|
|
}
|
|
graph.transform_text_x= graph.transform_text_x +'-'+ mjs_precision(args[0],graph.graphics_style.x_precision+1);
|
|
},
|
|
y_c: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = data[i][1][j]-args[0];
|
|
}
|
|
}
|
|
graph.transform_text_y = graph.transform_text_y +'-'+ mjs_precision(args[0],graph.graphics_style.y_precision+1);
|
|
},
|
|
remove_lines: function(data,args,graph){
|
|
for (var ii = data.length - 1; ii >= 0; ii--){
|
|
if (args[ii]){
|
|
data.splice(ii,1);
|
|
graph.captions.splice(ii,1);
|
|
graph.colors.splice(ii,1);
|
|
graph.line_modes.splice(ii,1);
|
|
graph.symbol_modes.splice(ii,1);
|
|
}
|
|
}
|
|
},
|
|
y_vs_y: function(data,args,graph){
|
|
|
|
//args[0] is the series ment to be the x-axis.
|
|
var x_axis = args[0] % data.length; //might be bigger than the data, so roll around
|
|
|
|
console.log(x_axis);
|
|
var points = data[x_axis][0].length //Math.min(data[0][1].length,data[1][1].length);
|
|
|
|
for (var i = 0;i<data.length;i++){
|
|
var points = Math.min(data[i][0].length,data[x_axis][0].length);
|
|
if (i!=x_axis){
|
|
var newx = [];
|
|
var newy = [];
|
|
for (var j = 0;j<points;j++){
|
|
newx[j] = data[x_axis][1][j];
|
|
newy[j] = data[i][1][j];
|
|
}
|
|
data[i] = [ clone(newx),clone(newy) ];
|
|
graph.captions[i] = graph.captions[x_axis] + ' vs ' + graph.captions[i];
|
|
}
|
|
}
|
|
graph.transform_text_x= graph.captions[x_axis] + '('+graph.transform_text_y +')';
|
|
//graph.transform_text_y= graph.captions[1] + '('+graph.transform_text_y +')';
|
|
//data.splice(1,data.length-1);
|
|
graph.captions.splice(x_axis,1);
|
|
data.splice(x_axis,1);
|
|
graph.colors.splice(x_axis,1);
|
|
},
|
|
sum: function(data,args,graph){
|
|
var points = Math.min(data[0][0].length);
|
|
var newx = [];
|
|
var newy = [];
|
|
for (j = 0;j<data[0][0].length;j++){
|
|
newx[j] = data[0][0][j];
|
|
newy[j] = 0.0;
|
|
for (i = 0;i<data.length;i++){
|
|
newy[j] += data[i][1][j];
|
|
}
|
|
}
|
|
var t = "sum("
|
|
for (i = 0;i<data.length;i++){
|
|
t+= ", " + graph.captions[i];
|
|
}
|
|
t += ")"
|
|
|
|
data[0] = [ newx,newy ];
|
|
data.splice(1,data.length-1);
|
|
graph.captions[0] = t ;
|
|
graph.captions.splice(1,data.length-1);
|
|
graph.transform_text_y = "sum(" + graph.transform_text_y +")";
|
|
transforms.clean(data,graph);
|
|
|
|
},
|
|
ln_x: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = Math.log(data[i][0][j]);
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
console.log(data);
|
|
graph.transform_text_x= 'ln('+graph.transform_text_x +')';
|
|
},
|
|
e_to_x: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = Math.pow(Math.E,data[i][0][j]);
|
|
}
|
|
}
|
|
graph.transform_text_x= 'e^('+graph.transform_text_x +')';
|
|
},
|
|
ten_to_x: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = Math.pow(10,data[i][0][j]);
|
|
}
|
|
}
|
|
graph.transform_text_x= '10^('+graph.transform_text_x +')';
|
|
},
|
|
scale_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][1][j] = data[i][1][j] * args[0];
|
|
}
|
|
}
|
|
graph.transform_text_y= graph.transform_text_y +'*'+mjs_precision(args[0],1);
|
|
},
|
|
log_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = Math.log10(data[i][1][j]);
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= 'log('+graph.transform_text_y +')';
|
|
},
|
|
ln_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = Math.log(data[i][1][j]);
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
|
|
graph.transform_text_y= 'ln('+graph.transform_text_y +')';
|
|
},
|
|
e_to_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = Math.pow(Math.E,data[i][1][j]);
|
|
}
|
|
}
|
|
graph.transform_text_y= 'e^('+graph.transform_text_y +')';
|
|
},
|
|
ten_to_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = Math.pow(10,data[i][1][j]);
|
|
}
|
|
}
|
|
graph.transform_text_y= '10^('+graph.transform_text_y +')';
|
|
},
|
|
one_over_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][1][j] = 1.0 / data[i][1][j];
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= '1/('+graph.transform_text_y +')';
|
|
},
|
|
custom_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
data[i][1] = parseExpression(args[0],data[i][0],data[i][1])
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= 'f('+graph.transform_text_y +')';
|
|
},
|
|
custom_filter: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
var filter = parseExpression(args[0],data[i][0],data[i][1]);
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
if (!filter[j]){
|
|
data[i][1][j] = NaN;
|
|
}
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= 'filter('+graph.transform_text_y +')';
|
|
|
|
},
|
|
one_over_x: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = 1.0 / data[i][0][j];
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_x= '1/('+graph.transform_text_x +')';
|
|
},
|
|
x_pow_n: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = Math.pow(data[i][0][j],args[0]);
|
|
}
|
|
}
|
|
graph.transform_text_x= '('+graph.transform_text_x +')^'+args[0];
|
|
},
|
|
y_pow_n: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = Math.pow(data[i][1][j],args[0]);
|
|
}
|
|
}
|
|
graph.transform_text_y= '('+graph.transform_text_y +')^'+args[0];
|
|
},
|
|
add_me: function(data,args,graph){
|
|
graph.data = [[[2,2,3,4,4],[2,5,4,5,2]],[[5,7,6,6,5],[5,5,5,2,2]],[[8,10,10,8,8,10],[2,2,4,4,5,5]],[[1,1,11,11,1],[1,6,6,1,1]]];
|
|
graph.captions = ['m','j','s',' '];
|
|
},
|
|
y_nth_root: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = Math.pow(Math.abs(data[i][1][j]),1/args[0]);
|
|
}
|
|
}
|
|
graph.transform_text_y= '('+graph.transform_text_y +')^1/'+args[0];
|
|
},
|
|
x_nth_root: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][0][j] = Math.pow(Math.abs(data[i][0][j]),1/args[0]);
|
|
}
|
|
}
|
|
graph.transform_text_x= '('+graph.transform_text_x +')^1/'+args[0];
|
|
},
|
|
trim:function(data,args,graph){
|
|
//removes any data outside of the box
|
|
var xlow = args[0];
|
|
var xhigh = args[1];
|
|
var ylow = args[2];
|
|
var yhigh = args[3];
|
|
for (i = 0;i<data.length;i++){
|
|
for(var ii = data[i][0].length - 1; ii >= 0; ii--) {
|
|
if( data[i][0][ii] < xlow ||
|
|
data[i][0][ii] > xhigh ||
|
|
data[i][1][ii] < ylow ||
|
|
data[i][1][ii] > yhigh ) {
|
|
data[i][0][ii] = NaN;
|
|
}
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_x= 'trim('+graph.transform_text_x +')';
|
|
graph.transform_text_y= 'trim('+graph.transform_text_y +')';
|
|
},
|
|
cut:function(data,args,graph){
|
|
//like trim, but removes any data in the box
|
|
var xlow = args[0];
|
|
var xhigh = args[1];
|
|
var ylow = args[2];
|
|
var yhigh = args[3];
|
|
for (i = 0;i<data.length;i++){
|
|
for(var ii = data[i][0].length - 1; ii >= 0; ii--) {
|
|
if( !(data[i][0][ii] < xlow ||
|
|
data[i][0][ii] > xhigh ||
|
|
data[i][1][ii] < ylow ||
|
|
data[i][1][ii] > yhigh)) {
|
|
data[i][0][ii] = NaN;
|
|
}
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_x= 'cut('+graph.transform_text_x +')';
|
|
graph.transform_text_y= 'cut('+graph.transform_text_y +')';
|
|
},
|
|
remove_linear: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
slope = linear_regression(data[i][0],data[i][1]);
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][1][j] = data[i][1][j] - slope.a - slope.b*data[i][0][j];
|
|
}
|
|
}
|
|
|
|
graph.transform_text_y= 'sub_linear('+graph.transform_text_y +')';
|
|
},
|
|
sublin : function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][1][j] = data[i][1][j] - args[1] - args[0]*data[i][0][j];
|
|
}
|
|
}
|
|
var p = Math.max(graph.graphics_style.x_precision,graph.graphics_style.y_precision)+1;
|
|
graph.transform_text_y= graph.transform_text_y +'-'+mjs_precision(args[1],p) +'-'+ mjs_precision(args[0],p)+'x';
|
|
},
|
|
swap_x_y: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
temp = data[i][0];
|
|
data[i][0] = data[i][1];
|
|
data[i][1] = temp;
|
|
}
|
|
var temp = graph.transform_text_x;
|
|
graph.transform_text_x= graph.transform_text_y;
|
|
graph.transform_text_y= temp;
|
|
},
|
|
normalise: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
ymin = Math.min.apply(null, data[i][1] );
|
|
ymax = Math.max.apply(null, data[i][1] );
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = (data[i][1][j] - ymin)/(ymax-ymin);
|
|
}
|
|
}
|
|
graph.transform_text_y= 'norm('+graph.transform_text_y +')';
|
|
},
|
|
mean_normalise: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
var s = series_stats(data[i][0],data[i][1]);
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = (data[i][1][j] - s.y_mean)/(s.sigma_y);
|
|
}
|
|
}
|
|
graph.transform_text_y= 'norm('+graph.transform_text_y +')';
|
|
},
|
|
clean: function(data,graph){
|
|
//cut off any infinites NaNs
|
|
for (i = 0;i<data.length;i++){
|
|
|
|
if (data[i].length == 2){
|
|
/* this new method is much faster than the old method.
|
|
it takes about the same time when removing 1 point, but can be 22x faster when removing many points.
|
|
*/
|
|
var missing = 0;
|
|
var len = data[i][0].length;
|
|
var ii=0;
|
|
var j = 0;
|
|
while (ii < len){
|
|
if( ( isFinite(data[i][1][ii]) && isFinite(data[i][0][ii]) ) ) {
|
|
data[i][0][j] = data[i][0][ii];
|
|
data[i][1][j] = data[i][1][ii];
|
|
j++;
|
|
} else {
|
|
missing++;
|
|
}
|
|
ii++;
|
|
}
|
|
data[i][0] = data[i][0].slice(0,len-missing);
|
|
data[i][1] = data[i][1].slice(0,len-missing);
|
|
}
|
|
|
|
if (data[i].length == 3){
|
|
var missing = 0;
|
|
var len = data[i][0].length;
|
|
var ii=0;
|
|
var j = 0;
|
|
while (ii < len){
|
|
if( ( isFinite(data[i][1][ii]) && isFinite(data[i][0][ii]) ) ) {
|
|
data[i][0][j] = data[i][0][ii];
|
|
data[i][1][j] = data[i][1][ii];
|
|
data[i][2][j] = data[i][1][ii];
|
|
j++;
|
|
} else {
|
|
missing++;
|
|
}
|
|
ii++;
|
|
}
|
|
data[i][0] = data[i][0].slice(0,len-missing);
|
|
data[i][1] = data[i][1].slice(0,len-missing);
|
|
data[i][2] = data[i][1].slice(0,len-missing);
|
|
}
|
|
|
|
if (data[i].length == 4){
|
|
var missing = 0;
|
|
var len = data[i][0].length;
|
|
var ii=0;
|
|
var j = 0;
|
|
while (ii < len){
|
|
if( ( isFinite(data[i][1][ii]) && isFinite(data[i][0][ii]) ) ) {
|
|
data[i][0][j] = data[i][0][ii];
|
|
data[i][1][j] = data[i][1][ii];
|
|
data[i][2][j] = data[i][1][ii];
|
|
data[i][3][j] = data[i][1][ii];
|
|
j++;
|
|
} else {
|
|
missing++;
|
|
}
|
|
ii++;
|
|
}
|
|
data[i][0] = data[i][0].slice(0,len-missing);
|
|
data[i][1] = data[i][1].slice(0,len-missing);
|
|
data[i][2] = data[i][1].slice(0,len-missing);
|
|
data[i][3] = data[i][1].slice(0,len-missing);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
//remove any empty series.
|
|
for (var ii = data.length - 1; ii >= 0; ii--){
|
|
if (data[ii][0].length == 0){
|
|
data.splice(ii,1);
|
|
graph.captions.splice(ii,1);
|
|
graph.colors.splice(ii,1);
|
|
graph.symbol_modes.splice(ii,1);
|
|
graph.line_modes.splice(ii,1);
|
|
}
|
|
}
|
|
},
|
|
intergrate: function(data,args,graph){
|
|
var tally = 0;
|
|
for (i = 0;i<data.length;i++){
|
|
tally = 0;
|
|
tallys = [];
|
|
tallys[0] = 0.0;
|
|
for (j = 0;j<data[i][0].length-1;j++){
|
|
tally += (data[i][0][j+1] - data[i][0][j]) * (data[i][1][j+1] + data[i][1][j])/2;
|
|
tallys[j+1] = tally;
|
|
}
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][1][j] = tallys[j];
|
|
}
|
|
}
|
|
graph.transform_text_y= 'int('+graph.transform_text_y +')';
|
|
},
|
|
accumulate: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 1;j<data[i][0].length;j++){
|
|
data[i][1][j] = data[i][1][j] + data[i][1][j-1];
|
|
}
|
|
}
|
|
graph.transform_text_y= 'accumulate('+graph.transform_text_y +')';
|
|
},
|
|
smooth: function(data,args,graph){
|
|
//simple linear smooth for now...
|
|
var l = 0;
|
|
var h = 0;
|
|
var sumy= 0;
|
|
var sumx = 0
|
|
for (i = 0;i<data.length;i++){
|
|
var width = Math.round(Math.min(data[i][0].length/3,args[0]/2)); //is half the apiture size
|
|
var newx = [];
|
|
var newy = [];
|
|
var weights =[];
|
|
//find weights
|
|
var len = data[i][0].length;
|
|
weights[0] = Math.sqrt(Math.pow(2*(data[i][0][1]-data[i][0][0]),2)+Math.pow(2*(data[i][1][1]-data[i][1][0]),2));
|
|
weights[len-1] = Math.sqrt(Math.pow(2*(data[i][0][len-1]-data[i][0][len-2]),2)+Math.pow(2*(data[i][0][len-1]-data[i][1][len-2]),2));
|
|
for (j = 1;j<data[i][0].length-1;j++){
|
|
weights[j] = Math.sqrt(Math.pow(data[i][0][j+1]-data[i][0][j-1],2)+Math.pow(data[i][1][j+1]-data[i][1][j-1],2));
|
|
}
|
|
//weights[0] = weights[1];
|
|
//weights[len-1] = weights[len-2];
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
l = Math.max(j-width,0);
|
|
h = Math.min(j+width,data[i][0].length-1);
|
|
d = h-l;
|
|
sumy = 0;
|
|
sumx = 0;
|
|
sumw = 0;
|
|
for (var k = l;k<h;k++){
|
|
sumx += data[i][0][k]*weights[k];
|
|
sumy += data[i][1][k]*weights[k];
|
|
sumw += weights[k];
|
|
}
|
|
newy[j] = sumy / sumw;
|
|
newx[j] = sumx / sumw;
|
|
}
|
|
data[i] = [newx,newy];
|
|
}
|
|
graph.transform_text_y= 'smooth('+graph.transform_text_y +',' + Math.round(args[0]) + ')';
|
|
},
|
|
hist: function(data,args,graph){
|
|
//make awesome histogram
|
|
for (i = 0;i<data.length;i++){
|
|
var ymin = Math.min.apply(null, data[i][1] );
|
|
var ymax = Math.max.apply(null, data[i][1] );
|
|
var val_i = 0;
|
|
var power = -13 ;
|
|
var notgood = 1;
|
|
var scale = 0;
|
|
var extra_sections = 2;
|
|
var best_sections = Math.floor(Math.pow(data[i][1].length,0.5))*2;
|
|
var scale = vals[val_i]* Math.pow(10,power);
|
|
var sections = Math.ceil(ymax/scale)-Math.floor(ymin/scale)+extra_sections;
|
|
|
|
while (sections > best_sections ){
|
|
val_i+=1;
|
|
if (val_i == 3){
|
|
val_i = 0;
|
|
power +=1;
|
|
}
|
|
scale = vals[val_i]* Math.pow(10,power);
|
|
sections = Math.ceil(ymax/scale)-Math.floor(ymin/scale)+extra_sections;
|
|
|
|
}
|
|
var lowpoint = Math.floor(ymin/scale-1)*scale; // bring low one section lower.
|
|
var highpoint = Math.ceil(ymax/scale+1)*scale; //one section higher
|
|
//starting from lowpoint to highpoint with bin widths of scale
|
|
var bin_centers = [];
|
|
var bin_counts = [];
|
|
var bin_i = 0;
|
|
for (bin_start = lowpoint;bin_start<highpoint;bin_start+=scale){
|
|
var bin_end = bin_start+scale;
|
|
bin_counts[bin_i] = 0;
|
|
for (j = 0;j<data[i][1].length-1;j++){
|
|
if (bin_start < data[i][1][j] && data[i][1][j] < bin_end){
|
|
bin_counts[bin_i] +=1;
|
|
}
|
|
}
|
|
bin_centers[bin_i] = (bin_start+bin_end)/2;
|
|
bin_i++;
|
|
}
|
|
data[i][0] = bin_centers;
|
|
data[i][1] = bin_counts;
|
|
|
|
}
|
|
graph.transform_text_y= 'hist('+graph.transform_text_y +')';
|
|
graph.transform_text_x= 'bin_centers('+graph.transform_text_x +')';
|
|
},
|
|
interpolate: function(data,args,graph){
|
|
var xmin = Math.min.apply(null, data[0][0] );
|
|
var xmax = Math.max.apply(null, data[0][0] );;
|
|
|
|
for (i = 0;i<data.length;i++){
|
|
var xmini = Math.min.apply(null, data[i][0] );
|
|
var xmaxi = Math.max.apply(null, data[i][0] );
|
|
xmin = Math.min(xmin,xmini);
|
|
xmax = Math.max(xmax,xmaxi);
|
|
}
|
|
|
|
var stepsize = (xmax-xmin)/args[0];
|
|
for (i = 0;i<data.length;i++){
|
|
|
|
//args[0] is the number of steps
|
|
var newxs = [];
|
|
var newys = [];
|
|
for (j = 0;j<args[0];j++){
|
|
newxs[j] = xmin+j*stepsize;
|
|
|
|
//find closesest points on x below and above
|
|
var closest_left = 1e200;
|
|
var cli = 1;
|
|
var closest_right = 1e200;
|
|
var cri = data[i][0].length-2;
|
|
|
|
for (k = 0;k<data[i][0].length;k++){
|
|
var diff = newxs[j]-data[i][0][k];
|
|
if (diff >= 0 && diff < closest_left){
|
|
closest_left = diff;
|
|
cli = k;
|
|
}
|
|
if (diff < 0 && -1*diff < closest_right){
|
|
closest_right = -1*diff;
|
|
cri =k;
|
|
}
|
|
}
|
|
|
|
newys[j] = data[i][1][cli] + (data[i][1][cri]-data[i][1][cli])/(data[i][0][cri]-data[i][0][cli])*(newxs[j]-data[i][0][cli]);
|
|
}
|
|
data[i][0] = newxs;
|
|
data[i][1]= newys;
|
|
|
|
}
|
|
transforms.clean(data,graph);
|
|
|
|
graph.transform_text_y= 'interpolate('+graph.transform_text_y +','+args[0]+')';
|
|
graph.transform_text_x= 'interpolate('+graph.transform_text_x +','+args[0]+')';
|
|
},
|
|
differentiate: function(data,args,graph){
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length-1;j++){
|
|
data[i][1][j] = (data[i][1][j+1]-data[i][1][j])/(data[i][0][j+1]-data[i][0][j]);
|
|
data[i][0][j] = (data[i][0][j] + data[i][0][j+1])/2;
|
|
}
|
|
data[i][1].pop();
|
|
data[i][0].pop();
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= 'd/dx('+graph.transform_text_y +')';
|
|
},
|
|
subtract_fit: function(data,args,graph){
|
|
var fit_method = args[0];
|
|
for (i = 0;i<data.length;i++){
|
|
var fit = fits.fit_funs[fits.fit_strings.indexOf(fit_method)](data[i][0],data[i][1]);
|
|
var fit_points = fit.fun(data[i][0],fit.parameters);
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][1][j] -= fit_points[j];
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= graph.transform_text_y +'-'+fit.strings[0];
|
|
},
|
|
keep_outliers: function(data,args,graph){
|
|
transforms.outliers_generic(data,args,graph,false);
|
|
},
|
|
remove_outliers: function(data,args,graph){
|
|
transforms.outliers_generic(data,args,graph,true);
|
|
},
|
|
outliers_generic: function(data,args,graph,remove){
|
|
//remove true = remove the outliers
|
|
//remove false = remove the trend (keep outliers)
|
|
var fit_method = args[0];
|
|
var levels = [0.5,1,1.5,2,2.5,3];
|
|
var i = args[1]%(levels.length)
|
|
if (i<0){
|
|
i += levels.length;
|
|
}
|
|
var threshold = levels[i]; //the number of sigma that is threshold
|
|
for (i = 0;i<data.length;i++){
|
|
var fit = fits.fit_funs[fits.fit_strings.indexOf(fit_method)](data[i][0],data[i][1]);
|
|
var fit_points = fit.fun(data[i][0],fit.parameters);
|
|
var r = [];
|
|
var ri = 0;
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
ri = data[i][1][j] - fit_points[j];
|
|
if (isFinite(ri)){
|
|
r.push( ri );
|
|
}
|
|
}
|
|
//find sigma of r
|
|
var sum_r = 0;
|
|
var sum_rr = 0;
|
|
for (var j = 0;j<r.length;j++){
|
|
sum_r += r[j];
|
|
sum_rr +=r[j]*r[j];
|
|
}
|
|
var n = r.length;
|
|
sum_rr -= sum_r*sum_r/n;
|
|
var sigma_r = Math.sqrt(sum_rr / n);
|
|
//loop data again to find points further away than threshold
|
|
if (remove){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
if ((data[i][1][j] - fit_points[j]) > threshold * sigma_r){
|
|
data[i][1][j] = NaN;
|
|
}
|
|
}
|
|
} else {
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
if ((data[i][1][j] - fit_points[j]) < threshold * sigma_r){
|
|
data[i][1][j] = NaN;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
transforms.clean(data,graph);
|
|
if (remove){
|
|
graph.transform_text_y= 'remove_outliers('+graph.transform_text_y+','+fit_method+','+threshold+')';
|
|
} else {
|
|
graph.transform_text_y= 'keep_outliers('+graph.transform_text_y+','+fit_method+','+threshold+')';
|
|
}
|
|
},
|
|
jitter: function(data,args,graph){
|
|
//jitter(y)
|
|
var amount = args[0]; // a percentage.
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length;j++){
|
|
data[i][1][j] = data[i][1][j] + (Math.random()*2-1)*amount*data[i][1][j]/100;
|
|
}
|
|
}
|
|
graph.transform_text_y= 'jitter('+graph.transform_text_y +','+amount+'%)';
|
|
},
|
|
//view only the last n data points. useful for rolling data
|
|
view_last_n: function(data,args,graph){
|
|
|
|
for (i = 0;i<data.length;i++){
|
|
var l = data[i][1].length;
|
|
data[i][1] = data[i][1].slice( Math.max(0,l-args[0]),l);
|
|
data[i][0] = data[i][0].slice( Math.max(0,l-args[0]),l);
|
|
}
|
|
|
|
},
|
|
spacing: function(data,args,graph){
|
|
//the spacing between ajecent x points. 1/spacing is the dencity.
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][1].length-1;j++){
|
|
data[i][1][j] = data[i][0][j+1] - data[i][0][j];
|
|
}
|
|
for (j = 0;j<data[i][1].length-1;j++){
|
|
data[i][0][j] = (data[i][0][j+1] + data[i][0][j])/2;
|
|
}
|
|
data[i][0][j] = 1/0;
|
|
}
|
|
transforms.clean(data,graph);
|
|
graph.transform_text_y= 'spacing('+graph.transform_text_y +')';
|
|
|
|
},
|
|
dft: function(data,args,graph){
|
|
/*
|
|
* need to have x data evenly spaced, run check and throw error if not.
|
|
*
|
|
* use dft and plot magnitude vs freq
|
|
*
|
|
* find what the freqs corrispond to
|
|
*
|
|
* move data to 1st jan 1970? or do I need a differnt time axis that
|
|
* isn't absolute time.
|
|
*
|
|
function computeDft(inreal, inimag) {
|
|
var n = inreal.length;
|
|
var outreal = new Array(n);
|
|
var outimag = new Array(n);
|
|
for (var k = 0; k < n; k++) { // For each output element
|
|
var sumreal = 0;
|
|
var sumimag = 0;
|
|
for (var t = 0; t < n; t++) { // For each input element
|
|
var angle = 2 * Math.PI * t * k / n;
|
|
sumreal += inreal[t] * Math.cos(angle) + inimag[t] * Math.sin(angle);
|
|
sumimag += -inreal[t] * Math.sin(angle) + inimag[t] * Math.cos(angle);
|
|
}
|
|
outreal[k] = sumreal;
|
|
outimag[k] = sumimag;
|
|
}
|
|
return [outreal, outimag];
|
|
}
|
|
|
|
|
|
*/
|
|
|
|
|
|
},
|
|
time_to_num: function(data,args,graph){
|
|
//convert a time to a number
|
|
var axis = args[2];
|
|
var reference = args[0];
|
|
var time_axis = axis === 'x' ? 0 : 1;
|
|
var other_axis = axis === 'x' ? 1 : 0;
|
|
|
|
|
|
var units = [ 24*60*60*1000,60*60*1000,60*1000,1000 ];
|
|
var unit = units[args[1]];
|
|
//find reference number
|
|
var offset = 0;
|
|
if (reference ==0){
|
|
offset = args[3];
|
|
}
|
|
if (reference ==1){
|
|
var now = new Date();
|
|
offset = now.getTime();
|
|
}
|
|
if (reference ==2){
|
|
//from start
|
|
var amin = 1e+307;
|
|
var low = 1e+307; //very high. easy to shrink
|
|
for (i = 0;i<data.length;i++){
|
|
var amin = Math.min.apply(null, data[i][time_axis] );
|
|
low = Math.min(amin,low);
|
|
}
|
|
offset = low;
|
|
}
|
|
if (reference ==3){
|
|
//from end
|
|
var ahigh = 1e-307;
|
|
var high = 1e-307; //very high. easy to shrink
|
|
for (i = 0;i<data.length;i++){
|
|
var ahigh = Math.max.apply(null, data[i][time_axis] );
|
|
high = Math.max(ahigh,high);
|
|
}
|
|
offset = high;
|
|
}
|
|
console.log(offset);
|
|
console.log(unit);
|
|
for (i = 0;i<data.length;i++){
|
|
for (j = 0;j<data[i][0].length;j++){
|
|
data[i][time_axis][j] = (data[i][time_axis][j] - offset)/unit;
|
|
}
|
|
}
|
|
transforms.clean(data,graph);
|
|
}
|
|
}
|
|
|
|
mjs_plot = {
|
|
|
|
new_graph : function (graphname,canvasname){
|
|
"use strict";
|
|
var canvas = document.getElementById(canvasname);
|
|
//put up a simple splash screen.
|
|
var ctx = canvas.getContext('2d');
|
|
drawSplash(canvas,ctx);
|
|
|
|
var gs = load_gs(graphname);
|
|
if (gs.v === MJS_PLOT_VERSION){
|
|
console.log('version is same');
|
|
} else {
|
|
gs = mjs_plot.get_graph_style();
|
|
console.log('version changed, get new style');
|
|
}
|
|
var graph = {
|
|
graphics_style : gs,
|
|
default_graphics_style : mjs_plot.get_graph_style(),
|
|
graph_name : graphname,
|
|
canvas_name : canvasname,
|
|
drawfxmenu : false,
|
|
drawlinemenu : false,
|
|
drawmodemenu:false,
|
|
drawfitsmenu : false,
|
|
drawtimemenu : false,
|
|
drawgraphmenu : false,
|
|
drawFontMenu : false,
|
|
drawStylemenu : false,
|
|
drawcaptionmenu:false,
|
|
drawxmenu:false,
|
|
drawymenu:false,
|
|
drawmarkermenu:false,
|
|
menushown:false,
|
|
paused:false,
|
|
timemenuoptions : [0,0], //which button is selected, [top row,bottom row] left to right.
|
|
plot_failed : false,
|
|
transparent : false,
|
|
needs_drag_image : true,
|
|
points_drawn : 0,
|
|
orignal_canvas_width : 600,
|
|
orignal_canvas_height : 400,
|
|
isFullscreen : false,
|
|
isSVG : false, // when using the SVG render is set to true.
|
|
isPNGSVG : false,
|
|
svg : '',
|
|
errors : [],
|
|
|
|
data : [],
|
|
data_backup : [],
|
|
|
|
colors : [],
|
|
colors_backup : [],
|
|
|
|
captions : [],
|
|
captions_backup : [],
|
|
|
|
symbol_modes : [],
|
|
symbol_modes_backup : [],
|
|
|
|
line_modes : [],
|
|
line_modes_backup : [],
|
|
|
|
|
|
|
|
onPlotFunctions :[],//each function in here is called after a plot
|
|
fit_data : [], //save the fit data
|
|
reader_index:[0,0],//the i,j indices in the data of the picked reader point.
|
|
transform_index : -1,
|
|
transform_text_x : 'x',
|
|
ui : {size:20,touch:is_touch_device(),mouse_is_dragging:false, is_touching : false,draw_time :1e200,copy_time:1e200,ticking:false,latestEvent:false}, //contains ui infomation.
|
|
transform_text_y : 'y',
|
|
drawing_methods : {
|
|
draw_y_errors : function(graph,ctx,series,start,end,dot_size){
|
|
ctx.beginPath();
|
|
dot_size /=2;
|
|
graph.points_drawn+=end-start;
|
|
ctx.beginPath();
|
|
for (var j =start;j<end;j++){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
var top_ei = graph.units_to_pixels(graph.data[series][1][j]+graph.data[series][2][j],'y');
|
|
var bot_ei = graph.units_to_pixels(graph.data[series][1][j]-graph.data[series][2][j],'y');
|
|
ctx.moveTo(xi,bot_ei);
|
|
ctx.lineTo(xi,top_ei);
|
|
ctx.moveTo(xi-dot_size,bot_ei);
|
|
ctx.lineTo(xi+dot_size,bot_ei);
|
|
ctx.moveTo(xi-dot_size,top_ei);
|
|
ctx.lineTo(xi+dot_size,top_ei);
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_x_errors : function(graph,ctx,series,start,end,dot_size){
|
|
ctx.beginPath();
|
|
dot_size /=2;
|
|
graph.points_drawn+=end-start;
|
|
ctx.beginPath();
|
|
for (var j =start;j<end;j++){
|
|
var yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
var right_ei = graph.units_to_pixels(graph.data[series][0][j]+graph.data[series][3][j],'x');
|
|
var left_ei = graph.units_to_pixels(graph.data[series][0][j]-graph.data[series][3][j],'x');
|
|
ctx.moveTo(right_ei,yi);
|
|
ctx.lineTo(left_ei,yi);
|
|
ctx.moveTo(right_ei,yi+dot_size);
|
|
ctx.lineTo(right_ei,yi-dot_size);
|
|
ctx.moveTo(left_ei,yi+dot_size);
|
|
ctx.lineTo(left_ei,yi-dot_size);
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_line : function(graph,ctx,series,start,end){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
ctx.beginPath();
|
|
ctx.moveTo(xi,yi);
|
|
graph.points_drawn+=end-start;
|
|
for (var j =start;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.lineTo(xi,yi);
|
|
var old_xi3 = xi;
|
|
var old_yi3 = yi;
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_dot : function(graph,ctx,series,start,end,dot_size){
|
|
graph.points_drawn+=end-start;
|
|
var xi, yi;
|
|
ctx.beginPath();
|
|
for (var j =start;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.rect(xi-dot_size/2,yi-dot_size/2,dot_size,dot_size);
|
|
}
|
|
ctx.fill();
|
|
},
|
|
draw_cdot : function(graph,ctx,series,start,end,dot_size){
|
|
dot_size/=2;
|
|
graph.points_drawn+=end-start;
|
|
for (var j =start;j<end;j++){
|
|
ctx.beginPath();
|
|
var xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.arc(xi, yi, dot_size, 0 ,Math.PI*2, true);
|
|
ctx.fill();
|
|
}
|
|
},
|
|
draw_circ : function(graph,ctx,series,start,end,circle_size){
|
|
circle_size/=2;
|
|
ctx.beginPath();
|
|
graph.points_drawn+=end-start;
|
|
for (var j =start;j<end;j++){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.beginPath();
|
|
ctx.arc(xi, yi, circle_size, 0 ,Math.PI*2, true);
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
draw_cross : function(graph,ctx,series,start,end,dot_size){
|
|
dot_size/=2;
|
|
ctx.beginPath();
|
|
graph.points_drawn+=end-start;
|
|
for (var j =start;j<end;j++){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.moveTo(xi,yi-dot_size);
|
|
ctx.lineTo(xi,yi+dot_size);
|
|
ctx.moveTo(xi-dot_size,yi);
|
|
ctx.lineTo(xi+dot_size,yi);
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_x : function(graph,ctx,series,start,end,dot_size){
|
|
dot_size/=2;
|
|
ctx.beginPath();
|
|
graph.points_drawn+=end-start;
|
|
for (var j =start;j<end;j++){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.moveTo(xi-dot_size,yi-dot_size);
|
|
ctx.lineTo(xi+dot_size,yi+dot_size);
|
|
ctx.moveTo(xi-dot_size,yi+dot_size);
|
|
ctx.lineTo(xi+dot_size,yi-dot_size);
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_box : function(graph,ctx,series,start,end,circle_size){
|
|
ctx.beginPath();
|
|
graph.points_drawn+=end-start;
|
|
for (var j =start;j<end;j++){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.beginPath();
|
|
ctx.rect(xi-circle_size/2,yi-circle_size/2,circle_size,circle_size);
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
draw_zig : function(graph,ctx,series,start,end){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi3 = xi;
|
|
var old_yi3 = yi;
|
|
graph.points_drawn+=end-start;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xi,yi);
|
|
for (var j =start;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.lineTo(old_xi3,yi);
|
|
ctx.lineTo(xi,yi);
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_zag : function(graph,ctx,series,start,end){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi3 = xi;
|
|
var old_yi3 = yi;
|
|
graph.points_drawn+=end-start;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xi,yi);
|
|
for (var j =start;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.lineTo(xi,old_yi3);
|
|
ctx.lineTo(xi,yi);
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
draw_mid : function(graph,ctx,series,start,end){
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi2 = xi;
|
|
var old_yi2 = yi;
|
|
var old_xi3 = xi;
|
|
var old_yi3 = yi;
|
|
graph.points_drawn+=end-start;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xi,yi);
|
|
for (var j =start;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.lineTo((old_xi3+xi)/2,old_yi3);
|
|
ctx.lineTo((old_xi3+xi)/2,yi);
|
|
old_xi2 = old_xi3;
|
|
old_yi2 = old_yi3;
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
xi = graph.units_to_pixels(graph.data[series][0][end-1],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][end-1],'y');
|
|
ctx.lineTo(xi,yi);
|
|
ctx.stroke();
|
|
},
|
|
draw_hist : function(graph,ctx,series,start,end){
|
|
var hist_zero = Math.min(graph.units_to_pixels(0,'y'),canvas.height);
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi2 = xi;
|
|
var old_yi2 = yi;
|
|
var old_xi3 = xi;
|
|
var old_yi3 = yi;
|
|
graph.points_drawn+=end-start;
|
|
xi = graph.units_to_pixels(graph.data[series][0][start+1],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][start+1],'y');
|
|
ctx.beginPath();
|
|
ctx.moveTo(old_xi3-(xi-old_xi3)/2,hist_zero);
|
|
ctx.lineTo(old_xi3-(xi-old_xi3)/2,old_yi3);
|
|
ctx.lineTo((xi+old_xi3)/2,old_yi3);
|
|
for (var j =start+1;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.lineTo((old_xi3+old_xi2)/2,old_yi3);
|
|
ctx.lineTo((old_xi3+xi)/2,old_yi3);
|
|
ctx.lineTo((old_xi3+xi)/2,hist_zero);
|
|
old_xi2 = old_xi3;
|
|
old_yi2 = old_yi3;
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
xi = graph.units_to_pixels(graph.data[series][0][end-1],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][end-1],'y');
|
|
ctx.moveTo((old_xi2+xi)/2,hist_zero);
|
|
ctx.lineTo((old_xi2+xi)/2,yi);
|
|
ctx.lineTo(xi+(xi-old_xi2)/2,yi);
|
|
ctx.lineTo(xi+(xi-old_xi2)/2,hist_zero);
|
|
ctx.stroke();
|
|
},
|
|
draw_approx : function(graph,ctx,series,start,end){
|
|
graph.points_drawn+=end-start;
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi1 = xi;
|
|
var old_yi1 = yi;
|
|
var old_xi2 = xi;
|
|
var old_yi2 = yi;
|
|
var old_xi3 = xi;
|
|
var old_yi3 = yi;
|
|
ctx.beginPath();
|
|
ctx.moveTo(old_xi1,old_yi1);
|
|
ctx.lineTo((old_xi1+xi)/2,(old_yi1+yi)/2);
|
|
for (var j =start+1;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
ctx.quadraticCurveTo(old_xi3,old_yi3,(old_xi3+xi)/2,(old_yi3+yi)/2);
|
|
old_xi1 = old_xi2;
|
|
old_yi1 = old_yi2;
|
|
old_xi2 = old_xi3;
|
|
old_yi2 = old_yi3;
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
xi = graph.units_to_pixels(graph.data[series][0][end-1],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][end-1],'y');
|
|
ctx.lineTo(xi,yi);
|
|
ctx.stroke();
|
|
},
|
|
draw_interp : function(graph,ctx,series,start,end){
|
|
if (end - start < 3){
|
|
this.draw_line(graph,ctx,series,start,end)
|
|
}
|
|
graph.points_drawn+=end-start;
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi1 = xi;
|
|
var old_yi1 = yi;
|
|
var old_xi2 = xi;
|
|
var old_yi2 = yi;
|
|
var old_xi3 = graph.units_to_pixels(graph.data[series][0][start+1],'x');
|
|
var old_yi3 = graph.units_to_pixels(graph.data[series][1][start+1],'y');
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start+2],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start+2],'y');
|
|
ctx.beginPath();
|
|
var smoothing = 5;
|
|
ctx.moveTo(old_xi1,old_yi1);
|
|
ctx.bezierCurveTo((old_xi3-old_xi1)/smoothing+old_xi1,
|
|
(old_yi3-old_yi1)/smoothing+old_yi1,
|
|
old_xi3-(xi-old_xi1)/smoothing,
|
|
old_yi3-(yi-old_yi1)/smoothing,
|
|
old_xi3,
|
|
old_yi3
|
|
);
|
|
ctx.moveTo(old_xi2,old_yi2);
|
|
for (var j =start+2;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
|
|
ctx.bezierCurveTo((old_xi3-old_xi1)/smoothing+old_xi2,
|
|
(old_yi3-old_yi1)/smoothing+old_yi2,
|
|
old_xi3-(xi-old_xi2)/smoothing,
|
|
old_yi3-(yi-old_yi2)/smoothing,
|
|
old_xi3,
|
|
old_yi3
|
|
);
|
|
old_xi1 = old_xi2;
|
|
old_yi1 = old_yi2;
|
|
old_xi2 = old_xi3;
|
|
old_yi2 = old_yi3;
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
xi = graph.units_to_pixels(graph.data[series][0][end-1],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][end-1],'y');
|
|
//ctx.moveTo(old_xi3,old_yi3);
|
|
ctx.bezierCurveTo((xi-old_xi1)/smoothing+old_xi2,
|
|
(yi-old_yi1)/smoothing+old_yi2,
|
|
xi-(xi-old_xi2)/smoothing,
|
|
yi-(yi-old_yi2)/smoothing,
|
|
xi,
|
|
yi
|
|
);
|
|
ctx.stroke();
|
|
},
|
|
draw_scribble : function(graph,ctx,series,start,end){
|
|
if (end - start < 3){
|
|
this.draw_line(graph,ctx,series,start,end)
|
|
}
|
|
graph.points_drawn+=end-start;
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start],'y');
|
|
var old_xi1 = xi;
|
|
var old_yi1 = yi;
|
|
var old_xi2 = xi;
|
|
var old_yi2 = yi;
|
|
var old_xi3 = graph.units_to_pixels(graph.data[series][0][start+1],'x');
|
|
var old_yi3 = graph.units_to_pixels(graph.data[series][1][start+1],'y');
|
|
var xi = graph.units_to_pixels(graph.data[series][0][start+2],'x');
|
|
var yi = graph.units_to_pixels(graph.data[series][1][start+2],'y');
|
|
ctx.beginPath();
|
|
var smoothing = .2;
|
|
ctx.moveTo(old_xi1,old_yi1);
|
|
ctx.bezierCurveTo((old_xi3-old_xi1)/smoothing+old_xi1,
|
|
(old_yi3-old_yi1)/smoothing+old_yi1,
|
|
old_xi3-(xi-old_xi1)/smoothing,
|
|
old_yi3-(yi-old_yi1)/smoothing,
|
|
old_xi3,
|
|
old_yi3
|
|
);
|
|
ctx.moveTo(old_xi2,old_yi2);
|
|
for (j =start+2;j<end;j++){
|
|
xi = graph.units_to_pixels(graph.data[series][0][j],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][j],'y');
|
|
|
|
ctx.bezierCurveTo((old_xi3-old_xi1)/smoothing+old_xi2,
|
|
(old_yi3-old_yi1)/smoothing+old_yi2,
|
|
old_xi3-(xi-old_xi2)/smoothing,
|
|
old_yi3-(yi-old_yi2)/smoothing,
|
|
old_xi3,
|
|
old_yi3
|
|
);
|
|
old_xi1 = old_xi2;
|
|
old_yi1 = old_yi2;
|
|
old_xi2 = old_xi3;
|
|
old_yi2 = old_yi3;
|
|
old_xi3 = xi;
|
|
old_yi3 = yi;
|
|
}
|
|
xi = graph.units_to_pixels(graph.data[series][0][end-1],'x');
|
|
yi = graph.units_to_pixels(graph.data[series][1][end-1],'y');
|
|
//ctx.moveTo(old_xi3,old_yi3);
|
|
ctx.bezierCurveTo((xi-old_xi1)/smoothing+old_xi2,
|
|
(yi-old_yi1)/smoothing+old_yi2,
|
|
xi-(xi-old_xi2)/smoothing,
|
|
yi-(yi-old_yi2)/smoothing,
|
|
xi,
|
|
yi
|
|
);
|
|
ctx.stroke();
|
|
},
|
|
},
|
|
set_data : function (data){
|
|
"use strict";
|
|
this.transform_index = -1;
|
|
for (var i = 0;i<data.length;i++){
|
|
if (data[i][0].length != data[i][1].length){
|
|
this.errors.push("series " + i + "had different legnth x and y arrays");
|
|
}
|
|
}
|
|
|
|
this.data_backup = clone(data);
|
|
transforms.clean(this.data_backup,this);
|
|
this.data = clone(this.data_backup);
|
|
|
|
//check if things are the same lengths and provide errors
|
|
if (this.data.length != data.length){
|
|
this.errors.push("A series was cleaned away in set_data");
|
|
} else {
|
|
for (var i = 0;i<data.length;i++){
|
|
//data might be longer than this.data if series were cut out.
|
|
if (this.data[i][0].length != data[i][0].length){
|
|
this.errors.push("series " + i + " had non finite values");
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0;i<this.data.length;i++){
|
|
this.graphics_style.hidden_lines[i] = this.graphics_style.hidden_lines[i] || false;
|
|
}
|
|
this.do_colours();
|
|
this.do_line_modes();
|
|
},
|
|
do_colours: function(){
|
|
this.colors = [];
|
|
for (var i=0;i<this.data_backup.length;i++){
|
|
if (this.graphics_style.caption_colors){
|
|
try {
|
|
this.colors[i] = color_from_string( this.captions[i] || 'label' );
|
|
} catch(e) {
|
|
this.colors[i] = color_from_string( 'label' );
|
|
}
|
|
} else {
|
|
this.colors[i] = this.graphics_style.line_colours[i] || get_color(i,this.data_backup.length-1);
|
|
}
|
|
}
|
|
this.colors_backup = clone(this.colors);
|
|
this.graphics_style.line_colours = clone(this.colors);
|
|
},
|
|
do_line_modes : function(){
|
|
for (var i=0;i<this.data_backup.length;i++){
|
|
//pad the per-line modes from the single settings.
|
|
this.graphics_style.line_modes[i] = this.graphics_style.line_modes[i] || this.graphics_style.line_mode;
|
|
this.graphics_style.symbol_modes[i] = this.graphics_style.symbol_modes[i] || this.graphics_style.symbol_mode;
|
|
}
|
|
this.line_modes = clone(this.graphics_style.line_modes);
|
|
this.symbol_modes = clone(this.graphics_style.symbol_modes);
|
|
this.line_modes_backup = clone(this.graphics_style.line_modes);
|
|
this.symbol_modes_backup = clone(this.graphics_style.symbol_modes);
|
|
},
|
|
reset : function(){
|
|
this.graphics_style = JSON.parse(JSON.stringify(graph.default_graphics_style));
|
|
this.graphics_style.modified = false;
|
|
this.transform_index= -1;
|
|
this.do_colours();
|
|
this.do_line_modes();
|
|
},
|
|
set_captions : function (captions){
|
|
"use strict";
|
|
this.captions_backup = clone(captions);
|
|
this.captions = clone(captions);
|
|
if (this.captions.length != this.data_backup.length){
|
|
this.errors.push("number of captions and number of series don't match");
|
|
}
|
|
this.do_colours();
|
|
},
|
|
find_scale : function (min_point,max_point,size,guide_width,scalemode,tight,axis){
|
|
"use strict";
|
|
if (scalemode === 'lin'){
|
|
//linear scale
|
|
var val_i = 0;
|
|
if (Math.abs(min_point) > 1e-250){
|
|
var power = Math.floor(Math.log10( max_point - min_point ))-10 ;
|
|
} else {
|
|
power = -250;
|
|
}
|
|
var notgood = 1;
|
|
var scale = 0;
|
|
var width;
|
|
var extra_sections = 0;
|
|
if (tight){
|
|
extra_sections = 0;
|
|
} else {
|
|
extra_sections = 2;
|
|
}
|
|
var best_sections = Math.floor( size / guide_width ) +extra_sections;
|
|
var scale = vals[val_i]* Math.pow(10,power);
|
|
var sections = Math.ceil(max_point/scale)-Math.floor(min_point/scale)+extra_sections;
|
|
|
|
while (sections > best_sections ){
|
|
val_i+=1;
|
|
if (val_i == 3){
|
|
val_i = 0;
|
|
power +=1;
|
|
}
|
|
scale = vals[val_i]* Math.pow(10,power);
|
|
sections = Math.ceil(max_point/scale)-Math.floor(min_point/scale)+extra_sections;
|
|
|
|
|
|
}
|
|
|
|
if (sections == 0){ width = size;}
|
|
else{width = size/sections; }
|
|
|
|
if (tight){
|
|
var lowpoint = Math.floor(min_point/scale)*scale;
|
|
var highpoint = Math.ceil(max_point/scale)*scale;
|
|
} else {
|
|
var lowpoint = Math.floor(min_point/scale-1)*scale; // bring low one section lower.
|
|
var highpoint = Math.ceil(max_point/scale+1)*scale; //one section higher
|
|
}
|
|
return the_scale = {
|
|
lowpoint : lowpoint,
|
|
highpoint : highpoint,
|
|
scale : scale,
|
|
width : width,
|
|
val_i : val_i,
|
|
val_i_low : 1, //not used
|
|
power_low : 1, //not used
|
|
val_i_high : 1, //not used
|
|
power_high : 1, //not used
|
|
scalemode : scalemode
|
|
}
|
|
}
|
|
|
|
if (scalemode === 'log'){
|
|
//log scale
|
|
var val_i = 0;
|
|
var power = 100;
|
|
var log_vals_i = -1;
|
|
var do_not_use_linear = false;
|
|
var required_secions = Math.floor( size / guide_width/2 );
|
|
sections = 0;
|
|
while (sections < required_secions){
|
|
log_vals_i +=1;
|
|
power = Math.ceil(Math.log10(min_point))+1;
|
|
val_i = 0;
|
|
while (log_vals[log_vals_i][val_i] * Math.pow(10,power) >= min_point){
|
|
//roll down to find the low
|
|
val_i -=1;
|
|
if (val_i < 0){
|
|
power -= 1;
|
|
val_i = log_vals[log_vals_i].length-1;
|
|
}
|
|
}
|
|
//roll down one more, this marks the low point
|
|
if (tight === false){
|
|
val_i -=1;
|
|
if (val_i < 0){
|
|
power -= 1;
|
|
val_i = log_vals[log_vals_i].length-1;
|
|
}
|
|
}
|
|
var val_i_low = val_i;
|
|
var power_low = power;
|
|
//roll up to find the high point and index keeping track on the number of sections
|
|
sections = 0;
|
|
while (log_vals[log_vals_i][val_i] * Math.pow(10,power) <= max_point){
|
|
|
|
val_i +=1;
|
|
sections +=1;
|
|
if (val_i >= log_vals[log_vals_i].length){
|
|
power += 1;
|
|
val_i = 0;
|
|
}
|
|
}
|
|
if (tight === false){
|
|
//roll up one more
|
|
val_i +=1;
|
|
sections +=1;
|
|
if (val_i >= log_vals[log_vals_i].length){
|
|
power += 1;
|
|
val_i = 0;
|
|
}
|
|
}
|
|
var val_i_high = val_i;
|
|
var power_high = power;
|
|
|
|
if ( (log_vals_i >= log_vals.length || Math.log10(max_point)-Math.log10(min_point) < 0.6) && do_not_use_linear == false ){
|
|
sections = required_secions;
|
|
|
|
the_scale = this.find_scale(min_point,max_point,size,guide_width,'lin',tight);
|
|
if (the_scale.lowpoint <= 0){do_not_use_linear = true; sections = 0;}
|
|
//the lowpoint from the linear scale can be negative or zero !
|
|
lowpoint = Math.log10(the_scale.lowpoint);
|
|
highpoint = Math.log10(the_scale.highpoint);
|
|
scale = the_scale.scale;
|
|
width = the_scale.width;
|
|
log_vals_i = the_scale.val_i;
|
|
} else {
|
|
lowpoint = Math.log10( log_vals[log_vals_i][val_i_low] * Math.pow(10,power_low) ) ;//far left point
|
|
highpoint = Math.log10( log_vals[log_vals_i][val_i_high] * Math.pow(10,power_high) ); //far right point
|
|
scale = -1; //not used! // the width of a section on the graph.
|
|
width = -1; //also not used! //is the width of one section in pixels
|
|
log_vals_i = log_vals_i; //which log scale to use. . .
|
|
}
|
|
}
|
|
|
|
if (scale < 0){
|
|
//this corrects for the log finding scale loop.
|
|
//it addes one at the end which is not needed if
|
|
//the scale is ok.
|
|
//log_vals_i -=1;
|
|
}
|
|
if (log_vals_i == 0 && sections > 2*required_secions){
|
|
//do the far zoomed out log scale.
|
|
//if using si numbers change the way liner scales are found.
|
|
var c = (axis === 'y' && ( this.graphics_style.y_label_mode === 'infix' || this.graphics_style.y_label_mode === 'postfix' ));
|
|
c = c || (axis === 'x' && ( this.graphics_style.x_label_mode === 'infix' || this.graphics_style.x_label_mode === 'postfix' ));
|
|
if (c){ vals = [1,3,6,9];}
|
|
the_scale = this.find_scale( Math.max(-249,Math.log10(min_point)),Math.min(249,Math.log10(max_point)),size,guide_width,'lin',tight);
|
|
if (c){ vals = [1,2,5];}
|
|
lowpoint = the_scale.lowpoint; //308 is the javascript float maxamum and minimum
|
|
highpoint = the_scale.highpoint;
|
|
scale = the_scale.scale;
|
|
scalemode = 'log';
|
|
width = the_scale.width;
|
|
log_vals_i = -1; // ! this is the flag to use the zoomed out view.
|
|
}
|
|
|
|
return the_scale = {
|
|
lowpoint : lowpoint,
|
|
highpoint : highpoint,
|
|
scale : scale,
|
|
width : width,
|
|
val_i : log_vals_i,
|
|
val_i_low : val_i_low,
|
|
power_low : power_low,
|
|
val_i_high : val_i_high,
|
|
power_high : power_high,
|
|
scalemode : scalemode
|
|
}
|
|
}
|
|
if (scalemode ==='time'){
|
|
//min_point,max_point,size,guide_width,scalemode,tight
|
|
if (tight){
|
|
var extra_sections = 0;
|
|
} else {
|
|
var extra_sections = 2;
|
|
}
|
|
var required_sections = Math.floor( size / guide_width ) +extra_sections;
|
|
var target_time_diff = (max_point-min_point)/required_sections;
|
|
var i = 0;
|
|
while (allowed_intervals[i] < target_time_diff){i++;}
|
|
//i++;
|
|
//can only go up to intervals of 500years.
|
|
//so cap i at 43 :allowed_intervals.length-1;
|
|
i = Math.min(i,allowed_intervals.length-1);
|
|
|
|
extra_sections/=2;
|
|
|
|
var start_time = min_point-(min_point%allowed_intervals[i]) - extra_sections*allowed_intervals[i];
|
|
var high_time = max_point-(max_point%allowed_intervals[i]) + extra_sections*allowed_intervals[i];// +allowed_intervals[i] ;
|
|
|
|
if (allowed_intervals[i]>=31536000000){
|
|
//using years
|
|
var d = new Date(start_time);
|
|
d = new Date(d.getFullYear(),0,0);
|
|
start_time = d.getTime();
|
|
|
|
var d = new Date(high_time);
|
|
d = new Date(d.getFullYear() + Math.round(allowed_intervals[i]/1000/60/60/24/365) + Math.round( d.getMonth()/12 ),0,0);
|
|
high_time = d.getTime();
|
|
}
|
|
|
|
if (allowed_intervals[i]>=2592000000 && allowed_intervals[i]< 31536000000){
|
|
//using months
|
|
var d = new Date(start_time);
|
|
d = new Date(d.getFullYear(),d.getMonth(),1);
|
|
start_time = d.getTime();
|
|
var d = new Date(high_time);
|
|
if (d.getDate() < 15){
|
|
d = new Date(d.getFullYear(),d.getMonth(),1);
|
|
} else {
|
|
d = new Date(d.getFullYear(),d.getMonth()+1,1);
|
|
}
|
|
high_time = d.getTime()+allowed_intervals[i];
|
|
}
|
|
|
|
if (allowed_intervals[i]>=43200000 && allowed_intervals[i]< 2592000000){
|
|
//using days
|
|
var d = new Date(start_time);
|
|
var c = new Date(d.getFullYear(),d.getMonth(),d.getDate(),0,0,0,0);
|
|
start_time = c.getTime();
|
|
|
|
var d = new Date(high_time);
|
|
d = new Date(d.getFullYear(),d.getMonth(),d.getDate(),0,0,0,0);
|
|
high_time = d.getTime()+allowed_intervals[i];
|
|
}
|
|
|
|
if (allowed_intervals[i]>=1800000 && allowed_intervals[i]<= 21600000){
|
|
//using hours
|
|
var d = new Date(start_time);
|
|
var c = new Date(d.getFullYear(),d.getMonth(),d.getDate(),d.getHours(),0,0,0);
|
|
start_time = c.getTime();
|
|
|
|
var d = new Date(high_time);
|
|
d = new Date(d.getFullYear(),d.getMonth(),d.getDate(),d.getHours()+1,0,0,0);
|
|
high_time = d.getTime();
|
|
}
|
|
|
|
if (allowed_intervals[i]==7200000 ){
|
|
//every two hours
|
|
var d = new Date(start_time);
|
|
var c = new Date(d.getFullYear(),d.getMonth(),d.getDate(),Math.floor(d.getHours()/2)*2,0,0,0);
|
|
start_time = c.getTime();
|
|
|
|
var d = new Date(high_time);
|
|
d = new Date(d.getFullYear(),d.getMonth(),d.getDate(),Math.floor(1+d.getHours()/2)*2,0,0,0);
|
|
high_time = d.getTime();
|
|
}
|
|
|
|
if (allowed_intervals[i]==10800000 ){
|
|
//every three hours
|
|
console.log('every three horus');
|
|
var d = new Date(start_time);
|
|
var c = new Date(d.getFullYear(),d.getMonth(),d.getDate(),Math.floor(d.getHours()/3)*3,0,0,0);
|
|
start_time = c.getTime();
|
|
|
|
var d = new Date(high_time);
|
|
d = new Date(d.getFullYear(),d.getMonth(),d.getDate(),Math.floor(1+d.getHours()/3)*3,0,0,0);
|
|
high_time = d.getTime();
|
|
}
|
|
if (allowed_intervals[i]==21600000 ){
|
|
//every six hours
|
|
console.log('every six horus');
|
|
var d = new Date(start_time);
|
|
var c = new Date(d.getFullYear(),d.getMonth(),d.getDate(),Math.floor(d.getHours()/6)*6,0,0,0);
|
|
start_time = c.getTime();
|
|
|
|
var d = new Date(high_time);
|
|
d = new Date(d.getFullYear(),d.getMonth(),d.getDate(),Math.floor(1+d.getHours()/6)*6,0,0,0);
|
|
high_time = d.getTime();
|
|
}
|
|
if (allowed_intervals[i]<1800000 ){
|
|
high_time += allowed_intervals[i];
|
|
}
|
|
|
|
var number_of_sections = Math.floor((high_time-start_time)/allowed_intervals[i]);
|
|
var scale = size/number_of_sections;
|
|
var number_of_minor_ticks = Math.floor((high_time-start_time)/time_ticks[i]);
|
|
var tick_scale = size/number_of_minor_ticks;
|
|
var the_scale;
|
|
return the_scale = {
|
|
lowpoint : start_time,
|
|
highpoint : high_time,
|
|
scale : scale,
|
|
width : tick_scale, //abuse here
|
|
val_i : i,
|
|
val_i_low : 0,
|
|
power_low : 0,
|
|
val_i_high : 0,
|
|
power_high : 0,
|
|
scalemode : 'time'
|
|
}
|
|
}
|
|
},
|
|
find_limits : function(data,automin,automax,manualmin,manualmax,scale,name){
|
|
"use strict";
|
|
//data is [ [],[],...]
|
|
// automax and automin are bools
|
|
//manualmax and manual min are values for the min and max
|
|
//scale is a string, e.g. 'log','lin'.
|
|
//return object has:
|
|
// limits.low limits.high
|
|
// limits.scale //it can change to log or lin by looking at the data.
|
|
//limits.automax
|
|
//limits.automin //can change if a scale uses the autos or not.
|
|
//name is a string so that errors are more useful to the user.
|
|
//protect agains +- infinity.
|
|
manualmax = Math.min(manualmax,1e250);
|
|
manualmin = Math.max(manualmin,-1e250);
|
|
//protect against numbers smaller than 1e-250
|
|
|
|
var t = manualmax;
|
|
manualmax = Math.max(manualmax,manualmin);
|
|
manualmin = Math.min(t,manualmin);
|
|
//protect against times really far away. this could be improved.
|
|
if (scale === 'time'){
|
|
manualmax = Math.min(manualmax,+100000000000000);
|
|
manualmin = Math.max(manualmin,-100000000000000);
|
|
}
|
|
//protect against empty data series
|
|
this.no_data = false;
|
|
if (data.length == 0){
|
|
if (!automin && !automax){
|
|
low = manualmin;
|
|
high = manualmax;
|
|
} else {
|
|
low = 1;
|
|
high = 10;
|
|
automin = true;
|
|
automax = true;
|
|
}
|
|
if (scale === 'log'){
|
|
if (low<=0){low = 1;}
|
|
if (high<=0 || low > high){high = 10;}
|
|
}
|
|
|
|
this.no_data = true;
|
|
return {low:low, high:high, automax:automax,automin:automin,scale:scale};
|
|
|
|
}
|
|
//catch negatives for the log scale
|
|
if (scale === 'log'){
|
|
if (manualmin <= 0 && automin == false){
|
|
automin = true;
|
|
this.errors.push(name + " minimum was negative - using auto");
|
|
}
|
|
if (manualmax <= 0 && automax == false){
|
|
automin = true;
|
|
automax = true;
|
|
this.errors.push(name + " maximum was negative - using auto");
|
|
}
|
|
}
|
|
if ((automin == true ||
|
|
automax == true ||
|
|
low>=high )){
|
|
var amin = 1e+307;
|
|
var amax = -1e+307;
|
|
var low = 1e+307; //very high. easy to shrink
|
|
var high = -1e+307; //very low. easy to grow
|
|
for (i = 0;i<data.length;i++){
|
|
var amin = Math.min.apply(null, data[i] );
|
|
var amax = Math.max.apply(null, data[i] );
|
|
low = Math.min(amin,low);
|
|
high = Math.max(amax,high);
|
|
}
|
|
}
|
|
//catch the case where low is high
|
|
if (low == high){
|
|
low = 0.6*Math.min(low,high);
|
|
high = 1.6*Math.max(low,high);
|
|
}
|
|
if (this.data.length == 1 && this.data[0][0].length == 1 ){
|
|
low = 0.6*Math.min(low,high);
|
|
high = 1.6*Math.max(low,high);
|
|
}
|
|
//catch the case were it is off the range of data and trying to set the autos
|
|
if (manualmin > high && automax && !automin){
|
|
automin = true;
|
|
automax = true;
|
|
this.errors.push(name + " can't have inverted scale - using auto");
|
|
}
|
|
if (manualmax < low && automin && !automax){
|
|
automin = true;
|
|
automax = true;
|
|
this.errors.push(name + " can't have inverted scale - using auto");
|
|
}
|
|
|
|
if (automin == false){
|
|
low = manualmin;
|
|
}
|
|
if (automax == false){
|
|
high = manualmax;
|
|
}
|
|
if (scale === 'log' && high <= 0){
|
|
scale = 'lin';
|
|
this.errors.push("all "+name+" data is negative, cant plot that log"+name);
|
|
}
|
|
if (scale === 'log' && low<=2e-250){
|
|
low = 2e250;
|
|
for (var i = 0;i<data.length;i++){
|
|
//find lowest y that isn't zero
|
|
for (var ii = 0;ii<this.data[i][1].length;ii++){
|
|
if (data[i][ii] > 0 && data[i][ii] < low){
|
|
low = data[i][ii];
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
if (scale === 'log'){
|
|
manualmax = Math.max(manualmax,2e-250);
|
|
manualmin = Math.max(manualmin,2e-250);
|
|
}
|
|
|
|
return {low:low, high:high, automax:automax,automin:automin,scale:scale};
|
|
},
|
|
use_scale : function (the_scale,target_size,guideWidth,axis){
|
|
"use strict";
|
|
var lowpoint = the_scale.lowpoint;
|
|
var highpoint = the_scale.highpoint;
|
|
var scale = the_scale.scale;
|
|
var width = the_scale.width;
|
|
var val_i = the_scale.val_i;
|
|
var val_i_low =the_scale.val_i_low;
|
|
var power_low = the_scale.power_low;
|
|
var val_i_high = the_scale.val_i_high;
|
|
var power_high = the_scale.power_high;
|
|
var scalemode = the_scale.scalemode;
|
|
//var target_size = 300;//this is going to be canvas.width or canvas.height depending which one is being used. . .
|
|
var many_tick_limit = 1;
|
|
var pos = [];
|
|
var strings = [];
|
|
var minor_pos = [];
|
|
var val_is;
|
|
var power;
|
|
var old_i;
|
|
|
|
if (scalemode === 'lin'){
|
|
var tick = 0;// for the dummy run start at the far left, even though there
|
|
//won't be an actual label there.
|
|
var prev_label = ' ';
|
|
var precision = 1;
|
|
var label = '';
|
|
|
|
var zero_position = (0-lowpoint)*target_size/(highpoint - lowpoint)
|
|
|
|
|
|
//dummy run to get the precision
|
|
while (tick <= target_size) {
|
|
i = tick/width*scale+lowpoint;
|
|
//if (Math.abs(i)< not_zero) {i=0;}//javasript sucks.
|
|
label = i.toPrecision(precision);
|
|
if (label === prev_label){precision += 1;label = i.toPrecision(precision);}
|
|
prev_label = label;
|
|
tick += width;
|
|
}
|
|
|
|
//draw it this time
|
|
tick = width;
|
|
var j = 1;
|
|
//j here is just the same as tick/width.
|
|
//however repeated additions of width lead to annoying floating point errors.
|
|
//using j reduces the number of floating point problums
|
|
|
|
while (tick < target_size-1) {
|
|
i = j*scale+lowpoint;
|
|
pos.push(tick);
|
|
//if (Math.abs(i)< not_zero) {i=0;}//javasript sucks.
|
|
|
|
//within 2 pixels of zero. call it zero
|
|
if (Math.abs(tick - zero_position) <2){
|
|
label = (0).toFixed(Math.max(1,precision-1));
|
|
|
|
} else {
|
|
//label = mjs_precision(i,precision);
|
|
label = this.get_axis_string(i,axis,precision);
|
|
}
|
|
strings.push(label);
|
|
tick += width;
|
|
j +=1;
|
|
}
|
|
|
|
var stepping = label.length*.7*this.graphics_style.tick_labels_font_size*this.graphics_style.scaling_factor > width;
|
|
|
|
tick = 0;
|
|
var minor_ticks = 1;
|
|
if ( width > guideWidth*many_tick_limit) {
|
|
minor_ticks = many_minor_ticks[val_i];
|
|
//use many small ticks
|
|
} else {
|
|
//use few small ticks
|
|
minor_ticks = few_minor_ticks[val_i];
|
|
}
|
|
while (tick < target_size-2) {
|
|
tick += width/minor_ticks;
|
|
minor_pos.push(tick);
|
|
}
|
|
minor_pos.pop();
|
|
}
|
|
//the far zoomed out view.
|
|
if (scalemode === 'log' && val_i == -1){
|
|
var tick = 0;// for the dummy run start at the far left, even though there
|
|
//won't be an actual label there.
|
|
var prev_label = ' ';
|
|
var precision = 1;
|
|
var label = '';
|
|
|
|
//dummy run to get the precision
|
|
while (tick <= target_size) {
|
|
i = Math.pow(10,tick/width*scale+lowpoint);
|
|
label = i.toPrecision(precision);
|
|
if (label === prev_label){precision += 1;label = i.toPrecision(precision);}
|
|
prev_label = label;
|
|
tick += width;
|
|
}
|
|
|
|
//draw it this time
|
|
tick = width;
|
|
var j = 1;
|
|
//j here is just the same as tick/width.
|
|
//however repeated additions of width lead to annoying floating point errors.
|
|
//using j reduces the number of floating point problums
|
|
while (tick < target_size-1) {
|
|
i = Math.pow(10,j*scale+lowpoint);
|
|
pos.push(tick);
|
|
//label = mjs_precision(i,precision);
|
|
label = this.get_axis_string(i,axis,precision);
|
|
strings.push(label);
|
|
|
|
tick += width;
|
|
j +=1;
|
|
}
|
|
|
|
var stepping = label.length*.7*this.graphics_style.tick_labels_font_size*this.graphics_style.scaling_factor > width;
|
|
|
|
tick = 0;
|
|
var minor_ticks = 1;
|
|
if ( width > guideWidth*many_tick_limit) {
|
|
minor_ticks = many_minor_ticks[val_i];
|
|
//use many small ticks
|
|
} else {
|
|
//use few small ticks
|
|
minor_ticks = few_minor_ticks[val_i];
|
|
}
|
|
while (tick <= target_size) {
|
|
minor_pos.push(tick);
|
|
tick += width/minor_ticks;
|
|
}
|
|
minor_pos.pop();
|
|
}
|
|
if (scalemode === 'log' && val_i != -1){
|
|
//the pure log mode
|
|
if (scale < 0) {
|
|
val_is = val_i_low;
|
|
power = power_low;
|
|
i = log_vals[val_i][val_i_low] * Math.pow(10,power_low);
|
|
old_i = i;
|
|
precision = 1;
|
|
var lable = '';
|
|
var old_lable = ''
|
|
//dummy run for precision
|
|
while (i < log_vals[val_i][val_i_high] * Math.pow(10,power_high) ){
|
|
val_is +=1;
|
|
if (val_is >= log_vals[val_i].length){
|
|
power += 1;
|
|
val_is = 0;
|
|
}
|
|
i = log_vals[val_i][val_is] * Math.pow(10,power);
|
|
tick = (Math.log10(i)-lowpoint)*target_size/(highpoint - lowpoint);
|
|
|
|
lable = this.get_axis_string(i,axis,precision);
|
|
if (lable === old_lable){
|
|
precision++;
|
|
lable = this.get_axis_string(i,axis,precision);
|
|
}
|
|
old_lable = lable;
|
|
}
|
|
//actual run
|
|
i = log_vals[val_i][val_i_low] * Math.pow(10,power_low);
|
|
val_is = val_i_low;
|
|
power = power_low;
|
|
while (i < log_vals[val_i][val_i_high] * Math.pow(10,power_high) ){
|
|
val_is +=1;
|
|
if (val_is >= log_vals[val_i].length){
|
|
power += 1;
|
|
val_is = 0;
|
|
}
|
|
i = log_vals[val_i][val_is] * Math.pow(10,power);
|
|
tick = (Math.log10(i)-lowpoint)*target_size/(highpoint - lowpoint);
|
|
|
|
if (tick< target_size-10){
|
|
//strings.push(mjs_precision(i,2));
|
|
strings.push(this.get_axis_string(i,axis,precision));
|
|
|
|
pos.push(tick);
|
|
}
|
|
//use the mid point rule for minor ticks
|
|
if (val_i > 8){
|
|
var mid = (Math.log10( (old_i + i)/2 )-lowpoint)*target_size/(highpoint - lowpoint);
|
|
minor_pos.push(mid);
|
|
}
|
|
|
|
old_i = i;
|
|
}
|
|
|
|
//use the minor ticks array
|
|
if (val_i <= 8){
|
|
i = log_vals[val_i][val_i_low] * Math.pow(10,power_low);
|
|
val_is = val_i_low;
|
|
power = power_low;
|
|
while (i < log_vals[val_i][val_i_high] * Math.pow(10,power_high)){
|
|
val_is +=1;
|
|
if (val_is >= log_vals_ticks[val_i].length){
|
|
power += 1;
|
|
val_is = 0;
|
|
}
|
|
i = log_vals_ticks[val_i][val_is] * Math.pow(10,power);
|
|
tick = (Math.log10(i)-lowpoint)*target_size/(highpoint - lowpoint);
|
|
minor_pos.push(tick);
|
|
|
|
}
|
|
minor_pos.pop();
|
|
}
|
|
} else {
|
|
//log mode with a linear labels and ticks( really zoomed in).
|
|
var tick = 0;
|
|
var prev_label = ' ';
|
|
var precision = 1;
|
|
var label = '';
|
|
//dummy run to get the precision
|
|
i = Math.pow(10,lowpoint);
|
|
while (i <= Math.pow(10,highpoint) ) {
|
|
label = i.toPrecision(precision);
|
|
if (label === prev_label){precision += 1;label = i.toPrecision(precision);}
|
|
prev_label = label;
|
|
i += scale;
|
|
}
|
|
//sepping if the labels are really long. this stops them running into each other.
|
|
//the other way of doing this is to not show every other label. or re-analyse the
|
|
//data with a larger min_width. = label.lendth*text_size/2
|
|
var stepping = label.length*.7*this.graphics_style.tick_labels_font_size*this.graphics_style.scaling_factor >= width;
|
|
//draw it this time
|
|
i = Math.pow(10,lowpoint)+scale;
|
|
|
|
while (i < Math.pow(10,highpoint)-scale/2 ) {
|
|
//label = mjs_precision(i,precision);
|
|
label = this.get_axis_string(i,axis,precision);
|
|
tick = (Math.log10(i)-lowpoint)*target_size/(highpoint - lowpoint);
|
|
pos.push(tick);
|
|
strings.push(label);
|
|
i += scale;
|
|
}
|
|
//draw minor ticks
|
|
var minor_ticks = 1;
|
|
if ( width >guideWidth*many_tick_limit) {
|
|
minor_ticks = many_minor_ticks[val_i];
|
|
//use many small ticks
|
|
} else {
|
|
//use few small ticks
|
|
minor_ticks = few_minor_ticks[val_i];
|
|
}
|
|
i = Math.pow(10,lowpoint);
|
|
while (i < Math.pow(10,highpoint)) {
|
|
i += scale/minor_ticks;
|
|
tick = (Math.log10(i)-lowpoint)*target_size/(highpoint - lowpoint);
|
|
minor_pos.push(tick);
|
|
}
|
|
minor_pos.pop();
|
|
}
|
|
}
|
|
|
|
if (scalemode ==='time'){
|
|
var i = the_scale.val_i;
|
|
//find the high point precision
|
|
var total_diff = (highpoint-lowpoint);
|
|
//find which interval to use.
|
|
j = 0;
|
|
while (allowed_intervals[j] < total_diff){j++;}
|
|
|
|
j--;
|
|
|
|
var low_precision = string_precisions[i];
|
|
var high_precision = string_precisions[j];
|
|
|
|
//check that the low-precision is enough.
|
|
|
|
//dummy run to get precision
|
|
var section_time = lowpoint;
|
|
var first_lable = mjs_date_print(section_time,high_precision,high_precision);
|
|
var tick = 0;
|
|
var old_label = '';
|
|
var label = '';
|
|
while (section_time < highpoint) {
|
|
|
|
section_time+=allowed_intervals[i];
|
|
|
|
if (allowed_intervals[i]>=2592000000){
|
|
section_time = round_to_month(section_time);
|
|
}
|
|
|
|
tick = (section_time-lowpoint)/total_diff * target_size;
|
|
|
|
label = mjs_date_print(section_time,high_precision,low_precision)
|
|
if (label === old_label){
|
|
//i--;
|
|
low_precision++;
|
|
//low_precision = string_precisions[i];
|
|
}
|
|
old_label = label;
|
|
|
|
}
|
|
var last_lable = mjs_date_print(section_time,high_precision,high_precision);
|
|
if (last_lable === first_lable){
|
|
high_precision++;
|
|
}
|
|
|
|
var section_time = lowpoint;
|
|
var tick = 0;
|
|
var mtick = 0;
|
|
//for ( var section_time = lowpoint;section_time<highpoint;){
|
|
while (section_time < highpoint-allowed_intervals[i] && tick+scale < target_size-2) {
|
|
|
|
section_time+=allowed_intervals[i];
|
|
|
|
if (allowed_intervals[i] >= 2592000000){
|
|
section_time = round_to_month(section_time);
|
|
|
|
}
|
|
tick = (section_time-lowpoint)/total_diff * target_size;
|
|
|
|
pos.push(tick);
|
|
|
|
label = mjs_date_print(section_time,high_precision,low_precision);
|
|
|
|
strings.push(label);
|
|
|
|
while (mtick < tick) {
|
|
mtick += width;
|
|
minor_pos.push(mtick);
|
|
}
|
|
var mtick = tick;
|
|
minor_pos.pop();
|
|
|
|
}
|
|
|
|
while (mtick <= target_size-2) {
|
|
mtick += width;
|
|
minor_pos.push(mtick);
|
|
}
|
|
minor_pos.pop();
|
|
|
|
stepping = false;
|
|
var stepping = label.length*.7*this.graphics_style.tick_labels_font_size*this.graphics_style.scaling_factor > scale;
|
|
|
|
|
|
precision = low_precision;
|
|
}
|
|
return {pos:pos, strings:strings, minor_pos:minor_pos, stepping:stepping, precision:precision}
|
|
},
|
|
fit_points_drawn : 0,
|
|
drawSimpleLine : function(ctx,x,y){
|
|
|
|
var xi = this.units_to_pixels(x[0],'x');
|
|
var yi = this.units_to_pixels(y[0],'y');
|
|
var oxi = xi;
|
|
var oyi = yi;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xi,yi);
|
|
var ongraph = true;
|
|
var wasOngraph = true;
|
|
for (var k = 0;k<x.length;k++){
|
|
this.fit_points_drawn++;
|
|
var yi = this.units_to_pixels(y[k],'y');
|
|
var xi = this.units_to_pixels(x[k],'x');
|
|
ongraph = (yi > 0 && yi < this.canvas.height);
|
|
if (ongraph && wasOngraph){
|
|
ctx.lineTo(xi,yi);
|
|
}
|
|
if (!ongraph && wasOngraph){
|
|
ctx.lineTo(xi,yi);
|
|
ctx.stroke();
|
|
}
|
|
if (ongraph && !wasOngraph){
|
|
ctx.beginPath();
|
|
ctx.moveTo(oxi,oyi);
|
|
ctx.lineTo(xi,yi);
|
|
|
|
}
|
|
wasOngraph = ongraph;
|
|
oxi = xi;
|
|
oyi=yi;
|
|
}
|
|
ctx.stroke();
|
|
},
|
|
mjs_plot : function () {
|
|
"use strict";
|
|
var start_time = new Date();
|
|
//catch errors in plotting
|
|
if (this.plot_failed){
|
|
this.errors.push('failed for unknown reason');
|
|
this.reset();
|
|
}
|
|
this.plot_failed = true; //is set to false at the end.
|
|
|
|
// gs is the graph style.
|
|
//get things out of gs.
|
|
//if gs.modified is false use the default style
|
|
if (this.graphics_style.modified == false){
|
|
console.log('getting defautts');
|
|
this.reset();
|
|
}
|
|
|
|
var gs = this.graphics_style;
|
|
var ctx = this.canvas.getContext('2d');
|
|
if (this.isPNGSVG){
|
|
this.isSVG=true;
|
|
}
|
|
if (this.isSVG){
|
|
var oldctx = ctx;
|
|
var ctx = new SVGContext(ctx);
|
|
}
|
|
|
|
ctx.lineJoin="round";
|
|
var canvas = this.canvas;
|
|
|
|
var scaling_factor =gs.scaling_factor;
|
|
var graph_line_thickness =gs.graph_line_thickness*scaling_factor;
|
|
var symbol_size = gs.symbol_size*scaling_factor;
|
|
var line_thickness= gs.line_thickness*scaling_factor;
|
|
var tick_len = gs.tick_len*scaling_factor;
|
|
var mode = gs.mode;
|
|
var font_name = gs.font_name;
|
|
var title_font_size = gs.title_font_size*scaling_factor;
|
|
var title = gs.title;
|
|
var subtitle = gs.subtitle;
|
|
var title_spacing = gs.title_spacing*scaling_factor;
|
|
var tick_labels_font_size = gs.tick_labels_font_size*scaling_factor;
|
|
var tick_lables_font_padding = gs.tick_lables_font_padding*scaling_factor;
|
|
var axis_labels_font_size=gs.axis_labels_font_size*scaling_factor;
|
|
var lable_spacing =gs.lable_spacing*scaling_factor;
|
|
var x_axis_title =gs.x_axis_title;
|
|
var y_axis_title = gs.y_axis_title;
|
|
var minor_tick_len = gs.minor_tick_len*scaling_factor;
|
|
var guideWidthx = gs.guideWidthx*scaling_factor;
|
|
var guideWidthy = gs.guideWidthy*scaling_factor;
|
|
|
|
//befor clearing the scrren try to draw some text to check the font is ok
|
|
try{
|
|
ctx.font=tick_labels_font_size + 'px ' + font_name;
|
|
ctx.fillText('font test',10,10);
|
|
} catch(e) {
|
|
this.errors.push("font faliure");
|
|
font_name = "Courier New";
|
|
gs.font_name = "Courier New";
|
|
}
|
|
|
|
// clear prevous drawing
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.strokeStyle = gs.color_fg;
|
|
|
|
|
|
if (this.transparent ){
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
} else {
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
if (this.isSVG){
|
|
ctx.clearAll();
|
|
ctx.font_name = font_name;
|
|
ctx.startClipBox(0,0,canvas.width,canvas.height)
|
|
}
|
|
|
|
//run data transforms
|
|
//back up data so the transforms can mess it up
|
|
if (this.transform_index != gs.data_transforms.length ){
|
|
this.data = clone(this.data_backup);
|
|
this.captions = clone(this.captions_backup);
|
|
this.colors_backup = clone(gs.line_colours);
|
|
this.line_modes_backup = clone(gs.line_modes);
|
|
this.symbol_modes_backup = clone(gs.symbol_modes);
|
|
|
|
this.colors = clone(this.colors_backup);
|
|
this.line_modes = clone(this.line_modes_backup);
|
|
this.symbol_modes = clone(this.symbol_modes_backup);
|
|
this.transform_index = 0;
|
|
this.transform_text_x = x_axis_title;//'x';
|
|
this.transform_text_y = y_axis_title;//'y';
|
|
//hide/show lines from the lines menu
|
|
transforms.remove_lines(this.data,gs.hidden_lines,this);
|
|
}
|
|
|
|
//run the transforms
|
|
while(this.transform_index<gs.data_transforms.length){
|
|
var fun = eval("transforms." + gs.data_transforms[this.transform_index]);
|
|
console.log('running ' + gs.data_transforms[this.transform_index]);
|
|
fun(this.data,gs.data_transforms_args[this.transform_index],this);
|
|
this.transform_index++;
|
|
}
|
|
|
|
//TODO use a.concat(c,b) method here and test for speed improvements.
|
|
var xdata = [];
|
|
var ydata = [];
|
|
for (var i = 0;i<this.data.length;i++){
|
|
xdata.push(this.data[i][0]);
|
|
ydata.push(this.data[i][1]);
|
|
}
|
|
|
|
var xlimits = this.find_limits(xdata,gs.x_scale_auto_min,gs.x_scale_auto_max,gs.x_manual_min,gs.x_manual_max,gs.x_scale_mode,'x');
|
|
var xlow = xlimits.low;
|
|
var xhigh = xlimits.high;
|
|
gs.x_scale_auto_min = xlimits.automin;
|
|
gs.x_scale_auto_max = xlimits.automax;
|
|
gs.x_scale_mode = xlimits.scale;
|
|
|
|
var ylimits = this.find_limits(ydata,gs.y_scale_auto_min,gs.y_scale_auto_max,gs.y_manual_min,gs.y_manual_max,gs.y_scale_mode,'y');
|
|
var ylow = ylimits.low;
|
|
var yhigh = ylimits.high;
|
|
gs.y_scale_auto_min = ylimits.automin;
|
|
gs.y_scale_auto_max = ylimits.automax;
|
|
gs.y_scale_mode = ylimits.scale;
|
|
|
|
var the_scalex = this.find_scale(xlow,xhigh,this.canvas.width,guideWidthx,gs.x_scale_mode,gs.x_scale_tight,'x');
|
|
var lowpointx = the_scalex.lowpoint; //far left point
|
|
var highpointx = the_scalex.highpoint; //far right point
|
|
var scalex = the_scalex.scale; // the width of a section on the graph.
|
|
var widthx = the_scalex.width; //is the width of one section in pixels
|
|
var val_ix = the_scalex.val_i; //the posistion in vals or log_vals
|
|
var val_i_lowx =the_scalex.val_i_low;
|
|
var power_lowx = the_scalex.power_low;
|
|
var val_i_highx = the_scalex.val_i_high;
|
|
var power_highx = the_scalex.power_high;
|
|
//log scale
|
|
|
|
var the_scaley = this.find_scale(ylow,yhigh,this.canvas.height,guideWidthy,gs.y_scale_mode,gs.y_scale_tight,'y');
|
|
|
|
//this is an experiament to use the fontsize to set the guidewidth
|
|
//var the_scaley = this.find_scale(ylow,yhigh,this.canvas.height,tick_labels_font_size*2,gs.y_scale_mode,gs.y_scale_tight);
|
|
//it works! but it's not ready to implement yet. as this would be a breaking api change.
|
|
|
|
var lowpointy = the_scaley.lowpoint;
|
|
var highpointy = the_scaley.highpoint;
|
|
var scaley = the_scaley.scale;
|
|
var widthy = the_scaley.width;
|
|
var val_iy = the_scaley.val_i;
|
|
var val_i_lowy =the_scaley.val_i_low;
|
|
var power_lowy = the_scaley.power_low;
|
|
var val_i_highy = the_scaley.val_i_high;
|
|
var power_highy = the_scaley.power_high;
|
|
|
|
//set the graphics style x_auto_max mins...
|
|
gs.x_auto_min = lowpointx;
|
|
gs.x_auto_max = highpointx;
|
|
gs.y_auto_min = lowpointy;
|
|
gs.y_auto_max = highpointy;
|
|
var positionsx = this.use_scale(the_scalex,canvas.width,guideWidthx,'x');
|
|
var positionsy = this.use_scale(the_scaley,canvas.height,guideWidthy,'y');
|
|
|
|
|
|
//if the autos are on update the manual settings
|
|
if (gs.y_scale_auto_min ){
|
|
gs.y_manual_min = this.pixels_to_units(this.canvas.height,'y');
|
|
}
|
|
if (gs.y_scale_auto_max ){
|
|
gs.y_manual_max = this.pixels_to_units(0,'y');
|
|
}
|
|
if (gs.x_scale_auto_min ){
|
|
gs.x_manual_min = this.pixels_to_units(0,'x');
|
|
}
|
|
if (gs.x_scale_auto_max ){
|
|
gs.x_manual_max = this.pixels_to_units(this.canvas.width,'x');
|
|
}
|
|
|
|
gs.scalex = scalex;
|
|
gs.scaley = scaley;
|
|
gs.widthx = widthx;
|
|
gs.widthy = widthy;
|
|
|
|
//draw a grid.
|
|
if (gs.show_grid){
|
|
ctx.strokeStyle = gs.color_mg;
|
|
ctx.beginPath();
|
|
for (var i = 0;i<positionsy.pos.length;i++){
|
|
var y = canvas.height - positionsy.pos[i];
|
|
ctx.moveTo(0,y);
|
|
ctx.lineTo(canvas.width,y);
|
|
}
|
|
for (var i = 0;i<positionsx.pos.length;i++){
|
|
var x = positionsx.pos[i];
|
|
ctx.moveTo(x,0);
|
|
ctx.lineTo(x,canvas.height);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
//draw the function lines
|
|
|
|
//this.drawSimpleLine(ctx,fit_x,fit_y);
|
|
var lines_start = 0;
|
|
var lines_end = canvas.width;
|
|
var fit_x = [];
|
|
for (var j=lines_start; j<lines_end;j+=2){
|
|
fit_x.push(this.pixels_to_units(j,'x'));
|
|
}
|
|
var fit_y = [];
|
|
for (var i = 0; i<gs.function_lines.length;i++){
|
|
try {
|
|
fit_y = parseExpression(gs.function_lines[i],fit_x,fit_x);
|
|
this.drawSimpleLine(ctx,fit_x,fit_y);
|
|
} catch(e){
|
|
this.errors.push('function line:y=' + gs.function_lines[i] + ' fails');
|
|
}
|
|
}
|
|
|
|
ctx.font=tick_labels_font_size + 'px ' + font_name//"24px Courier New";
|
|
//draw the points
|
|
ctx.lineWidth = line_thickness;
|
|
//ctx.strokeStyle = '#ff0000';
|
|
var drawn_something = false;
|
|
var drawn_caps = false;
|
|
var points_drawn = 0;
|
|
//for histogram find the 0 point or use the bottom of the screen.
|
|
var hist_zero = Math.min(this.units_to_pixels(0,'y'),canvas.height);
|
|
|
|
|
|
if (this.isPNGSVG){
|
|
var svgctx = ctx;
|
|
ctx = oldctx;
|
|
this.isSVG=false;
|
|
}
|
|
|
|
|
|
var full_auto_zoom = gs.y_scale_auto_min && gs.y_scale_auto_max && gs.x_scale_auto_min && gs.x_scale_auto_max;
|
|
//point drawing code here
|
|
for (i = 0;i<this.data.length;i++){
|
|
ctx.strokeStyle = this.colors[i];
|
|
var symbol_mode = this.symbol_modes[i];
|
|
var line_mode = this.line_modes[i];
|
|
ctx.fillStyle = ctx.strokeStyle ;
|
|
if (gs.symbol_mode === 'none' && gs.line_mode == 'none'){
|
|
this.errors.push("no symbols or lines to draw");
|
|
}
|
|
//this chunk of code checks to find sequences of data that are on screen
|
|
//don't waste time drawing points that aren't going to be seen.
|
|
|
|
// but if the auto zoom is on, then we know everything is going to be drawn anyway.
|
|
if ( !full_auto_zoom ){
|
|
//save each sequency in the seq_start and seq_end arrays
|
|
var ongraph = false;
|
|
var wasOngraph = false;
|
|
var graph_top = this.pixels_to_units(0,'y');
|
|
var graph_bottom = this.pixels_to_units(canvas.height,'y');
|
|
|
|
var graph_left = this.pixels_to_units(0,'x');
|
|
var graph_right = this.pixels_to_units(canvas.width,'x');
|
|
var seq_start = [];
|
|
var seq_end = [];
|
|
for (var k = 0;k<this.data[i][0].length;k++){
|
|
ongraph = ( this.data[i][0][k] > graph_left && this.data[i][0][k] < graph_right &&
|
|
this.data[i][1][k] > graph_bottom && this.data[i][1][k] < graph_top );
|
|
if (!ongraph && wasOngraph){
|
|
seq_end.push(Math.min(k+2,this.data[i][0].length));
|
|
}
|
|
if (ongraph && !wasOngraph){
|
|
seq_start.push(Math.max(k-2,0));
|
|
}
|
|
wasOngraph = ongraph;
|
|
}
|
|
//finish of the last sequence if it is open.
|
|
if (seq_start.length > seq_end.length){
|
|
seq_end.push(k);
|
|
}
|
|
//do sequence merging
|
|
//merge sequences if they are very close to each other or overlapping
|
|
for (k=seq_start.length-1;k>=0;k--){
|
|
//if they are within 1 just merge the sequences together.
|
|
if (seq_start[k] <= seq_end[k-1] +2){
|
|
seq_end[k-1] = seq_end[k];
|
|
//remove
|
|
seq_end.splice(k,1);
|
|
seq_start.splice(k,1);
|
|
}
|
|
}
|
|
} else {
|
|
seq_start= [0];
|
|
seq_end = [this.data[i][0].length];
|
|
}
|
|
|
|
drawn_something = drawn_something || seq_start.length > 0;
|
|
|
|
//keeps the prevous 3 data points for the curves
|
|
// order goes 1,2,3,i
|
|
//itinilisitation:
|
|
// j = 0 [123i, , , ]
|
|
// j = 1 [123,i, , ]
|
|
// j = 2 [12,3,i, , ]
|
|
// j = 3 [1,2,3,i, , ]
|
|
// . . .
|
|
// j = n [ , , , 1,2,3,i, , ,]
|
|
//draw the sequences.
|
|
if (this.isSVG){ctx.startGroup();}
|
|
for (k=0;k<seq_start.length;k++){
|
|
|
|
if ( line_mode.indexOf('line') >-1 ){
|
|
this.drawing_methods.draw_line(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
|
|
if ( symbol_mode === 'dot' ){
|
|
this.drawing_methods.draw_dot(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if ( symbol_mode === 'cdot' ){
|
|
this.drawing_methods.draw_cdot(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if ( symbol_mode === 'circ' ){
|
|
this.drawing_methods.draw_circ(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if ( symbol_mode === 'box' ){
|
|
this.drawing_methods.draw_box(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if ( symbol_mode === 'x' ){
|
|
this.drawing_methods.draw_x(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if ( symbol_mode === 'cross' ){
|
|
this.drawing_methods.draw_cross(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if ( line_mode.indexOf('zig') >-1 ){
|
|
this.drawing_methods.draw_zig(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if ( line_mode.indexOf('zag') >-1 ){
|
|
this.drawing_methods.draw_zag(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if ( line_mode.indexOf('mid') >-1 ){
|
|
this.drawing_methods.draw_mid(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if ( line_mode.indexOf('approx') >-1 ){
|
|
this.drawing_methods.draw_approx(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if ( line_mode.indexOf('interp') >-1 ){
|
|
this.drawing_methods.draw_interp(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if ( line_mode.indexOf('scribble') >-1 ){
|
|
this.drawing_methods.draw_scribble(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if ( line_mode.indexOf('hist') >-1 ){
|
|
this.drawing_methods.draw_hist(this,ctx,i,seq_start[k],seq_end[k]);
|
|
}
|
|
if (this.data[i].length >=3){
|
|
//has y error data
|
|
this.drawing_methods.draw_y_errors(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
if (this.data[i].length >=4){
|
|
//has x error data
|
|
this.drawing_methods.draw_x_errors(this,ctx,i,seq_start[k],seq_end[k],symbol_size);
|
|
}
|
|
}
|
|
if (this.isSVG){ctx.endGroup();}
|
|
|
|
}
|
|
|
|
|
|
if (this.isPNGSVG){
|
|
ctx = svgctx;
|
|
this.isSVG=true;
|
|
ctx.image(0,0,canvas.width,canvas.height,this.pngbackground );
|
|
}
|
|
|
|
if (!this.isSVG){
|
|
if (this.needs_drag_image || gs.mouse_mode === 'drag'){
|
|
this.graph_image_for_drag = ctx.getImageData(0,0,canvas.width,canvas.height);
|
|
this.needs_drag_image = false;
|
|
}
|
|
}
|
|
|
|
ctx.lineWidth = graph_line_thickness;
|
|
ctx.strokeStyle = gs.color_fg;//'#000000';
|
|
ctx.fillStyle = gs.color_fg;;//'#000000';
|
|
|
|
if (!drawn_something && this.no_data == false && gs.function_lines.length ==0){
|
|
this.errors.push("there might be data around, just not where you're looking");
|
|
}
|
|
|
|
|
|
//draw the ticks and the points.
|
|
//for x
|
|
var l = positionsx.strings.length;
|
|
var stepping = ctx.measureText(positionsx.strings[1]+' ').width > positionsx.pos[1] - positionsx.pos[0] || ctx.measureText(positionsx.strings[l-1] + ' ').width > positionsx.pos[l-1] - positionsx.pos[l-2] ;
|
|
|
|
if (stepping ){
|
|
var j = -1*tick_labels_font_size/2;
|
|
var o = tick_labels_font_size/2;
|
|
} else {
|
|
var j = 0;
|
|
var o = 0;
|
|
|
|
}
|
|
ctx.textAlign="center";
|
|
ctx.beginPath();
|
|
for (var i = 0;i<positionsx.pos.length;i++){
|
|
var x = positionsx.pos[i];
|
|
if (x > graph_line_thickness && x < canvas.width - graph_line_thickness){
|
|
var label = positionsx.strings[i];
|
|
|
|
ctx.fillText(label,x,canvas.height-tick_len*1.2-tick_lables_font_padding - o - j);
|
|
j *= -1;
|
|
|
|
/*MZ
|
|
ctx.moveTo(x,graph_line_thickness/2);
|
|
ctx.lineTo(x,tick_len);
|
|
*/
|
|
ctx.moveTo(x,canvas.height-graph_line_thickness/2);
|
|
ctx.lineTo(x,canvas.height-tick_len);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
for (var i = 0;i<positionsx.minor_pos.length;i++){
|
|
|
|
x = positionsx.minor_pos[i];
|
|
if (x > graph_line_thickness && x < canvas.width - graph_line_thickness){
|
|
/*MZ
|
|
ctx.moveTo(x,graph_line_thickness/2);
|
|
ctx.lineTo(x,minor_tick_len);
|
|
*/
|
|
ctx.moveTo(x,canvas.height-graph_line_thickness/2);
|
|
ctx.lineTo(x,canvas.height-minor_tick_len);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
gs.x_precision = positionsx.precision;
|
|
ctx.textAlign="left";
|
|
ctx.beginPath();
|
|
for (var i = 0;i<positionsy.pos.length;i++){
|
|
var y = canvas.height - positionsy.pos[i];
|
|
if (y > graph_line_thickness && y < canvas.height - graph_line_thickness){
|
|
var label = positionsy.strings[i];
|
|
//if it is near the top, don't put a label, as this is where the axis label is.
|
|
if (y > tick_len+lable_spacing+axis_labels_font_size+tick_labels_font_size/2 && y < canvas.height - tick_labels_font_size - tick_lables_font_padding-tick_len-tick_labels_font_size/2){
|
|
ctx.fillText(label,tick_len*1.2+tick_lables_font_padding+2,y+3);
|
|
}
|
|
|
|
ctx.moveTo(graph_line_thickness/2,y);
|
|
ctx.lineTo(tick_len,y);
|
|
/*MZ
|
|
ctx.moveTo(canvas.width-graph_line_thickness/2,y);
|
|
ctx.lineTo(canvas.width-tick_len,y);
|
|
*/
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
for (var i = 0;i<positionsy.minor_pos.length;i++){
|
|
y = canvas.height - positionsy.minor_pos[i];
|
|
if (y > graph_line_thickness && y < canvas.height - graph_line_thickness){
|
|
ctx.moveTo(graph_line_thickness/2,y);
|
|
ctx.lineTo(minor_tick_len,y);
|
|
/*MZ
|
|
ctx.moveTo(canvas.width-graph_line_thickness/2,y);
|
|
ctx.lineTo(canvas.width-minor_tick_len,y);
|
|
*/
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
gs.y_precision = positionsy.precision;
|
|
|
|
if (gs.show_captions) {
|
|
ctx.font=tick_labels_font_size + 'px ' + font_name//"14px Courier New";
|
|
|
|
x = gs.scaling_factor*gs.caption_position.x;
|
|
y = gs.scaling_factor*gs.caption_position.y;
|
|
if (gs.caption_position.y>0){
|
|
//going down from top
|
|
y += tick_labels_font_size;
|
|
dy = tick_labels_font_size;
|
|
y += tick_len;
|
|
} else {
|
|
//up from botton
|
|
dy = tick_labels_font_size;
|
|
y = canvas.height + y;
|
|
y += tick_labels_font_size - this.data.length*dy;
|
|
y -= tick_len;
|
|
}
|
|
if (gs.caption_position.x>0){
|
|
ctx.textAlign="left";
|
|
x += tick_len;
|
|
} else {
|
|
ctx.textAlign="right";
|
|
x = canvas.width + x;
|
|
x -= tick_len;
|
|
}
|
|
for (i = 0;i<this.data.length;i++){
|
|
ctx.fillStyle = this.colors[i];
|
|
label = this.captions[i] || 'label' ;
|
|
var splitter = " : ";
|
|
switch(gs.captions_display){
|
|
case "ylast":
|
|
label += splitter + this.get_axis_string(this.data[i][1][this.data[i][1].length-1],'y',gs.captions_extra_precision + gs.y_precision);
|
|
break;
|
|
case "xlast":
|
|
label += splitter + this.get_axis_string(this.data[i][0][this.data[i][0].length-1],'x',gs.captions_extra_precision + gs.x_precision);
|
|
break;
|
|
case "xfirst":
|
|
label += splitter + this.get_axis_string(this.data[i][0][0],'x',gs.captions_extra_precision + gs.x_precision);
|
|
break;
|
|
case "yfirst":
|
|
label += splitter + this.get_axis_string(this.data[i][1][0],'y',gs.captions_extra_precision + gs.y_precision);
|
|
break;
|
|
case "xmin":
|
|
label += splitter + this.get_axis_string( Math.min.apply(null, this.data[i][0] ) ,'x',gs.captions_extra_precision + gs.x_precision);
|
|
break;
|
|
case "ymin":
|
|
label += splitter + this.get_axis_string( Math.min.apply(null, this.data[i][1] ) ,'y',gs.captions_extra_precision + gs.y_precision);
|
|
break;
|
|
case "ymax":
|
|
label += splitter + this.get_axis_string( Math.max.apply(null, this.data[i][1] ) ,'y',gs.captions_extra_precision + gs.y_precision);
|
|
break;
|
|
case "xmax":
|
|
label += splitter + this.get_axis_string( Math.max.apply(null, this.data[i][0] ) ,'x',gs.captions_extra_precision + gs.x_precision);
|
|
break;
|
|
}
|
|
|
|
|
|
if (!this.transparent){
|
|
ctx.strokeStyle = gs.color_bg;
|
|
ctx.lineWidth = axis_labels_font_size/3;
|
|
ctx.strokeText(label,x,y);
|
|
}
|
|
ctx.fillText(label,x,y);
|
|
y += dy;
|
|
}
|
|
|
|
|
|
//show the 'other lines hidden' text
|
|
if (this.data.length != this.data_backup.length){
|
|
label = 'other lines hidden';
|
|
if (!this.transparent){
|
|
ctx.strokeStyle = gs.color_bg;
|
|
ctx.lineWidth = axis_labels_font_size/3;
|
|
ctx.strokeText(label,x,y);
|
|
}
|
|
ctx.fillStyle = gs.color_mg;
|
|
ctx.fillText(label,x,y);
|
|
}
|
|
}
|
|
ctx.lineWidth = graph_line_thickness;
|
|
ctx.strokeStyle = graph.graphics_style.color_fg;
|
|
ctx.fillStyle = graph.graphics_style.color_fg;
|
|
|
|
if ( (this.transform_text_x.length > 1 || this.transform_text_y.length > 1)&& gs.showTransformTexts ) {
|
|
var x_label = this.transform_text_x;
|
|
var y_label = this.transform_text_y;
|
|
} else {
|
|
var x_label = x_axis_title;
|
|
var y_label = y_axis_title;
|
|
}
|
|
|
|
//draw x axis label
|
|
ctx.font=axis_labels_font_size + 'px ' + font_name//"14px Courier New";
|
|
ctx.textAlign="right";
|
|
var label = x_label;
|
|
if (gs.x_scale_mode ==='time' && this.graphics_style.x_precision > 1 ){
|
|
label += ' ' + mjs_date_print( this.pixels_to_units(canvas.width,'x') ,0,Math.max(this.graphics_style.x_precision-1,0));
|
|
}
|
|
if (stepping) {
|
|
ctx.fillText(label,canvas.width - lable_spacing - tick_len,
|
|
canvas.height - tick_len-lable_spacing- 2*tick_labels_font_size-tick_lables_font_padding);
|
|
} else {
|
|
ctx.fillText(label,canvas.width - lable_spacing - tick_len,
|
|
canvas.height - tick_len-lable_spacing-tick_labels_font_size-tick_lables_font_padding);
|
|
}
|
|
ctx.textAlign="left";
|
|
//draw y axis lable
|
|
var label = y_label;
|
|
if (gs.y_scale_mode ==='time' && this.graphics_style.y_precision > 1){
|
|
label += ' ' + mjs_date_print( this.pixels_to_units(0,'y') ,0,Math.max(this.graphics_style.y_precision-1,0));
|
|
}
|
|
//var yoffset = ctx.measureText(positionsy.strings[positionsy.strings.length-1]).width;
|
|
ctx.fillText(label,tick_len+lable_spacing+tick_lables_font_padding,tick_len+lable_spacing+axis_labels_font_size);
|
|
//draw transforms stack
|
|
|
|
// draw infomation overlay if the info button is pushed.
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
|
|
var sigma = String.fromCharCode( 963 ); //σ²
|
|
var squared = String.fromCharCode( 178 ); //σ²
|
|
var bar = String.fromCharCode( 773 ); //put befor what you want bared e.g. bar + 'y'
|
|
var edge = tick_len*2.6;
|
|
ctx.font=axis_labels_font_size + 'px ' + font_name//"14px Courier New";
|
|
|
|
var fit_points_drawn = 0;
|
|
if (gs.fits === 'none'){
|
|
//dont' do anything :(
|
|
} else {
|
|
//do some fits or stats!!!! wooo stats.
|
|
ctx.textAlign="left";
|
|
|
|
var x = gs.fit_text_position.x * canvas.width;
|
|
var y = gs.fit_text_position.y * canvas.height;
|
|
var dy = 1.2*axis_labels_font_size;
|
|
|
|
for (i = 0;i<this.data.length;i++){
|
|
var label = this.captions[i] || 'label' ;
|
|
ctx.fillStyle = this.colors[i];
|
|
|
|
//three lines of text.
|
|
var string1 = '';
|
|
var string2 = '';
|
|
var string3 = '';
|
|
|
|
if (!this.transparent){
|
|
ctx.strokeStyle = gs.color_bg;
|
|
ctx.lineWidth = axis_labels_font_size/2;
|
|
ctx.strokeText(label,x,y);
|
|
}
|
|
|
|
ctx.fillText(label,x, y);
|
|
ctx.fillStyle = gs.color_fg;
|
|
|
|
ctx.lineWidth = line_thickness;
|
|
if (gs.color_fits){
|
|
ctx.strokeStyle = this.colors[i];
|
|
} else {
|
|
ctx.strokeStyle = gs.color_fg;
|
|
}
|
|
|
|
if (gs.fits === 'stats'){
|
|
var stats = series_stats(this.data[i][0],this.data[i][1]);
|
|
ctx.fillStyle = gs.color_fg;
|
|
|
|
string1 = ' n = ' +stats.n +
|
|
', cov(x,y) = ' + mjs_precision(stats.cov,Math.min(gs.x_precision,gs.y_precision)+3);
|
|
string2 = bar + 'x = ' +number_quote(stats.x_mean,stats.sigma_x) +
|
|
', '+sigma+'(x) = ' +mjs_precision(stats.sigma_x,2);
|
|
string3 = bar + 'y = ' + number_quote(stats.y_mean,stats.sigma_y) +
|
|
', '+sigma+'(y) = ' +mjs_precision(stats.sigma_y,2);
|
|
|
|
if (gs.color_fits){
|
|
ctx.strokeStyle = this.colors[i];
|
|
} else {
|
|
ctx.strokeStyle = gs.color_fg;
|
|
}
|
|
//draw the mean and the 1 and 2 SD lines...
|
|
//for x
|
|
ctx.beginPath();
|
|
for (var k = -1;k<1+1;k++){
|
|
var yi = graph.units_to_pixels(stats.y_mean+k*stats.sigma_y,'y');
|
|
ctx.moveTo(graph.units_to_pixels(stats.xmin,'x'),yi);
|
|
ctx.lineTo(graph.units_to_pixels(stats.xmax,'x'),yi);
|
|
}
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
for (var k = -1;k<1+1;k++){
|
|
var xi = graph.units_to_pixels(stats.x_mean+k*stats.sigma_x,'x');
|
|
ctx.moveTo(xi,graph.units_to_pixels(stats.ymax,'y'));
|
|
ctx.lineTo(xi,graph.units_to_pixels(stats.ymin,'y'));
|
|
}
|
|
ctx.stroke();
|
|
//drawEllipse(ctx, graph.units_to_pixels(stats.x_mean,'x'), graph.units_to_pixels(stats.y_mean,'y'), graph.units_to_pixels(stats.sigma_x,'x'), graph.units_to_pixels(stats.sigma_y,'y'));
|
|
drawEllipse(this,ctx, stats.x_mean, stats.y_mean, stats.sigma_x, stats.sigma_y);
|
|
drawEllipse(this,ctx, stats.x_mean, stats.y_mean, stats.sigma_x*2, stats.sigma_y*2);
|
|
}
|
|
if (gs.fits === 'old' && this.fit_data.length == 0){
|
|
gs.fits = 'none';
|
|
}
|
|
if (gs.fits === 'old'){
|
|
string1 = 'previous fit shown';
|
|
string2 = 'pick new fit';
|
|
//show the old fit if possible, don't make a new one.
|
|
fit_x = this.fit_data[i][0];
|
|
fit_y = this.fit_data[i][1];
|
|
|
|
if (gs.color_fits){
|
|
ctx.strokeStyle = this.colors[i];
|
|
} else {
|
|
ctx.strokeStyle = gs.color_fg;
|
|
}
|
|
this.drawSimpleLine(ctx,fit_x,fit_y);
|
|
|
|
|
|
}
|
|
|
|
//fit_strings = ['exp','exp_c','linear','quad', 'cubic','poly4','poly5','poly6','poly7','const','log','power','power_c'];
|
|
//fit_funs = [fits.exponential,fits.exponential_plus_c,fits.linear,fits.poly2,fits.poly3,fits.poly4,fits.poly5,fits.poly6,fits.poly7,fits.constant,fits.log,fits.power,fits.power_plus_c];
|
|
if (fits.fit_strings.indexOf(gs.fits)>-1){
|
|
//if time axis, normalise befor fit.
|
|
var fit;
|
|
var string1;
|
|
var string2;
|
|
var string3;
|
|
if (gs.x_scale_mode ==='time'){
|
|
var normed = fits.pre_fit_normalizing(this.data[i][0]);
|
|
fit = fits.fit_funs[fits.fit_strings.indexOf(gs.fits)]( normed.x ,this.data[i][1]);
|
|
string1=fit.strings[0] + " "+normed.s;
|
|
console.log('normalised: x = -' + normed.x_mean +' / '+ normed.sigma_x);
|
|
} else {
|
|
fit = fits.fit_funs[fits.fit_strings.indexOf(gs.fits)](this.data[i][0],this.data[i][1]);
|
|
string1=fit.strings[0];
|
|
}
|
|
|
|
string2=fit.strings[1];
|
|
string3=fit.strings[2];
|
|
|
|
//draw the line
|
|
if (gs.extrapolate){
|
|
var fit_start =0;
|
|
var fit_end = canvas.width;
|
|
} else {
|
|
var fit_start = Math.max( 0, this.units_to_pixels(Math.min.apply(null, this.data[i][0]),'x') );
|
|
var fit_end = Math.min( canvas.width, this.units_to_pixels(Math.max.apply(null, this.data[i][0]),'x') );
|
|
}
|
|
|
|
//make array of fit_x points to get y-points from
|
|
var fit_x = [];
|
|
for (var j=fit_start; j<fit_end;j+=5){
|
|
fit_x.push(this.pixels_to_units(j,'x'));
|
|
}
|
|
|
|
//if noramalisation was used.
|
|
if (gs.x_scale_mode ==='time'){
|
|
|
|
var fit_y = fit.fun( fits.post_fit_normalizing(fit_x,normed) ,fit.parameters);
|
|
} else {
|
|
var fit_y = fit.fun(fit_x,fit.parameters);
|
|
}
|
|
console.log("fit parameters: " + fit.parameters);
|
|
|
|
//save the fit data
|
|
this.fit_data[i] = [];
|
|
this.fit_data[i][0] = fit_x;
|
|
this.fit_data[i][1] = fit_y;
|
|
|
|
if (gs.color_fits){
|
|
ctx.strokeStyle = this.colors[i];
|
|
} else {
|
|
ctx.strokeStyle = gs.color_fg;
|
|
}
|
|
this.fit_points_drawn = 0;
|
|
this.drawSimpleLine(ctx,fit_x,fit_y);
|
|
}
|
|
if (!this.transparent){
|
|
ctx.strokeStyle = gs.color_bg;
|
|
ctx.lineWidth = axis_labels_font_size/3;
|
|
ctx.strokeText(string1,x + (label.length+1)*.6*axis_labels_font_size, y);
|
|
ctx.fillText(string1,x + (label.length+1)*.6*axis_labels_font_size, y);
|
|
y+=dy;
|
|
ctx.strokeText(string2,x, y);
|
|
ctx.fillText(string2,x, y);
|
|
y+=dy;
|
|
ctx.strokeText(string3,x, y);
|
|
ctx.fillText(string3,x, y);
|
|
y+=dy;
|
|
} else {
|
|
ctx.fillText(string1,x + (label.length+1)*.6*axis_labels_font_size, y);
|
|
y+=dy;
|
|
ctx.fillText(string2,x, y);
|
|
y+=dy;
|
|
ctx.fillText(string3,x, y);
|
|
y+=dy;
|
|
}
|
|
|
|
}
|
|
} // end of series loop
|
|
|
|
//draw the markers
|
|
ctx.textAlign="center";
|
|
var h = axis_labels_font_size;
|
|
var p = axis_labels_font_size/5; //padding around the label
|
|
for (var i = gs.show_markers?0:gs.markers.length;i<gs.markers.length;i++){
|
|
//set the center of each
|
|
|
|
|
|
var marker = gs.markers[i];
|
|
var handles = marker.handles
|
|
marker.x = 0;
|
|
marker.y = 0;
|
|
for (var j=0,l=handles.length;j<l;j++){
|
|
marker.x += handles[j][0];
|
|
marker.y += handles[j][1];
|
|
}
|
|
marker.x /= handles.length;
|
|
marker.y /= handles.length;
|
|
var x=0;
|
|
var y=0;
|
|
var dx=0;
|
|
var dy=0;
|
|
var w;
|
|
switch (marker.type){
|
|
case 'text':
|
|
x = this.units_to_pixels(handles[0][0],'x');
|
|
y = this.units_to_pixels(handles[0][1],'y');
|
|
ctx.fillText(marker.text,x, y);
|
|
break
|
|
case 'line':
|
|
ctx.beginPath();
|
|
x = this.units_to_pixels(handles[0][0],'x');
|
|
y = this.units_to_pixels(handles[0][1],'y');
|
|
ctx.moveTo(x,y);
|
|
x = this.units_to_pixels(handles[1][0],'x');
|
|
y = this.units_to_pixels(handles[1][1],'y');
|
|
ctx.lineTo(x,y);
|
|
ctx.stroke();
|
|
break;
|
|
case 'linentext':
|
|
ctx.beginPath();
|
|
x1 = this.units_to_pixels(handles[0][0],'x');
|
|
y1 = this.units_to_pixels(handles[0][1],'y');
|
|
ctx.moveTo(x1,y1);
|
|
x2 = this.units_to_pixels(handles[1][0],'x');
|
|
y2 = this.units_to_pixels(handles[1][1],'y');
|
|
ctx.lineTo(x2,y2);
|
|
ctx.stroke();
|
|
//find out where to place the text!
|
|
w = ctx.measureText(marker.text).width;
|
|
var xm = (x1+x2)/2;
|
|
var ym = (y1+y2)/2;
|
|
var t = Math.atan((y2-y1)/(x2-x1));
|
|
var mag = Math.abs(Math.sin(t) * w/2)+h;
|
|
t -= Math.PI/2;
|
|
if (x1>x2){t+=Math.PI}
|
|
var ox = mag * Math.cos(t);
|
|
var oy = mag*Math.sin(t);
|
|
|
|
ctx.fillText(marker.text,xm+ox,ym+oy+h/2);
|
|
/* //debugg visuals
|
|
ctx.beginPath();
|
|
ctx.moveTo(xm+ox-w/2,ym+oy);
|
|
ctx.lineTo(xm+ox+w/2,ym+oy);
|
|
ctx.moveTo(xm,ym);
|
|
ctx.lineTo(xm+3*ox,ym+3*oy);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.arc(xm,ym,5,0,Math.PI * 2,false);
|
|
ctx.stroke();
|
|
ctx.fillText('p1',x1,y1);
|
|
ctx.fillText('p2',x2,y2);
|
|
*/
|
|
break;
|
|
case 'arrow':
|
|
ctx.beginPath();
|
|
x = this.units_to_pixels(handles[0][0],'x');
|
|
y = this.units_to_pixels(handles[0][1],'y');
|
|
ctx.moveTo(x,y);
|
|
dx = this.units_to_pixels(handles[1][0],'x');
|
|
dy = this.units_to_pixels(handles[1][1],'y');
|
|
ctx.lineTo(dx,dy);
|
|
ctx.stroke();
|
|
drawArrow(ctx,x,y,h/6,Math.atan((dy-y)/(dx-x)) + ((dx>x)?Math.PI:0) );
|
|
break;
|
|
case 'box':
|
|
ctx.beginPath();
|
|
x = this.units_to_pixels(handles[0][0],'x');
|
|
y = this.units_to_pixels(handles[0][1],'y');
|
|
dx = this.units_to_pixels(handles[1][0],'x');
|
|
dy = this.units_to_pixels(handles[1][1],'y');
|
|
ctx.rect(x,y,dx-x,dy-y);
|
|
ctx.stroke();
|
|
break;
|
|
case 'boxntext':
|
|
ctx.beginPath();
|
|
x = this.units_to_pixels(handles[0][0],'x');
|
|
y = this.units_to_pixels(handles[0][1],'y');
|
|
dx = this.units_to_pixels(handles[1][0],'x');
|
|
dy = this.units_to_pixels(handles[1][1],'y');
|
|
ctx.rect(x,y,dx-x,dy-y);
|
|
ctx.stroke();
|
|
if (y>dy){
|
|
ctx.fillText(marker.text,(x+dx)/2, y+h);
|
|
} else {
|
|
ctx.fillText(marker.text,(x+dx)/2, y-h/3);
|
|
}
|
|
break;
|
|
case 'arrowntext':
|
|
var x1 = this.units_to_pixels(handles[0][0],'x');
|
|
var y1 = this.units_to_pixels(handles[0][1],'y');
|
|
var x2 = this.units_to_pixels(handles[1][0],'x');
|
|
var y2 = this.units_to_pixels(handles[1][1],'y');
|
|
|
|
ctx.fillText(marker.text,x2,y2);
|
|
w = ctx.measureText(marker.text).width;
|
|
var minX = x2-w/2-p;
|
|
var maxX = x2+w/2+p;
|
|
var minY = y2-h-p;
|
|
var maxY= y2+h/2+p;
|
|
if ((minX <= x1 && x1 <= maxX) && (minY <= y1 && y1 <= maxY)){
|
|
break;
|
|
}
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1,y1);
|
|
var midX = (minX + maxX) / 2;
|
|
var midY = (minY + maxY) / 2;
|
|
var m = (midY - y1) / (midX - x1);
|
|
if (x1 < midX) { // check "left" side
|
|
var minXy = m * (minX - x1) + y1;
|
|
if (minY < minXy && minXy < maxY)
|
|
ctx.lineTo(minX,minXy);
|
|
} if (x1 > midX) { // check "right" side
|
|
var maxXy = m * (maxX - x1) + y1;
|
|
if (minY < maxXy && maxXy < maxY)
|
|
ctx.lineTo(maxX,maxXy);
|
|
} if (y1 < midY) { // check "top" side
|
|
var minYx = (minY - y1) / m + x1;
|
|
if (minX < minYx && minYx < maxX)
|
|
ctx.lineTo(minYx,minY);
|
|
} if (y1 > midY) { // check "bottom" side
|
|
var maxYx = (maxY - y1) / m + x1;
|
|
if (minX < maxYx && maxYx < maxX)
|
|
ctx.lineTo(maxYx,maxY);
|
|
}
|
|
ctx.stroke();
|
|
drawArrow(ctx,x1,y1,h/6,Math.atan((y2-y1)/(x2-x1)) + ((x2>x1)?Math.PI:0) );
|
|
break;
|
|
}
|
|
}
|
|
|
|
ctx.lineWidth = graph_line_thickness;
|
|
ctx.textAlign="center";
|
|
ctx.strokeStyle = gs.color_fg;
|
|
//draw title and subtitle
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.font=title_font_size + 'px ' + font_name;//"24px Courier New";
|
|
ctx.fillText(title,canvas.width/2,tick_len+title_spacing+title_font_size);
|
|
ctx.font=axis_labels_font_size + 'px ' + font_name;//"24px Courier New";
|
|
ctx.fillText(gs.subtitle,canvas.width/2,tick_len+title_spacing+axis_labels_font_size+title_font_size);
|
|
ctx.fillText(gs.subtitle2,canvas.width/2,tick_len+title_spacing+2*axis_labels_font_size+title_font_size);
|
|
|
|
if (gs.data_transforms.length > 0 && gs.showTransformTexts){
|
|
|
|
ctx.font=axis_labels_font_size + 'px ' + font_name;//"24px Courier New";
|
|
var label = '['+gs.data_transforms.join('|')+']';
|
|
var labely = title_spacing+title_font_size+tick_len+axis_labels_font_size;
|
|
if (gs.subtitle.length>0){labely += axis_labels_font_size;}
|
|
if (gs.subtitle2.length>0){labely += axis_labels_font_size;}
|
|
//top center
|
|
ctx.fillText(label,canvas.width/2,labely);
|
|
//bottom left
|
|
//ctx.fillText(label,lable_spacing + tick_len, canvas.height - tick_len-lable_spacing-tick_labels_font_size);
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
if (gs.i >= 1){
|
|
ctx.strokeStyle = gs.color_fg;
|
|
//white out the bg
|
|
ctx.lineWidth = graph_line_thickness;
|
|
ctx.fillStyle = gs.color_bg;
|
|
ctx.rect(2*edge,2*edge,canvas.width - 4*edge,canvas.height - 4*edge);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
//graph.pre_mouse_mode = gs.mouse_mode;
|
|
//gs.mouse_mode = 'i';
|
|
ctx.fillStyle = gs.color_fg;
|
|
ctx.textAlign="left";
|
|
var y = 3*edge;
|
|
var dy = axis_labels_font_size*1.5;
|
|
ctx.fillText('canvas width : ' + canvas.width,3*edge,y); y +=dy;
|
|
ctx.fillText('canvas height : ' + canvas.height,3*edge,y);y +=dy;
|
|
ctx.fillText('canvas ID : ' + this.canvas_name,3*edge,y);y +=dy;
|
|
ctx.fillText('graph name : ' + this.graph_name,3*edge,y);y +=dy;
|
|
ctx.fillText('No. series : ' + this.data.length + ' of ' + this.data_backup.length,3*edge,y);y +=dy;
|
|
ctx.fillText('Points drawn : ' + this.points_drawn,3*edge,y);y +=dy;
|
|
ctx.fillText('Drawn points for fits : ' + fit_points_drawn,3*edge,y);y +=dy;
|
|
ctx.fillText('Touch : ' + is_touch_device(),3*edge,y);y +=dy;
|
|
|
|
var end_time = new Date();
|
|
graph.ui.draw_time = end_time.getTime() - start_time.getTime();
|
|
ctx.fillText('Draw Time : ' + graph.ui.draw_time+'ms',3*edge,y);y +=dy;
|
|
ctx.fillText('Copy Time : ' + graph.ui.copy_time+'ms',3*edge,y);y +=dy;
|
|
ctx.textAlign="right";
|
|
var label = "MJS"+"2015";
|
|
ctx.fillText(label,canvas.width-tick_len-2*edge,canvas.height - axis_labels_font_size-2*edge);
|
|
var label = 'version: ' + MJS_PLOT_VERSION;
|
|
ctx.fillText(label,canvas.width-tick_len-2*edge,canvas.height - axis_labels_font_size*2.5-2*edge);
|
|
var label = 'web:' + MJS_PLOT_WEBSITE;
|
|
ctx.fillText(label,canvas.width-tick_len-2*edge,canvas.height - axis_labels_font_size*3.5-2*edge);
|
|
}
|
|
this.points_drawn =0;
|
|
|
|
//print any errors to the screen
|
|
//graph.errors = ['some error']
|
|
if (this.errors.length >0){
|
|
ctx.font=axis_labels_font_size + 'px ' + font_name;//"24px Courier New";
|
|
//make the text red
|
|
var oldfill = ctx.fillStyle;
|
|
ctx.fillStyle = "#FF0000";
|
|
ctx.textAlign="center";
|
|
for (var i = 0;i<this.errors.length;i++){
|
|
var s = "error > " + this.errors[i];
|
|
var x = canvas.width/2;
|
|
var y = 2*tick_len+title_spacing+axis_labels_font_size+canvas.height/2 - axis_labels_font_size*this.errors.length/2 + axis_labels_font_size*i;
|
|
ctx.fillText(s,x,y);
|
|
}
|
|
// return the fill colour
|
|
ctx.fillStyle = oldfill;
|
|
}
|
|
|
|
//clear the error list.
|
|
this.errors = [];
|
|
ctx.textAlign="left";
|
|
//flush the drawing code
|
|
ctx.beginPath();
|
|
ctx.stroke();
|
|
|
|
//draw box around the graph
|
|
/*MZ
|
|
ctx.beginPath();
|
|
ctx.rect(graph_line_thickness/2,
|
|
graph_line_thickness/2,
|
|
canvas.width-graph_line_thickness,
|
|
canvas.height-graph_line_thickness);
|
|
ctx.lineWidth = graph_line_thickness;
|
|
ctx.strokeStyle = gs.color_fg;
|
|
ctx.stroke();
|
|
*/
|
|
|
|
gs.modified = true;
|
|
//cookie stuff
|
|
save_gs(this.graph_name, gs);
|
|
if (!this.isSVG){
|
|
this.graph_image = ctx.getImageData(0,0,canvas.width,canvas.height);
|
|
}
|
|
this.plot_failed = false;
|
|
for (var i =0;i<this.onPlotFunctions.length;i++){
|
|
this.onPlotFunctions[i]();
|
|
}
|
|
|
|
},//end of plot function
|
|
units_to_pixels : function (number,axis){//converts a number to its position in pixels
|
|
|
|
if (axis === 'x'){
|
|
if (this.graphics_style.x_scale_mode ==='lin' || this.graphics_style.x_scale_mode ==='time'){
|
|
return (number-this.graphics_style.x_auto_min)*this.canvas.width/(this.graphics_style.x_auto_max - this.graphics_style.x_auto_min);
|
|
}
|
|
if (this.graphics_style.x_scale_mode ==='log'){
|
|
return (Math.log10(number)-this.graphics_style.x_auto_min)*this.canvas.width/(this.graphics_style.x_auto_max - this.graphics_style.x_auto_min) || 0.0;
|
|
}
|
|
}
|
|
if (axis === 'y'){
|
|
if (this.graphics_style.y_scale_mode ==='lin' || this.graphics_style.y_scale_mode ==='time'){
|
|
return this.canvas.height - (number-this.graphics_style.y_auto_min)*this.canvas.height/(this.graphics_style.y_auto_max - this.graphics_style.y_auto_min);
|
|
}
|
|
if (this.graphics_style.y_scale_mode ==='log'){
|
|
return this.canvas.height - (Math.log10(number)-this.graphics_style.y_auto_min)*this.canvas.height/(this.graphics_style.y_auto_max - this.graphics_style.y_auto_min) || canvas.height;
|
|
}
|
|
}
|
|
|
|
},
|
|
pixels_to_units : function (pixels,axis){ // convertis pixels over the graph to the corrisponding value on the graph
|
|
|
|
if (axis === 'x'){
|
|
if (this.graphics_style.x_scale_mode ==='lin' || this.graphics_style.x_scale_mode ==='time'){
|
|
return pixels / this.canvas.width * (this.graphics_style.x_auto_max - this.graphics_style.x_auto_min )+this.graphics_style.x_auto_min;
|
|
}
|
|
if (this.graphics_style.x_scale_mode ==='log'){
|
|
return Math.pow(10,pixels / this.canvas.width * (this.graphics_style.x_auto_max - this.graphics_style.x_auto_min )+this.graphics_style.x_auto_min);
|
|
}
|
|
}
|
|
if (axis === 'y'){
|
|
if (this.graphics_style.y_scale_mode ==='lin' || this.graphics_style.y_scale_mode ==='time'){
|
|
return (this.graphics_style.y_auto_max - this.graphics_style.y_auto_min) * (this.canvas.height-pixels) / this.canvas.height + this.graphics_style.y_auto_min;
|
|
}
|
|
if (this.graphics_style.y_scale_mode ==='log'){
|
|
var r = Math.pow(10,(this.canvas.height-pixels) / this.canvas.height * (this.graphics_style.y_auto_max - this.graphics_style.y_auto_min )+this.graphics_style.y_auto_min);
|
|
return r < 1e-200 ? 1e-200 : r;
|
|
}
|
|
|
|
}
|
|
},
|
|
get_axis_string : function (n, axis,precision){
|
|
if ( !isFinite(precision)){
|
|
if (axis == 'x'){
|
|
precision = this.graphics_style.x_precision+1;
|
|
}
|
|
if (axis == 'y'){
|
|
precision = this.graphics_style.y_precision+1;
|
|
}
|
|
}
|
|
if (axis == 'x'){
|
|
var r = this.graphics_style.x_axis_prefix|| "";
|
|
if (this.graphics_style.x_scale_mode ==='lin' || this.graphics_style.x_scale_mode ==='log'){
|
|
switch (this.graphics_style.x_label_mode){
|
|
case "norm":
|
|
r+= mjs_precision(n,precision);
|
|
break;
|
|
case "infix":
|
|
r+= eng_form_infix(n,precision);
|
|
break;
|
|
case "postfix":
|
|
r+= eng_form_postfix(n,precision);
|
|
break;
|
|
case "maths":
|
|
r+=maths_form(n,precision);
|
|
break;
|
|
case "sci":
|
|
r+= n.toExponential(precision-1);
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
if (this.graphics_style.x_scale_mode ==='time'){
|
|
r+= mjs_date_print(n,0,precision);
|
|
}
|
|
r += this.graphics_style.x_axis_postfix;
|
|
return r;
|
|
}
|
|
if (axis == 'y'){
|
|
var r = this.graphics_style.y_axis_prefix|| "";
|
|
if (this.graphics_style.y_scale_mode ==='lin' || this.graphics_style.y_scale_mode ==='log'){
|
|
switch (this.graphics_style.y_label_mode){
|
|
case "norm":
|
|
r+= mjs_precision(n,precision);
|
|
break;
|
|
case "infix":
|
|
r+= eng_form_infix(n,precision);
|
|
break;
|
|
case "postfix":
|
|
r+= eng_form_postfix(n,precision);
|
|
break;
|
|
case "sci":
|
|
r+= n.toExponential(precision-1);
|
|
break;
|
|
case "maths":
|
|
r+=maths_form(n,precision);
|
|
}
|
|
|
|
}
|
|
if (this.graphics_style.y_scale_mode ==='time'){
|
|
r+= mjs_date_print(n,0,precision);
|
|
}
|
|
r += this.graphics_style.y_axis_postfix;
|
|
return r;
|
|
}
|
|
|
|
},
|
|
make_full_screen : function (graph){
|
|
var doc = window.document;
|
|
full_screen_graph = graph;
|
|
var docEl = full_screen_graph.canvas;
|
|
full_screen_graph.orignal_canvas_width = full_screen_graph.canvas.width;
|
|
full_screen_graph.orignal_canvas_height = full_screen_graph.canvas.height;
|
|
|
|
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
|
|
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
|
|
requestFullScreen.call(docEl);
|
|
|
|
full_screen_graph.isFullscreen = true;
|
|
full_screen_graph.canvas.width = window.innerWidth;
|
|
full_screen_graph.canvas.height = window.innerHeight;
|
|
document.addEventListener("fullscreenchange", full_screen_graph.full_screen_handler);
|
|
document.addEventListener("webkitfullscreenchange", full_screen_graph.full_screen_handler);
|
|
document.addEventListener("mozfullscreenchange", full_screen_graph.full_screen_handler);
|
|
document.addEventListener("MSFullscreenChange", full_screen_graph.full_screen_handler);
|
|
|
|
// was window
|
|
window.addEventListener('resize', full_screen_graph.keep_full_screen, true);
|
|
|
|
} else {
|
|
full_screen_graph.errors.push("can't go fullscreen");
|
|
full_screen_graph.isFullscreen = false;
|
|
}
|
|
|
|
},
|
|
full_screen_handler : function(){
|
|
if (
|
|
document.fullscreenElement ||
|
|
document.webkitFullscreenElement ||
|
|
document.mozFullScreenElement ||
|
|
document.msFullscreenElement
|
|
) {
|
|
//console.log('handler going fullscreen');
|
|
} else {
|
|
full_screen_graph.exit_full_screen();
|
|
}
|
|
},
|
|
exit_full_screen : function(){
|
|
//fired when fullscreen is changed. do nothing when going to full screen but
|
|
//on the way back return the canvas size to what it was
|
|
// and detach the keep_full_screen handler.
|
|
full_screen_graph.isFullscreen = false;
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
}
|
|
window.removeEventListener('resize', full_screen_graph.keep_full_screen, true);
|
|
full_screen_graph.canvas.width = full_screen_graph.orignal_canvas_width;
|
|
full_screen_graph.canvas.height = full_screen_graph.orignal_canvas_height;
|
|
|
|
full_screen_graph.mjs_plot();
|
|
|
|
},
|
|
keep_full_screen : function (){
|
|
full_screen_graph.canvas.width = window.innerWidth;
|
|
full_screen_graph.canvas.height = window.innerHeight;
|
|
full_screen_graph.mjs_plot();
|
|
},
|
|
export_svg : function (width,height){
|
|
var temp_width = this.canvas.width;
|
|
var temp_height = this.canvas.height;
|
|
this.canvas.width = width;
|
|
this.canvas.height = height;
|
|
|
|
var svgDiv = document.createElement('div');
|
|
svgDiv.innerHTML = '<svg id="_mjsplotSVG" version="1.1" width="'+
|
|
this.canvas.width+
|
|
'" height="'+
|
|
this.canvas.height+
|
|
'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>';
|
|
document.body.appendChild(svgDiv);
|
|
this.isSVG=true;
|
|
this.mjs_plot();
|
|
var svg = document.getElementById("_mjsplotSVG").outerHTML;
|
|
var xmlheadder = '<?xml version="1.0" encoding="utf-8" standalone="yes"?> ';
|
|
download_text(xmlheadder+svg,'mjsplot_graph.svg','data:image/svg+xml;charset=utf-8');
|
|
document.body.removeChild(svgDiv);
|
|
this.isSVG=false;
|
|
this.canvas.width = temp_width;
|
|
this.canvas.height = temp_height;
|
|
this.mjs_plot();
|
|
},
|
|
export_svg_png : function (width,height,sf){
|
|
|
|
var temp_width = this.canvas.width;
|
|
var temp_height = this.canvas.height;
|
|
this.canvas.width = width*sf;
|
|
this.canvas.height = height*sf;
|
|
this.graphics_style.scaling_factor *= sf;
|
|
this.transparent = true;
|
|
this.needs_drag_image = true;
|
|
this.mjs_plot();
|
|
|
|
var ctx = this.canvas.getContext('2d');
|
|
ctx.putImageData(this.graph_image_for_drag,0,0);
|
|
this.pngbackground = this.canvas.toDataURL();
|
|
this.transparent = false;
|
|
this.graphics_style.scaling_factor /= sf;
|
|
this.canvas.width = width;
|
|
this.canvas.height = height;
|
|
var svgDiv = document.createElement('div');
|
|
svgDiv.innerHTML = '<svg id="_mjsplotSVG" version="1.1" width="'+
|
|
this.canvas.width+
|
|
'" height="'+
|
|
this.canvas.height+
|
|
'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>';
|
|
document.body.appendChild(svgDiv);
|
|
this.isSVG=false;
|
|
this.isPNGSVG=true;
|
|
this.mjs_plot();
|
|
var svg = document.getElementById("_mjsplotSVG").outerHTML;
|
|
var xmlheadder = '<?xml version="1.0" encoding="utf-8" standalone="yes"?> ';
|
|
download_text(xmlheadder+svg,'mjsplot_graph.svg','data:image/svg+xml;charset=utf-8');
|
|
document.body.removeChild(svgDiv);
|
|
this.isSVG=false;
|
|
this.isPNGSVG=false;
|
|
|
|
this.canvas.width = temp_width;
|
|
this.canvas.height = temp_height;
|
|
this.mjs_plot();
|
|
},
|
|
export_png :function(width,height,sf){
|
|
var temp_width = this.canvas.width;
|
|
var temp_height = this.canvas.height;
|
|
this.canvas.width = width;
|
|
this.canvas.height = height;
|
|
this.graphics_style.scaling_factor *= sf;
|
|
this.transparent = true;
|
|
this.mjs_plot();
|
|
var dataUrl = this.canvas.toDataURL();
|
|
window.open(dataUrl, "toDataURL() image", "width="+width+", height="+height);
|
|
this.transparent = false;
|
|
this.graphics_style.scaling_factor /= sf;
|
|
this.canvas.width = temp_width;
|
|
this.canvas.height = temp_height;
|
|
this.mjs_plot();
|
|
},
|
|
busy: function () {
|
|
if (mouse_down || this.menushown) {
|
|
this.paused = true;
|
|
return true;
|
|
}
|
|
mouse_move_event(this.ui.latestEvent,this);
|
|
if (this.paused) {
|
|
this.paused = false;
|
|
}
|
|
return false;
|
|
}
|
|
};//end of graph object
|
|
graph.canvas = canvas;
|
|
make_interactive(graph);
|
|
return graph;
|
|
}//end of new_graph()
|
|
|
|
,
|
|
get_graph_style : function (){
|
|
// set 'drag' to default mode on mobile, 'zoom' on desktops.
|
|
if (is_touch_device()){
|
|
var mouse_mode = 'drag'
|
|
} else {
|
|
var mouse_mode = 'zoom'
|
|
}
|
|
return {
|
|
graph_line_thickness : 1, // for the graph generally.
|
|
symbol_size : 5,
|
|
line_thickness: 2, // for plotted lines
|
|
tick_len : 7,
|
|
mode : 'dot line', //'circles', 'dot', or 'line'
|
|
symbol_mode : 'dot', // dot block circle croxx
|
|
line_mode : 'line', // line approx interp zig zag mid hist
|
|
symbol_modes : [], //per line symbol modes
|
|
line_modes : [], //per line line modes.
|
|
font_name : "serif",
|
|
title_font_size : 20,// in px (24)
|
|
title : "Title",
|
|
subtitle : "",
|
|
subtitle2 : "",
|
|
title_spacing : 2, // extra space from the top, in px.
|
|
tick_labels_font_size : 10,//10
|
|
tick_lables_font_padding : 2, // px extra space up from the ticks
|
|
axis_labels_font_size: 10,//12
|
|
lable_spacing : 4,//pixels away from the tick lables
|
|
x_axis_title : 'x axis (units)',
|
|
y_axis_title : 'y axis (units)',
|
|
x_axis_prefix : "",
|
|
x_axis_postfix : "",
|
|
y_axis_prefix : "",
|
|
y_axis_postfix : "",
|
|
x_label_mode : 'norm', // or infix,postfix,sci
|
|
y_label_mode : 'norm', // or infix,postfix,sci
|
|
minor_tick_len : 5,
|
|
guideWidthx : 35, //pixels accross
|
|
guideWidthy : 20, //pixels a across
|
|
scaling_factor : 1,//scales up everything together...
|
|
mouse_mode : mouse_mode, //changes the function of the mouse. between 'zoom' and 'drag' and 'measure'
|
|
fits : 'none', //what fitting is applied
|
|
extrapolate : false, //if the fit should extrapolate beyond the data
|
|
color_fits : false, //if the fit lines should be black or with the color of the series
|
|
x_scale_auto_max : true,
|
|
x_scale_auto_min : true,
|
|
y_scale_auto_max : true,
|
|
y_scale_auto_min : true,
|
|
x_manual_min : 0.0,
|
|
x_manual_max : 1.0,
|
|
y_manual_min : 0.0,
|
|
y_manual_max : 1.0,
|
|
x_scale_mode : 'lin', //linear or log
|
|
y_scale_mode : 'lin',
|
|
x_scale_tight : false, //data goes right to the edges.
|
|
y_scale_tight : false, // otherwise there will be a nice 1 section space on all sides.
|
|
show_captions : true,
|
|
showTransformTexts : true, //show the stack of transforms and modify the axis titles.
|
|
captions_display : "none",//xmin xmax ymin ymax yfirst ylast xfirst xlast or non
|
|
captions_extra_precision : 1, //extra precision to display on the captions has a minimum of 0. don't go negative.
|
|
color_fg : '#111', //foreground color
|
|
color_bg : '#eee', //background color
|
|
color_mg : '#aaa', //midground color, for the grid.
|
|
show_grid: false,
|
|
v : MJS_PLOT_VERSION, //version of mjsplot
|
|
caption_colors : false, // generate colors from the captions
|
|
hidden_lines : [], // array of booleans if each line should be hidden.
|
|
line_colours :[], // array of colours to use for the lines.
|
|
data_transforms : [], //a list of the transform functions
|
|
data_transforms_args : [], // the arguments for each transform
|
|
i : 0, //state of the infomation button
|
|
o : 0, //state of the options button
|
|
modified : false, //changes to true as soon as the user does anything to customise the style
|
|
x_precision :2, //the number of sf to use when printing numbers on the x axis
|
|
y_precision :2, //as above for y
|
|
fit_text_position:{x:0.1,y:0.2}, //fraction accross and fraction down.
|
|
caption_position:{x:-10,y:10}, //raw pixels down and accross (is then scaled by scaling_factor)
|
|
markers : [], //user added annotations
|
|
show_markers : true,
|
|
function_lines :[] // userdefined lines that are drawn over the graph. each item in the array is a string of the function
|
|
}
|
|
}
|
|
,
|
|
convert_time_strings : function (array_of_strings){
|
|
//converts an array of time strings to milliseconds from epoc
|
|
//example time strings:
|
|
/*
|
|
ISO-8601 and other strings (browser dependent)
|
|
March 2 2015
|
|
March 2 2015 12:45
|
|
2014/11/02 12:54
|
|
12:53 2014/11/02
|
|
2014
|
|
2/3/2014 ( MM/DD/YYYY)
|
|
Mon, 25 Dec 1995 13:30:00 GMT
|
|
2011-11-12
|
|
|
|
This does not include
|
|
dd/mm/yyyy hh:mm:ss
|
|
or
|
|
yyy-mm-dd hh:mm:ss
|
|
|
|
as that is some crazy non-standard old time brittish thing and you will end up with a mess.
|
|
*/
|
|
var r = [];
|
|
for (var i = 0 ; i < array_of_strings.length;i++){
|
|
r.push( Date.parse( array_of_strings[i] ) );
|
|
}
|
|
return r;
|
|
}
|
|
|
|
};
|
|
|
|
return mjs_plot;
|
|
|
|
}());
|
|
|
|
//embedd LZstring for compression
|
|
var LZString=function(){function o(o,r){if(!t[o]){t[o]={};for(var n=0;n<o.length;n++)t[o][o.charAt(n)]=n}return t[o][r]}var r=String.fromCharCode,n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",t={},i={compressToBase64:function(o){if(null==o)return"";var r=i._compress(o,6,function(o){return n.charAt(o)});switch(r.length%4){default:case 0:return r;case 1:return r+"===";case 2:return r+"==";case 3:return r+"="}},decompressFromBase64:function(r){return null==r?"":""==r?null:i._decompress(r.length,32,function(e){return o(n,r.charAt(e))})},compressToUTF16:function(o){return null==o?"":i._compress(o,15,function(o){return r(o+32)})+" "},decompressFromUTF16:function(o){return null==o?"":""==o?null:i._decompress(o.length,16384,function(r){return o.charCodeAt(r)-32})},compressToUint8Array:function(o){for(var r=i.compress(o),n=new Uint8Array(2*r.length),e=0,t=r.length;t>e;e++){var s=r.charCodeAt(e);n[2*e]=s>>>8,n[2*e+1]=s%256}return n},decompressFromUint8Array:function(o){if(null===o||void 0===o)return i.decompress(o);for(var n=new Array(o.length/2),e=0,t=n.length;t>e;e++)n[e]=256*o[2*e]+o[2*e+1];var s=[];return n.forEach(function(o){s.push(r(o))}),i.decompress(s.join(""))},compressToEncodedURIComponent:function(o){return null==o?"":i._compress(o,6,function(o){return e.charAt(o)})},decompressFromEncodedURIComponent:function(r){return null==r?"":""==r?null:(r=r.replace(/ /g,"+"),i._decompress(r.length,32,function(n){return o(e,r.charAt(n))}))},compress:function(o){return i._compress(o,16,function(o){return r(o)})},_compress:function(o,r,n){if(null==o)return"";var e,t,i,s={},p={},u="",c="",a="",l=2,f=3,h=2,d=[],m=0,v=0;for(i=0;i<o.length;i+=1)if(u=o.charAt(i),Object.prototype.hasOwnProperty.call(s,u)||(s[u]=f++,p[u]=!0),c=a+u,Object.prototype.hasOwnProperty.call(s,c))a=c;else{if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)m<<=1,v==r-1?(v=0,d.push(n(m)),m=0):v++;for(t=a.charCodeAt(0),e=0;8>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;h>e;e++)m=m<<1|t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=a.charCodeAt(0),e=0;16>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}l--,0==l&&(l=Math.pow(2,h),h++),delete p[a]}else for(t=s[a],e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;l--,0==l&&(l=Math.pow(2,h),h++),s[c]=f++,a=String(u)}if(""!==a){if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)m<<=1,v==r-1?(v=0,d.push(n(m)),m=0):v++;for(t=a.charCodeAt(0),e=0;8>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;h>e;e++)m=m<<1|t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=a.charCodeAt(0),e=0;16>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}l--,0==l&&(l=Math.pow(2,h),h++),delete p[a]}else for(t=s[a],e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;l--,0==l&&(l=Math.pow(2,h),h++)}for(t=2,e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;for(;;){if(m<<=1,v==r-1){d.push(n(m));break}v++}return d.join("")},decompress:function(o){return null==o?"":""==o?null:i._decompress(o.length,32768,function(r){return o.charCodeAt(r)})},_decompress:function(o,n,e){var t,i,s,p,u,c,a,l,f=[],h=4,d=4,m=3,v="",w=[],A={val:e(0),position:n,index:1};for(i=0;3>i;i+=1)f[i]=i;for(p=0,c=Math.pow(2,2),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;switch(t=p){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;l=r(p);break;case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;l=r(p);break;case 2:return""}for(f[3]=l,s=l,w.push(l);;){if(A.index>o)return"";for(p=0,c=Math.pow(2,m),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;switch(l=p){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;f[d++]=r(p),l=d-1,h--;break;case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;f[d++]=r(p),l=d-1,h--;break;case 2:return w.join("")}if(0==h&&(h=Math.pow(2,m),m++),f[l])v=f[l];else{if(l!==d)return null;v=s+s.charAt(0)}w.push(v),f[d++]=s+v.charAt(0),h--,s=v,0==h&&(h=Math.pow(2,m),m++)}}};return i}();"function"==typeof define&&define.amd?define(function(){return LZString}):"undefined"!=typeof module&&null!=module&&(module.exports=LZString);
|
|
|
|
//embedd MJSFont list for the font menu with added computer modern and cmr10
|
|
MJSFontList=function(){function a(a){var n,e,o,t=0;if(0==a.length)return t;for(n=0,o=a.length;o>n;n++)e=a.charCodeAt(n),t=(t<<5)-t+e,t|=0;return t}function n(n){d.clearRect(0,0,u,c),d.font=l+n,d.fillText(r,0,c/2);var e=i.toDataURL("image/png");return a(e)}function e(a){return-1==s.indexOf(n(a))}var o=["sans-serif","serif","monospace","cursive"],t=["Arial","Arial Black","Baskerville","Batang","Big Caslon","Book Antiqua","Brush Script MT","Calibri","Candara","Century Gothic","Charcoal","Comic Sans MS","Computer Modern","Copperplate","Courier","DejaVu Sans","DejaVu Sans Mono","DejaVu Serif","Didot","Droid Sans","Droid Sans Mono","Droid Serif","Franklin Gothic Medium","Futura","Gadget","Garamond","Geneva","Georgia","Goudy Old Style","Helvetica","Impact","Latin Modern Roman","Latin Modern Mono","Latin Modern Sans","Lato","Lora","Lucida Console","Lucida Grande","Lucida Sans Unicode","Monaco","Open Sans Condensed","Oswald","PT Sans","Palatino","Palatino Linotype","Roboto","Rockwell","Rockwell Extra Bold","Segoe UI","Source Sans Pro","Tahoma","Times New Roman","Trebuchet MS","Ubuntu","Ubuntu-Title","Ubuntu Mono","Verdana","cursive"],r=(document.getElementsByTagName("body")[0],["agAmMqQwWlLi1"]),i=document.createElement("canvas"),u=100,c=15;i.width=u,i.height=c;for(var l="10px ",d=i.getContext("2d"),s=[],S=0;S<o.length;S++)s.push(n(o[S]));for(var m=o,S=0;S<t.length;S++)e(t[S])&&m.push(t[S]);return{fontList:m,hasFont:e,getFontMetric:n}}();
|
|
|