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 );
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.
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.
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.
captions is an array of strings. Each item in the array names the corrisponding series. I.e. your_graph.set_captions(["series1","series2"])
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:
a string for the title of the graph. e.g. yourgraph.default_graphics_style.title="CPU load";.
graphs subtitle. Can use also subtitle2 for a second line under the first.
string of the x axis title.
string of the y axis title.
What mode the axis is in. A string of "lin", "log", or "time".
As above. If using time data, it's is very handy to
set the axis to "time" by default.
a string of "none", "dot", "cdot", "box", "circ", "x", or "cross"
a string of "none", "line", "approx", "interp", "zig", "zag", "mid", or "hist"
Size of the symbols in px.
thickness of the lines drawn between points in px
the font used for any text, a string like "serif" "impact" "monospace" or "sans-serif" etc.
the forground color. a string like "#111' or '#ff0011'.
the background color.
the target spacing for ticks on the x axis in px.
the target spacing for ticks on the y axis in px.
Length of the ticks in px.
length of the minor ticks in px.
thickness of lines drawn for the boarders and ticks
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.