Merge pull request #258 from vizzuhq/bgimage

Documentation: background image example added
vizzuhq · Aug 15, 2023 · a1f2859 · a1f2859
2 parents 8af0ac5 + 09670eb
commit a1f2859
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 1 deletion.
diff --git a/docs/tutorial/events.js b/docs/tutorial/events.js
@@ -19,6 +19,37 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
     event.preventDefault();
   };
 
+  const backgroundImageHandler = (event) => {
+    const bgImage = new Image();
+    bgImage.src = "https://vizzuhq.com/images/logo/logo.svg";
+
+    const vizzuCanvasWidth = event.renderingContext.canvas.width;
+    const vizzuCanvasHeight = event.renderingContext.canvas.height;
+
+    const imageAspectRatio = bgImage.width / bgImage.height;
+    const canvasAspectRatio = vizzuCanvasWidth / vizzuCanvasHeight;
+    let imageWidth;
+    let imageHeight;
+    if (imageAspectRatio > canvasAspectRatio) {
+      imageWidth = vizzuCanvasWidth;
+      imageHeight = vizzuCanvasWidth / imageAspectRatio;
+    } else {
+      imageHeight = vizzuCanvasHeight;
+      imageWidth = vizzuCanvasHeight * imageAspectRatio;
+    }
+    const xOffset = (vizzuCanvasWidth - imageWidth) / 2;
+    const yOffset = (vizzuCanvasHeight - imageHeight) / 2;
+
+    event.renderingContext.drawImage(
+      bgImage,
+      xOffset,
+      yOffset,
+      imageWidth,
+      imageHeight,
+    );
+    event.preventDefault();
+  };
+
   mdchart.create([
     {
       anims: [
@@ -95,5 +126,40 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
         },
       ],
     },
+    {
+      anims: [
+        (chart) => {
+          try {
+            chart.off("background-draw", backgroundImageHandler);
+          } catch (error) {
+            if (!error.toString().includes("unknown event handler")) {
+              throw error;
+            }
+          }
+          return chart.animate({
+            config: {
+              title: "Add background image",
+            },
+          });
+        },
+        (chart) => {
+          chart.on("background-draw", backgroundImageHandler);
+          chart.render.updateFrame(true);
+          chart = chart.animate(
+            {
+              style: {
+                plot: {
+                  xAxis: { interlacing: { color: "#ffffff00" } },
+                  yAxis: { interlacing: { color: "#ffffff00" } },
+                },
+              },
+            },
+            { duration: 0 },
+          );
+          chart.then((chart) => chart.render.updateFrame(true));
+          return chart;
+        },
+      ],
+    },
   ]);
 });
diff --git a/docs/tutorial/events.md b/docs/tutorial/events.md
@@ -88,7 +88,7 @@ bottom right corner of the chart.
 ```python
 logo_draw_handler = "event.preventDefault();"
 
-logo_draw = logo_chart.on("logo-draw", logo_draw_handler)
+logo_draw = chart.on("logo-draw", logo_draw_handler)
 ```
 
 Unregistering the previously registered handler.
@@ -97,4 +97,69 @@ Unregistering the previously registered handler.
 chart.off(logo_draw)
 ```
 
+You can also add a background image to the chart using the `preventDefault`
+method.
+
+<div id="tutorial_04"></div>
+
+```python
+bgimage_draw_handler = """
+const bgImage = new Image();
+bgImage.src = "https://vizzuhq.com/images/logo/logo.svg";
+
+// Get the dimensions of the chart canvas
+const vizzuCanvasWidth = event.renderingContext.canvas.width;
+const vizzuCanvasHeight = event.renderingContext.canvas.height;
+
+// Calculate the aspect ratios of the image and the canvas
+const imageAspectRatio = bgImage.width / bgImage.height;
+const canvasAspectRatio = vizzuCanvasWidth / vizzuCanvasHeight;
+
+// Calculate the dimensions and position of the image on the canvas
+let imageWidth;
+let imageHeight;
+if (imageAspectRatio > canvasAspectRatio) {
+    imageWidth = vizzuCanvasWidth;
+    imageHeight = vizzuCanvasWidth / imageAspectRatio;
+} else {
+    imageHeight = vizzuCanvasHeight;
+    imageWidth = vizzuCanvasHeight * imageAspectRatio;
+}
+const xOffset = (vizzuCanvasWidth - imageWidth) / 2;
+const yOffset = (vizzuCanvasHeight - imageHeight) / 2;
+
+// Draw the background image on the canvas
+event.renderingContext.drawImage(
+    bgImage,
+    xOffset,
+    yOffset,
+    imageWidth,
+    imageHeight
+);
+event.preventDefault();
+"""
+
+bgimage_draw = chart.on("background-draw", bgimage_draw_handler)
+```
+
+??? info "Info - How to make interlacing transparent"
+    ```python
+    chart.animate(
+        Style(
+            {
+                "plot": {
+                    "xAxis": {"interlacing": {"color": "#ffffff00"}},
+                    "yAxis": {"interlacing": {"color": "#ffffff00"}},
+                },
+            }
+        ),
+    )
+    ```
+
+Unregistering the previously registered handler.
+
+```python
+chart.off(bgimage_draw)
+```
+
 <script src="../events.js"></script>