x and y determine the anchor position of the text element. w describes the rotation angle and
the last style argument is an object containing individual text and font style information. That
style properties have priority over previously defined properties, but do not overwrite them.
-
Images are rendered asynchronously. The command queue stops when the image is to be drawn and continues after that.
If more than one command queue is issued on one context, it may happen that the order of drawings is inconsistent.
ins is capable of invoking javascript. This characteristic can be easily used to manipulate the command queue to fit certain conditions. Read more about animations here
An optional second argument d of stroke, fill or drw can be used to hand over an SVG path data string.
In that case previously defined path commands are ignored.
-
const star = "M100,10L123.5,82.4L61,37.6L138,37.6L76.5,82.4Z";
-g2().drw({d:star,lw:4,ls:"red",fs:"orange"})
+
const star = "M100,10L123.5,82.4L61,37.6L138,37.6L76.5,82.4Z";
+g2().drw({d:star,lw:4,ls:"red",fs:"orange"})
.exe(ctx);
g2 comes with another custom HTML element.
+This element aims to allow the rendering of charts without the necessity of scripts and to minimize the implementation overhead for the user.
+while maintaining the flexibility g2 provides.
+
To implement the g2 element into your page just import the g2.chart.element.js.
+
The <g2-chart> follows the same syntax as the regular g2.chart element, but some things have to be considered.
+For the g2.chart element refer to its documentation here.
+
The funcs array is given as innerHTML that is the text between the <g2-chart> tags.
+
All other properties are given as parameters into the opening tag:
Functions to draw graphs are supported, but the usage of outside variables is not.
+However, the chart can be updated from the outside; see the third example.
The g2-chart HTML element can also be used to be referenced by another instance of g2.
+The funcs object can be updated accordingly using the setFuncs function.
Note: Don't forget to use quotations (e.g. "data") for the properties,
+since the g2-chart interprets the innerHTML using the
+JSON
+format.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/microjam.md/g2.chart.html.md b/docs/microjam.md/g2.chart.html.md
new file mode 100644
index 0000000..68a33b7
--- /dev/null
+++ b/docs/microjam.md/g2.chart.html.md
@@ -0,0 +1,89 @@
+---
+"layout": "page",
+"title": "g2-chart-Element",
+"header": "Custom Chart Element",
+"date": "2020-06-22",
+"description": "",
+"permalink": "#",
+ "uses": [ { "uri": "navigation.md" } ],
+"tags": []
+---
+
+_g2_ comes with another [custom HTML element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
+This element aims to allow the rendering of charts without the necessity of scripts and to minimize the implementation overhead for the user.
+while maintaining the flexibility _g2_ provides.
+
+To implement the _g2_ element into your page just import the `g2.chart.element.js`.
+
+The `` follows the same syntax as the regular `g2.chart` element, but some things have to be considered.
+For the `g2.chart` element refer to its documentation [here](./g2.chart.html).
+
+The `funcs` array is given as [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) that is the text between the `` tags.
+
+All other properties are given as parameters into the opening tag:
+
+- `width`: Width of the element in `px`.
+- `height`: Height of the element in `px`.
+- `xmin`: The lowest number on the x-axis.
+- `ymin`: The lowest number on the y-axis.
+- `xmax`: The highest number on the x-axis.
+- `ymax`: The highest number on the y-axis.
+- `title`: The title of the graph.
+
+## Examples
+
+```html
+
+[{ "data": [-2,6,0,-2,2,1,4,1,6,5], "fill":true, "dots":true }]
+
+```
+
+
+[{ "data": [-2,6,0,-2,2,1,4,1,6,5], "fill":true, "dots":true }]
+
+
+
+Functions to draw graphs are supported, but the usage of outside variables is not.
+However, the chart can be updated from the outside; see the third example.
+
+```html
+
+[
+ {"fn":Math.sin,"dx":0.104,"fill":true},
+ {"fn":Math.tan,"dx":0.0349,"fill":true}
+]
+
+```
+
+
+[
+ {"fn":Math.sin,"dx":0.104,"fill":true},
+ {"fn":Math.tan,"dx":0.0349,"fill":true}
+]
+
+
+The `g2-chart` HTML element can also be used to be referenced by another instance of g2.
+The `funcs` object can be updated accordingly using the `setFuncs` function.
+
+```html
+
+
+```
+
+
+
+
+> **Note**: Don't forget to use quotations (e.g. `"data"`) for the properties,
+> since the `g2-chart` interprets the `innerHTML` using the
+> [**JSON**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
+> format.
diff --git a/docs/microjam.md/g2.ext.html b/docs/microjam.md/g2.ext.html
index 5ff2302..26fb186 100644
--- a/docs/microjam.md/g2.ext.html
+++ b/docs/microjam.md/g2.ext.html
@@ -4,7 +4,7 @@
-
+
g2.ext
@@ -33,7 +33,8 @@
The aim of this HTML element is to minimize the implementation overhead of the user,
while maintaining the flexibility g2 provides.
To implement the g2 element into your page just import the g2.html.js.
-
-
Warning: This custom html element is new and not implemented in the current version of g2.
-The src will be deprecated in v2.6 and has to be updated accordingly.
-The only thing you have to then is to remove the wip, or replace it with 2.6 or v2.6.
Note: Don't forget to use quotations (e.g. "x") for the properties,
diff --git a/docs/microjam.md/g2.html.md b/docs/microjam.md/g2.html.md
index 85b1693..592ff67 100644
--- a/docs/microjam.md/g2.html.md
+++ b/docs/microjam.md/g2.html.md
@@ -17,10 +17,6 @@ while maintaining the flexibility _g2_ provides.
To implement the _g2_ element into your page just import the `g2.html.js`.
-> **Warning**: This custom html element is new and not implemented in the current version of _g2_.
-> The **src** will be deprecated in v2.6 and has to be updated accordingly.
-> The only thing you have to then is to remove the **wip**, or replace it with **2.6** or **v2.6**.
-
```html
{ "main":[
@@ -31,7 +27,7 @@ To implement the _g2_ element into your page just import the `g2.html.js`.
{"c":"cir","a":{"x":15,"y":150,"r":15,"fs":"snow"}}
]}
-
+
```
@@ -43,7 +39,7 @@ To implement the _g2_ element into your page just import the `g2.html.js`.
{"c":"cir","a":{"x":15,"y":150,"r":15,"fs":"snow"}}
]}
-
+
The overall styling is handled by respective properties of the `g-2` element:
diff --git a/docs/microjam.md/g2.mec.html b/docs/microjam.md/g2.mec.html
index 168334c..13d1888 100644
--- a/docs/microjam.md/g2.mec.html
+++ b/docs/microjam.md/g2.mec.html
@@ -4,7 +4,7 @@
-
+
