Stat Table Setup

The stat table is the most complicated dashboard widget on MainEvent, but it is also the most flexible. If you’ve looked at the other widgets, you probably already know that with flexibility comes greater setup time, but the results are worth it! So, let’s have a look, shall we?

Adding the Widget

You can’t configure a widget without first adding it to your dashboard. So in the spirit of full transparency, we’ll start from the very beginning and go from there. From the dashboard, click Add Widget and then select Stats Table.

Now you’ll want to scroll down to the bottom of your page to find your new widget. If this is the first widget, it will manifest just below the filters section. Hover your cursor over the widget to show the outline.

Click Edit to open the widget editor.

Widget Configuration

The next thing to do is to get your widget level configurations in place. We’ll start at the start and move along from there, and so, we start with the name. Like any other widget, name is the first field you’ll come upon and is required to save your widget. Enter the name you want to assign to the widget, then choose if you want to display that title by selecting (or not) the checkbox called Display Title.

Then you need to decide if you want to have a border around the entire widget. Note, this is not a border for the cells (we’ll get there), it’s just a border around the widget in its entirety, name included (if you’re displaying it, that is).

Next, if you want to, you can choose to adjust the height settings on the widget. The default will be Enforce exact height. Your other options are: Dynamically expand and reduce height, dynamically expand only, and dynamically reduce only.

What does any of this mean? Let’s define some terms.

• Enforce Exact Size
  • The default and recommended option. This option uses the template defined height and will not vary from that. If the data field is larger than possible to display at one time (unlikely in a bar chart but a possibility in others), scrolling will be required to view the data.
• Dynamically Expand and Reduce Height
  • The most flexible option wherein the widget will grow or shrink as necessary to display all data at one time with no scrolling required. This option may change the layout of the dashboard as the widget will not be a fixed size.
• Dynamically Expand Only
  • This will allow the widget to expand as needed to display all data but the widget will not shrink beyond the defined size set for the template.
• Dynamically Reduce Only
  • The widget may get smaller based on display needs but will not expand beyond the set size on the template.

For our example, we’re going to keep it at the default Enforce Exact Size.

Now is the time that things are going to really start to differ from other widgets. We’re going to start to put the ‘table’ in Stat Table. The default table is going to be 1x1, so if you need to have more cells than that, you’re going to need to take these steps.

What you’ll see when you start:

First, how wide do you want the table to be? You can either manually enter the number in the Table Width field or you can use the arrow keys to increase or decrease the number.

As you increase the number of cells, you’ll see the preview below increase as well.

Next, how tall do you want the table to be? Adjust the Table Height field manually or using the arrow keys. Again, the preview will adjust as you go.

The Row Height (pixels) lets you set the height you want your rows to be, if needed. This field is optional and may take some trial and error before you hit the sweet spot.

Next, you can start to configure the styling for the entire widget. All of these fields are optional. Also, if you want to format at the cellular level, we’ll get to that soon.

Your first field is going to be the Cell Background Color. The default here will appear black, however, if you don’t touch it, it will remain white. Once you click into the color selector, you will need to update the color unless you actually do want it to be black.

If you’ve clicked into the color selector and you want to change the color, the process is going to come down to your browser. Each browser has its own color picker. Some examples:

Chrome:

Firefox:

Safari:

While the look may vary, for most browsers the features will remain largely the same allowing for gradient selection, HEX code input or color wheel options. Select the color that you want for your background color from the picker and the preview will update.

Choosing a color for ALL your cells might be a little bit more than you’re looking to do, so remember, a cell by cell formatting option is going to be available to you. You may also choose to change the font color instead of coloring the entire cell, and that’s the next field on the modal.

As with the cell background color, the default text color is going to be black. To change the font color, you’re once again going to click into the colored box and open your browser’s color selector. Use the picker to find the correct color, then close. Your chosen color will now be reflected in the Cell Text Color field as well as the table preview.

Now we’ll move to the Cell Text Options. Aside from the color, how do you want the text to display within the widget? Do you want the text Bold, Italicized, Underlined, All Three? Click the checkboxes that correspond with the font formatting you want to apply.

Then you can add a Font Size in if the default isn’t cutting it for you. You can enter the number manually or using the arrow keys.

The next fields are for Cell Border Options. Do you want a more ‘standard’ looking stat table? Add borders to any side here. When any side is selected, the option to make the border bold will also display.

Finally, there’s font alignment. You’ve got two options here: horizontal and vertical.

Horizontal Alignment: Left, Center, Right

Vertical Alignment: Top, Center, Bottom

Cell Configuration

Cell-level configuration on the stat table will be quite similar to the overall table configuration. However, any settings created at the cell-level will override any widget-level settings, so just be aware of that.

To begin editing, pick a cell, any cell. We’re going with a1 for our example because that’s the default cell, but you can manually select any cell just by clicking on it. Make sure you see the correct cell named on the Editing Cell header.

Your first option is Hide cell on page. You’ll want to use this if you are using additional cells for calculations or if you want to change the look from a straight table, for example. Since we’re here talking about configurations, just be aware that it’s available but we won’t be using it here.

Next up, we have the Cell Background Color. Now, if you made any changes at the widget level to this field, you’ll see those reflected here. If not, the default color will be black, as it is at the widget level.

If you’ve clicked into the color selector and you want to change the color, the process is going to come down to your browser. Each browser has its own color picker. Some examples:

Chrome:

Firefox:

Safari:

While the look may vary, for most browsers the features will remain largely the same allowing for gradient selection, HEX code input or color wheel options. Select the color that you want for your background color from the picker and the preview will update.

If instead (or in addition to) you want to change the font color for the cell, you can do that with the Cell Text Color field. As with the cell background color, the default text color is going to be black. Any changes you made at the widget level will already display on the cell level so while the default text is black, since we set the widget level font color to pink, that’s what we’re going to see here.

To change the font color, you’re once again going to click into the colored box and open your browser’s color selector. Use the picker to find the correct color, then close. Your chosen color will now be reflected in the Cell Text Color field as well as the table preview.

Now we’ll move to the Cell Text Options. Aside from the color, how do you want the text to display within the widget? Do you want the text Bold, Italicized, Underlined, All Three? Click the checkboxes that correspond with the font formatting you want to apply. Again, any options chose here will override the widget-level settings already configured.

You can add a Font Size in if the default isn’t cutting it for you. You can enter the number manually or using the arrow keys.

Now we’ve arrived at Cell Border Options. Let’s say you’re making one cell the totals field and you really want to make it stand out, or you want to draw less attention to one field from the others. You can make cell-level changes to your cell border here. If you’re feeling like you’ve just got too much free time, you could outline the cells individually one by one here if you wanted to.

Next up, you can select the Horizontal and Vertical Alignment for the cell. For Horizontal Alignment, your options are: Left, Center, or Right. For Vertical, you can select: Top, Center, or Bottom. Again, if you selected any of these options when configuring at the widget level, you’ll see those choices reflected here. Any changes you make here will override your previous selections.

The final field is If a Date Range is Specified. This field will default to blank and if you aren’t using a date filter, you needn’t worry about doing anything here. When I say ‘using a date filter’, what we’re talking about here is a date filter applied to the entire dashboard or widget level. For this field, your options are: Use It, Ignore It, or Modify It.

Use It: Apply the date filter as it is set at the dashboard or widget level.

Ignore It: Pretend like the date filter doesn’t even exist for this cell.

Modify It: Want to know what the results were like 6 months before the filter range? You can use this option to set modifications to the date range in days, weeks, months, or years before or after the start, end or start and end dates.

And that’s it! Well, that’s it for the configuration settings. If you need to, go through cell by cell to get the table configured as you need it. Click Save Changes to make these changes permanent.