From f701b29bab744c7a22419a64560896da9c700324 Mon Sep 17 00:00:00 2001
From: Eugene Petukhov <termonna@corpgloty.com>
Date: Wed, 17 Aug 2022 17:22:11 +0300
Subject: [PATCH 1/2] #DOC [Readme] add browser including

---
 README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/README.md b/README.md
index 58bebe3..4a838b7 100755
--- a/README.md
+++ b/README.md
@@ -1,2 +1,56 @@
 # Chartwerk Line Pod
+## Including
 
+### Browser
+
+#### Script tag
+```html
+<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script>
+```
+
+#### Example
+```html
+<div id="line-chart" class="chart-block" style="width: 100%; height: 400px;"></div>
+
+<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script>
+<script>
+  const pod = new LinePod(document.getElementById('line-chart'));
+  
+  const startTime = 1590590148;
+  const arrayLength = 20;
+  const k = [() => Math.floor(Math.random() * 40), () => Math.floor(Math.random() * 100), () => Math.floor(Math.random() * 20) + 90];
+  const [data1, data2, data3] = [null, null, null].map((item, i) => Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, k[i]()]))
+  
+  const options = {
+    renderLegend: false,
+    usePanning: false,
+    axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },
+    zoomEvents: {
+      mouse: { zoom: { isActive: true, orientation: 'horizontal' } },
+      scroll: { zoom: { isActive: true, orientation: 'horizontal' } }
+    },
+    eventsCallbacks: { zoomIn, panningEnd }
+  }
+
+  pod.updateData(
+    [
+      { target: 'First Dataset', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
+      { target: 'Second Dataset', datapoints: data2, color: 'blue' },
+      { target: 'Third  Dataset', datapoints: data3, color: 'orange' },
+    ],
+    options
+  );
+
+  function zoomIn(ranges) {
+    options.axis.x.range = ranges[0];
+    pod.updateData(undefined, options);
+  }
+
+  function panningEnd(ranges) {
+    options.axis.x.range = ranges[0];
+    pod.updateData(undefined, options);
+  }
+
+  pod.render();
+</script>
+```
\ No newline at end of file
-- 
2.34.1


From db30589898751dd459d96f65555fda61a61bcc14 Mon Sep 17 00:00:00 2001
From: Eugene Petukhov <termonna@corpgloty.com>
Date: Wed, 17 Aug 2022 17:57:08 +0300
Subject: [PATCH 2/2] #DOC [Readme] add browser including v2

---
 README.md | 48 +++++++++---------------------------------------
 1 file changed, 9 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index 4a838b7..08801bc 100755
--- a/README.md
+++ b/README.md
@@ -5,52 +5,22 @@
 
 #### Script tag
 ```html
-<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script>
+<script src="https://unpkg.com/@chartwerk/line-pod@latest/dist/index.dev.js" type="text/javascript"></script>
 ```
 
 #### Example
 ```html
 <div id="line-chart" class="chart-block" style="width: 100%; height: 400px;"></div>
 
-<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script>
+<script src="https://unpkg.com/@chartwerk/line-pod@latest/dist/index.dev.js" type="text/javascript"></script>
 <script>
-  const pod = new LinePod(document.getElementById('line-chart'));
-  
-  const startTime = 1590590148;
-  const arrayLength = 20;
-  const k = [() => Math.floor(Math.random() * 40), () => Math.floor(Math.random() * 100), () => Math.floor(Math.random() * 20) + 90];
-  const [data1, data2, data3] = [null, null, null].map((item, i) => Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, k[i]()]))
-  
-  const options = {
-    renderLegend: false,
-    usePanning: false,
-    axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } },
-    zoomEvents: {
-      mouse: { zoom: { isActive: true, orientation: 'horizontal' } },
-      scroll: { zoom: { isActive: true, orientation: 'horizontal' } }
-    },
-    eventsCallbacks: { zoomIn, panningEnd }
-  }
-
-  pod.updateData(
-    [
-      { target: 'First Dataset', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
-      { target: 'Second Dataset', datapoints: data2, color: 'blue' },
-      { target: 'Third  Dataset', datapoints: data3, color: 'orange' },
-    ],
-    options
-  );
+  new LinePod(document.getElementById('yourDivId', yourData, yourOptions)).render();
+</script>
+```
 
-  function zoomIn(ranges) {
-    options.axis.x.range = ranges[0];
-    pod.updateData(undefined, options);
-  }
+#### Other examples
+[Static Chart](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/demo.html)
 
-  function panningEnd(ranges) {
-    options.axis.x.range = ranges[0];
-    pod.updateData(undefined, options);
-  }
+[Live Chart](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/demo_live.html)
 
-  pod.render();
-</script>
-```
\ No newline at end of file
+[Vertical Chart](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/demo_vertical.html)
\ No newline at end of file
-- 
2.34.1