From Stranger Things to Christmas Gifts: WebDataRocks Best Demos

Tutorial

Okay, we’re being honest — we love all our demos! But we did put together a list of the Top 6 for you today. They’re a perfect way to explore our features, discover how they can be used in different ways, and experience the magic of customization.

Let’s take a look at them together!

Stranger Things Episode Rating

Probably the best example to demonstrate that your pivot table can be customized precisely as you want. Here, we’ve used everyone’s familiar series style, “Stranger Things”. And not only colors and fonts, but we went much further by creating an “upside-down world” effect. You can enter this mysterious and spooky world by simply clicking one button: the demo changes completely and appears with a spotlight effect.

By the way, in this demo specifically for the pivot table, we’ve used our predefined Striped-Teal theme (we have seven more). It can be achieved by easily adding this code snippet:

<link id="wdr-theme" href="https://cdn.webdatarocks.com/latest/theme/stripedteal/webdatarocks.min.css" rel="stylesheet" />

Nutrition Facts for McDonald’s Menu

Okay, but let’s come back to reality. Our next demo is about the worldwide popular fast-food restaurant McDonald’s, and more specifically, the nutritional values of its menu items. And now it is full of bright colors, which we all associate with this cafe. To make it even more obvious, we added burger emojis in the background. Must admit, looks quite tasty.

body {
	font-family: "Quicksand", serif;
	height: 100vh;
	margin: 20px;
	background: #ffd700;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='0' y='24' font-size='24'>🍔</text></svg>");
	background-repeat: repeat;
	background-size: 64px 64px;
}

Christmas Sales

The Christmas atmosphere is already in the air. Have you prepared presents already? What about packing cells of your pivot as Christmas gifts? Easy to achieve with WebDataRocks! Just a few lines of code, and your dashboard is also ready for the winter holidays.

pivot.on("cellclick", (cell) => {
  if (cell.columnIndex === 3) {
    // Update visibleNumber only for column 3
    visibleNumber.rowIndex = cell.rowIndex;
    visibleNumber.columnIndex = cell.columnIndex;
    pivot.refresh(); // Refresh to apply customization
  }
});

Pumpkin WebDataRocks and Highcharts

As you guessed, our customization can go much further; for example, you can style the Toolbar! Add/delete buttons, change icons, or do whatever you want. In our pumpkin demo, you can notice spooky buttons. To apply it to your own project, just write these code snippet:

function customizeToolbar(toolbar) {
	var 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;
...
			}
		}

		return tabs;
	};
}

But not only is the Toolbar special in this demo. We want to remind you that WebDataRocks can integrate with many charting libraries, and here you can see an example of its interaction with Highcharts

function createAreaChart() {
	pivot.highcharts.getData(
		{
			type: "area",
			slice: {
				rows: [
					{
						uniqueName: "Date.Month"
					}
				],
				columns: [
					{
						uniqueName: "Measures"
					}
				],
				measures: [
					{
						uniqueName: "Price",
						aggregation: "average"
					}
				]
			}
		},
		drawAreaChart,
		drawAreaChart
	);
}

WebDataRocks Pivot Table with Google Charts Map

So, let’s continue the topic of integrations with charts. This demo perfectly demonstrates how a wide diversity of charts can be applied to your data visualization. Your structured table data can be displayed even as a world map with Google Charts Map!

WebDataRocks integrates with Google Charts through a connector that sends aggregated pivot data directly into any chart you choose. Once both components are loaded, the pivot prepares the data, the connector formats it, and Google Charts instantly turns it into a visual. All you really do is place both components on the page, load the connector, and call a function to draw the chart.

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

And more about any chart integrations with WebDataRocks, you can read in our “Available Tutorials” page.

Analytical Sport Dashboard: Y2K Style

Not only for serious work projects, but WebDataRocks can also be used for personal purposes. Plan your daily routine, track habits, manage budgets, or organize any kind of personal data with the same clarity you use at work. This Analytical Sport Dashboard demo perfectly shows how flexible and insightful your personal analytics can become.

These demos are just a glimpse of what’s possible. WebDataRocks can become anything: from a spooky scene to a tasty fast-food board or even a Christmas gift grid. Try out these examples and have fun creating your own unique dashboards!

What else to read?

• Trick or Pivot! Interactive Demos on this Halloween
• Turn Your Data Into a Halloween Treat with WebDataRocks