From 9b796ecc741d3ef08480ceef0e116f129dc21e77 Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Tue, 18 Jan 2022 20:12:35 +0300
Subject: [PATCH] update example for print performaing

---
 examples/demo_vertical.html | 50 +++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 13 deletions(-)
diff --git a/examples/demo_vertical.html b/examples/demo_vertical.html
index ebb45fc..361bd60 100644
--- a/examples/demo_vertical.html
+++ b/examples/demo_vertical.html
@@ -7,21 +7,29 @@
     <script src="../dist/index.js" type="text/javascript"></script>
   </head>
   <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <div id="charts">
+    </div>
 
     <script type="text/javascript">
+      
       const startTime = 1590590148;
-      const arrayLength = 20;
+      const arrayLength = 200;
+      const chartsNumber = 150;
       const data1 = createDatapoints(arrayLength, startTime, 40);
       const data2 = createDatapoints(arrayLength, startTime, 30, 50);
       const data3 = createDatapoints(arrayLength, startTime, 20, 90);
 
+      insertHtml(chartsNumber);
+
       let options = {
         renderLegend: false,
         axis: {
-          y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter },
+          y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter, ticksCount: 6 },
           x: { format: 'numeric' }
         },
+        // grid: {
+        //   y: { ticksCount: 2000 }
+        // },
         zoomEvents: {
           mouse: {
             pan: { isActive: true, orientation: 'vertical', keyEvent: 'shift' },
@@ -36,17 +44,8 @@
         crosshair: { orientation: 'horizontal' },
         margin: { top: 30, right: 20, bottom: 20, left: 50 }
       }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { target: 'test1', datapoints: data1, color: 'green' },
-          { target: 'test2', datapoints: data2, color: 'blue' },
-          { target: 'test3', datapoints: data3, color: 'orange' },
-        ],
-        options
-      );
-      pod.render();
 
+      multileRender(chartsNumber);
 
       function zoomIn(ranges) {
         const range = ranges[1];
@@ -85,6 +84,31 @@
         }
         return 'black';
       }
+    
+      function insertHtml(chartsNumber) {
+        let chartsHtml = '';
+
+        for(let i = 1; i <= chartsNumber; i++) {
+          chartsHtml += `<div id="chart-${i}" style="height: 640px; width: 880px"></div>`;
+        }
+
+        document.getElementById('charts').innerHTML = chartsHtml;
+      }
+
+      function multileRender(chartsNumber) {
+        for (let i = 1; i <= chartsNumber; i++) {
+          const pod = new LinePod(
+            document.getElementById(`chart-${i}`),
+            [
+              { target: 'test1', datapoints: data1, color: 'green' },
+              { target: 'test2', datapoints: data2, color: 'blue' },
+              { target: 'test3', datapoints: data3, color: 'orange' },
+            ],
+            options
+          );
+          pod.render();
+        }
+      }
     </script>
   </body>
 </html>
