There are very few exposed functions; for simplisity.
Include a copy in the <head>. <script src="mjs_plot_0_3_n.js"></script>
Make a graph, and set the data and captions. In a <script>
your_graph = mjs_plot.new_graph( graphname , canvasID );
your_graph.set_data(yourdata);
your_graph.set_captions(captions);
All the styling stuff is stored in two objects: your_graph.default_graphics_style.property = something
and your_graph.graphics_style.property = something
They are accessed in the same way, except the default_graphics_style defines the initial view.
User modifications are percistant over page reloads. Use graphics_style if your want
to force a change.
Ploting: your_graph.mjs_plot()
The details are below. For a more tutorial style guide see the docs
mjs_plot.new_graph( graphname , canvasID );
canvasID is the id you give to the canvas you want to draw on.
graphname is a string to name the graph. Used for percistance.
.set_data(yourdata);
yourdata is an array. Each item in the array is a series representated by an array of arrays in the form [x,y]. i.e. for a single series: your_graph.set_data([[x1,y1]])
For two series: your_graph.set_data([[x1,y1],[x2,y2]])
Where each x1,y1 etc. is an array of numbers.
.set_captions(captions);
captions is an array of strings. Each item in the array names the corrisponding series. I.e. your_graph.set_captions(["series1","series2"])
.mjs_plot();
Call when you want an update of the graph. Needs calling at least once (during setup). Common sinarios are: you changed the canvas size, and/or added new data to the graph.
graphics_style and default_graphics_style
This object contains everything customisable on the graph.
starting with the most common:
title
a string for the title of the graph. e.g. yourgraph.default_graphics_style.title="CPU load";.
subtitle
graphs subtitle. Can use also subtitle2 for a second line under the first.
x_axis_title
string of the x axis title.
y_axis_title
string of the y axis title.
y_scale_mode
What mode the axis is in. A string of "lin", "log", or "time".
x_scale_mode
As above. If using time data, it's is very handy to
set the axis to "time" by default.
symbol_mode
a string of "none", "dot", "cdot", "box", "circ", "x", or "cross"
line_mode
a string of "none", "line", "approx", "interp", "zig", "zag", "mid", or "hist"
symbol_size
Size of the symbols in px.
line_thickness
thickness of the lines drawn between points in px
font_name
the font used for any text, a string like "serif" "impact" "monospace" or "sans-serif" etc.
color_fg
the forground color. a string like "#111' or '#ff0011'.
color_bg
the background color.
guideWidthx
the target spacing for ticks on the x axis in px.
guideWidthy
the target spacing for ticks on the y axis in px.
tick_len
Length of the ticks in px.
minor_tick_len
length of the minor ticks in px.
graph_line_thickness
thickness of lines drawn for the boarders and ticks
scaling_factor
Changes every length scale by a factor. defaults to 1.0. Using 2 would double every size and .5 would half everything. This is useful for large screens far away so you don't have to change everything manually.