Turn Your Data Into a Halloween Treat with WebDataRocks

Tutorial

Spooky atmosphere is everywhere in the air, and WebDataRocks isn’t staying behind!

Our grid is highly flexible, allowing you to easily change its look and style to suit any theme or event. Since it’s Halloween, we want to show you a few fun examples to demonstrate you features for customizing your reports and making them more exciting!

So, let’s start!

Rating of Candies with WebDataRocks

Did you know that Halloween 2025 is expected to be the most expensive one? Total spending on candy is anticipated to reach $3.9 billion! It’s evident that candies are an essential part of this holiday. But which sweets do people love the most, and which are likely to be left at the bottom of buckets?

All this info you can find in our demo:

Every candy rating is colored based on how much people love (or don’t love) it:

Top-rated treats are colored orange, and lower-rated ones are yellow.

We easily achieve this using our conditional formatting. You can set it up using our toolbar, or this snippet of code:

conditions: [
  {
    formula: "#value >= 4",
    format: {
      backgroundColor: "#ff9933", 
      color: "#000000"
    }
  },
  {
    formula: "#value <= 2",
    format: {
      backgroundColor: "#ffcd55", 
      color: "#000000"
    }
  }
]

Pumpkin WebDataRocks and Highcharts

Okay, now what first comes to your mind when you hear “Halloween”? Most likely it’s pumpkins. They’ve become a defining symbol of this holiday, but have you ever considered which state has the most expensive ones and how their prices fluctuate throughout the entire Halloween season?

This demo will help you find out! You can see how they vary by color, and thanks to Highcharts, our dashboard has become more interactive and easier to use for valuable insights.

Look at these toolbar icons! Would you also like to customize your own to add a festive atmosphere? 

This can be done using the beforetoolbarcreated property in WebDataRocks:

var pivot = new WebDataRocks({
  container: "#wdr-component",
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  height: 500,
…
});

function customizeToolbar(toolbar) {
  const tabs = toolbar.getTabs();

  toolbar.getTabs = function () {
    for (let i = 0; i < tabs.length; i++) {
      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;
  };
}

If you want to style your toolbar even further, we recommend reading our Toolbar documentation to explore all the possibilities.

Halloween Time with WebDataRocks

Still not enough spooky atmosphere? Horror movies are gonna fix it!

Advanced Television mentions that nearly 3 in 5 people worldwide (59%) are likely to pick a horror movie or show over other genres during the autumn season. Horror is especially popular in Mexico (76%), Spain (71%), and the US (61%).

In our demo, you can see both movie lengths and ratings, or explore whether longer movies receive better ratings or if shorter ones are more popular.

The thing is that the Runtime column is stored as seconds in the dataset, but WebDataRocks automatically converts it into the familiar HH:MM:SS format. This makes it much easier to work with durations and compare movie lengths, since everyone is used to reading time this way.

function getData() {
	return [
		{
			"Movie Title": {
				caption: "Movie Title",
				type: "string"
			},
			"Movie Year": {
				caption: "Movie Year",
				type: "string"
			},
			Runtime: {
				caption: "Runtime",
				type: "time"
			…
		},

Now it’s much easier to choose what to watch this Halloween movie night!

So we can confidently say that you’re ready to dive into your own Halloween dashboards and uncover all the seasonal insights. You can customize it for any needs, and we hope these examples were helpful and brought you some festive mood!

What else to read?

• Trick or Pivot! Interactive Demos on this Halloween