47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
# Tutorials
|
|
|
|
## Quick start guide
|
|
|
|
This tutorial covers some basic usage to help getting started with
|
|
lichartee.
|
|
|
|
### A Simple example
|
|
|
|
Display of a five-point dotted red trace of the square function on a
|
|
canvas at the end of a web page.
|
|
|
|
```js
|
|
let manager = new Manager(
|
|
document.getElementsByTagName('body')[0],
|
|
);
|
|
manager.add_canvas(500, 500).figure.add_axes().plot(
|
|
[0, 1, 2, 3, 4 , 5 ],
|
|
[0, 1, 4, 9, 16, 25],
|
|
{
|
|
color: 'red' ,
|
|
style: 'dashed',
|
|
} ,
|
|
);
|
|
manager.draw();
|
|
```
|
|
|
|
The first instruction create a [Manager](references.md#manager) which
|
|
can be used to manage one or more [Canvas](references.md#canvas). This
|
|
manager is defined from the html `<body>` tag, so each
|
|
[Canvas](references.md#canvas) managed by this one will be at the end
|
|
of this elements.
|
|
|
|
The second instruction do a lot of things at once. First, the method
|
|
[`add_canvas`](references.md#manager-add_canvas) add, like this name
|
|
indicate, a [Canvas](references.md#canvas) with a specific width and
|
|
height associated to the [Manager](references.md#manager) we created
|
|
before. Next, the method [`add_axes`](references.md#figure-add_axes) of
|
|
the [figure](references.md#canvas-figure) property of the canvas we
|
|
created add an [Axes](references.md#axes) to this figure. Then, the
|
|
[`plot`](references.md#axes-plot) method take the first list of number
|
|
as the x coordinate of points, the second as y ones and finally, an
|
|
optional dictionary which define the style of the plot composed of each
|
|
point.
|
|
|
|
Finally the [`draw`](references.md#manager-draw) method render the plot
|
|
we created to display it on the created canvas in the web page.
|