A 3-minute tutorial on how to make a Halloween prank on your colleagues 👻

Want to surprise your friends at work? Make their working process a little bit more exciting with this small prank! Though, be careful not to scare them too much...

We will create a Halloween-themed pivot table with horror movie information, styled toolbar icons, alternating background colors, and a tiny, cute spider moving across the pivot table. Just like this:

Here's a breakdown of the code of the demo.

Step 1: Setup HTML Structure

Firstly, you'll need to set up the HTML structure:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link href="https://cdn.webdatarocks.com/latest/theme/dark/webdatarocks.min.css" rel="stylesheet"/>

<div id="wdr-container"></div>
<img class="spider" src="https://media1.giphy.com/media/JIoVDbuFoZGKjIkYga/giphy.gif"/>

The code snippet consists of references to the WebDataRocks library and its dark theme styles. It also sets up a container <div> for the pivot table and includes an <img> tag to display a spider GIF within the document. This code serves as the foundational structure for integrating a WebDataRocks pivot table and displaying the spider GIF in the HTML document.

Step 2: JavaScript Initialization and Customization

WebDataRocks Initialization

var pivot = new WebDataRocks({
  container: "#wdr-container",
  customizeCell: customizeCellFunction,
  beforetoolbarcreated: customizeToolbar,
  report: {
    // Data source configuration
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/movie_profit.csv",
    },
    "slice": {
      // Configuring the structure of rows and columns
      "rows": [{
        "uniqueName": "movie",
        "sort": "unsorted"
      }],
      "columns": [{
          "uniqueName": "genre",
          "filter": {
            // Filtering the 'genre' column for 'Horror' genre
            "type": "top",
            "quantity": 10,
            "measure": "worldwide_gross",
            "members": [
              "genre.Horror"
            ]
          },
          "sort": "unsorted"
        },
        {
          "uniqueName": "Measures"
        }
      ],
      // Measures/aggregations to display in the pivot table
      "measures": [{
          "uniqueName": "worldwide_gross",
          "aggregation": "sum"
        },
        {
          "uniqueName": "production_budget",
          "aggregation": "sum"
        }
      ],
      // Sorting configuration for rows and columns
      "sorting": {
        "row": {
          "type": "desc",
          "tuple": [],
          "measure": "worldwide_gross"
        },
        "column": {
          "type": "desc",
          "tuple": [],
          "measure": "worldwide_gross"
        }
      }
    },
    // Additional options for the pivot table
    "options": {
      "grid": {
        "showTotals": "off",
        "showGrandTotals": "columns"
      }
    },
    // Formatting settings for numbers and currencies
    "formats": [{
      "name": "",
      "thousandsSeparator": " ",
      "decimalSeparator": ".",
      "currencySymbol": "$",
      "currencySymbolAlign": "left",
      "nullValue": "",
      "textAlign": "right",
      "isPercent": false
    }]
  },
  // Set the width and height of the pivot table
  width: "100%",
  height: 430,
  // Enable the toolbar
  toolbar: true
});

Explanation:

Data Configuration: Sets the data source as a CSV file containing movie profit data. It defines the structure of rows, columns, measures, and their aggregations for the pivot table.
Slice Configuration: Specifies the rows, columns, measures, filtering for the 'Horror' genre, and sorting options.
Options: Customizes the pivot table by setting options such as hiding totals and displaying grand totals.
Formats: Defines number formatting such as thousands separator, decimal separator, currency symbol, alignment, and other display configurations.
Pivot Table Settings: Defines the dimensions (width and height) of the pivot table and enables the toolbar.

Cell Customization Function

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData.type == "value") {
    // Alternates cell colors based on rowIndex
    if (cellData.rowIndex % 2 == 0) {
      cellBuilder.addClass("alter1");
    } else {
      cellBuilder.addClass("alter2");
    }
  }
}

customizeCellFunction: Customizes cell appearance based on cell data.
Cell Color Alternation: Alternates the cell colors for better visualization by adding classes "alter1" and "alter2" based on the row index.

Toolbar Customization Function

function customizeToolbar(toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    for (let i = 0; i < tabs.length; i++) {
      // Modifies toolbar icons based on their positions
      switch (i % 4) {
        case 0:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/6433/6433146.png"/>`;
          break;
        case 1:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/3330/3330533.png "/>`;
          break;
        case 2:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/8490/8490308.png "/>`;
          break;
        case 3:
          tabs[i].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/3277/3277415.png"/>`;
          break;
      }
    }
    return tabs;
  }
}

customizeToolbar: Customizes the toolbar icons.
Toolbar Icon Modification: Changes the icons of different tabs based on their positions (0 to 3) by replacing them with images from provided URLs.

Step 3: Create CSS Styles

Styling for alternating cell colors

#wdr-pivot-view #wdr-grid-view div.alter1 {
  background-color: #4f983c;
}

#wdr-pivot-view #wdr-grid-view div.alter2 {
  background-color: #7e42d6;
}

These CSS rules target specific elements within the WebDataRocks pivot table grid to style the alternating cells.

The classes alter1 and alter2 are applied to cells in the pivot table view to give them different background colors. When rendered, every other cell will have the specified background colors, creating a visually distinctive pattern.

Styling the Spider Gif

html {
  position: relative;
}

img.spider {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: spiderMovement 12s linear infinite;
  transform: scaleX(-1);
  width: 200px;
}

html { position: relative; }: This sets the positioning context for other elements inside the HTML document. It's crucial for correctly positioning the spider gif, as it will be absolutely positioned within this context.
img.spider { ... }: This targets the image with the class name "spider".
position: absolute;: Positions the spider gif absolutely within the HTML document.
bottom: 0; right: 0;: Places the spider at the bottom right corner of the parent element, in this case, the HTML document.
animation: spiderMovement 12s linear infinite;: Applies the spiderMovement animation to the spider gif. It moves the gif from the right edge of the screen (0% progress) to the left edge (100%) over a duration of 12 seconds, using a linear animation timing function, and it loops infinitely.
transform: scaleX(-1);: Mirrors the spider gif horizontally (flips it), making it face left.
width: 200px;: Sets the width of the spider gif to 200 pixels.

Animation Keyframes

@keyframes spiderMovement {
  0% {
    right: 0;
  }
  100% {
    right: 100%;
  }
}

This CSS rule defines the animation sequence named spiderMovement using keyframes.

0%: At the beginning (0% progress), the spider gif is positioned at the extreme right edge (right: 0).
100%: At the end (100% progress), the spider gif is moved to the extreme left edge (right: 100%).

This animation creates the illusion of the spider crawling across the pivot table from right to left by continuously looping the movement over the defined 12-second duration.

Tips:

You'll need to include this code within an HTML file, making sure to reference the necessary WebDataRocks library and dependencies, and replace any placeholder data sources or file paths with your actual data or URLs. Ensure your data source is accessible and correctly configured in the WebDataRocks initialization.
Ensure the spider gif URL is accessible and properly positioned to give the effect of it crawling across the pivot table. Adjust the position by modifying the CSS properties like top, bottom, left, or right within the .spider class. You can choose another spider gif that is more realistic.
Remember, to use this code, you'll need access to the WebDataRocks library and the provided resources (icons and spider gif).
Also, test this in an environment that allows loading external resources and supports the WebDataRocks library.
You can replace the Halloween-themed icons with your preferred images. Just update the URLs in the customizeToolbar function.

Congratulations!

You've created a fun and spooky Halloween-themed pivot table with horror movie data. Explore further by customizing the styles, adding more spooky elements, or incorporating additional functionalities to suit your Halloween theme.

Check out the interactive demo on CodePen!

Blog