HTML custom meter bar in Jedox

Jedox is a powerful tool for spreadsheet-based planning, analysis, and reporting. One of its features is the ability to customize spreadsheets using HTML and CSS, allowing users to create visually appealing and interactive dashboards directly within their Jedox environment. In this beginner’s guide, we’ll walk you through the process of integrating HTML and CSS code into your Jedox spreadsheets, enabling you to design stunning visualizations and enhance the user experience.

Step 1: Setting Up Your Jedox Spreadsheet

First, open your Jedox environment and navigate to the spreadsheet where you want to implement custom styling. Create a new worksheet or open an existing one where you’d like to add visual elements.

Step 2: Adding HTML and CSS Code

Once you’ve selected your worksheet, you can start adding HTML and CSS code to customize its appearance. For example, let’s say you want to create a meter bar to track project completion or budget consumption %. You can use the following code:

<style>
  meter {
    width: 150px;
    height: 20px;
    background-color: lightgray; /* Background color */
    border-radius: 5px; /* Rounded corners */
    border: 1px solid darkgray; /* Border */
    overflow: hidden; /* Ensures proper rendering */
  }

  meter::-webkit-meter-bar {
    background: linear-gradient(to right, #4CAF50, #FFEB3B, #F44336); /* Color gradient */
    border-radius: 5px; /* Rounded corners */
  }
</style>
<meter low="70" high="90" max="100" value="80">Progress: 80%</meter>

Step 3: Setting Variables for Customization

To make your meter bar more flexible, you can define variables that allow users to adjust parameters such as color, value, and range. Here’s how you can implement input cells for these variables:

Step 4: Testing and Customizing

Now that you’ve added the HTML, CSS, and variable inputs to your spreadsheet, you can test the meter bar’s functionality by adjusting the values in the input cells. Experiment with different values for progress, low, and high thresholds, as well as colors, to see how they affect the appearance of the meter bar. This hands-on approach allows you to tailor the visual elements to your specific requirements and preferences.

EXTRA:

You can add a colour picker for your colour decision. We already tackled this in https://jedox4beginners.com/color/. Combining these two can make your customization more user-friendly. More possibilities can be found here: https://www.w3schools.com/tags/tag_meter.asp

A little project example can be downloaded from here. Keep in mind that Value is connected with the Biker database. You can replace it with your cube value or some random number.