Building a Custom Pie Chart
  • 14 Minutes to read
  • Dark
    Light
  • PDF

Building a Custom Pie Chart

  • Dark
    Light
  • PDF

Article Summary

Building a Custom Pie Chart on the Configurable Dashboard

The Configurable Dashboard offers two pie chart options, Pie Chart and Custom Pie Chart. We’re here to discuss the specifics of building out the Custom Pie Chart widget, so if you’re looking for instructions on how to build out a dashboard, look here. For information about the Pie Chart, look here.

Widget Configuration - Custom Pie Chart

To get right into it, let’s have a look at the Configuration options for the Custom Pie Chart widget. The first field you’re going to see is the Name. No catches here BUT some slight differences between the Standard Dashboard and the Configurable Dashboard to be aware of. In the Name field, you just need to enter the name of the widget, nothing wild there. However, you do have to make the choice of whether you want the widget name to display or not. If you want the name of the widget to be visible to viewers, click the Display Title checkbox as well.

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 Height
    • 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 pie 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.

Then, you get to select your Chart Type. Options are: Pie, Donut, Semi-Circle Donut. Aside from making you hungry, these options also let you decide how you want your data to display. Let’s see what the difference is.

Pie

The classic pie that we all know and love. A full circle with triangular ‘slices’ that display your data.

Donut

Same basic shape as the Pie Chart, but with the middle cut out, so instead of triangle slices of data, you have arcs.

Semi-Circle Donut

Imagine you have a donut, but you want to split it with someone, so you cut it in half. But instead of a delicious donut that you get to eat, it’s actually a chart with data.

Once you’ve selected how you want the data to display, you need to decide how much data you want to display. You make the determination by entering a number into the Pie Pieces field.

The custom Pie Chart also gives you flexibility in determining what information about the data you want to display. A series of checkboxes are up next to let you decide if you want to: Display Legend, Show Piece Names in Pie, Show Piece Percentages in Pie, Show Piece Value in Pie.

Show Legend

Will display a menu of all data points within the chart

Show Piece Names in Pie

Will display the names of the data point in the pie chart

Show Piece Percentages in Pie

Will display the percentage value of the pie piece in the chart

Show Piece Value in Pie

Will display the value of the data point in the pie piece

Finally for the labels, you get to decide if you want the labels within the pie (as above) or if you would like the labels outside of the pie.

Data Configuration

Now that we’ve set up the we can get into actually building out the data structure. The first decision you need to make is what pie slice you want to build first. This dropdown will have a select field with the correlating number of options to how many pie pieces you entered above.

This will open an entirely new Editing Cell section on the modal. You will complete the steps outlined here per piece.

First up, the formatting. For starters, what do you want to call this piece?

Next, you can pick the color you want to assign to the piece. The default here is black, so it’s very highly suggested that you find something to better suit your color scheme. You can enter the color choice by using the sliders, HEX code, color wheel, color menu, spectrum, or pencil crayon options.

The final option for formatting is a checkbox if you wish to hide the piece in the pie.

With the formatting figured out, now we get to set up the Data. Click Data in the header for the cell editing.

First up is Cell Type. Your options here are: Text, Field, Event Count, Calculation, and Special Function.

Text

Text entry field

Field

Event/Venue/Product custom fields. This includes recap fields and integration fields.

Event Count

A total of events

Calculation

A math field that follows order of operations.

Special Function

Months in a Viewing Filter, Report Title, Event Hours, or Staff Hours

The other fields are fairly self explanatory so we’re going to pick Field as our example. The field after that is Data Table, which sounds quite technical but really only refers to what part of the site/event process the data is coming from. Your options are: Events, Venues, Products.

After selecting the Data Table, you’ll also have to select which Data Category you want to use, which is a more granular view of the Data Table. So let's look at what the options are for each Data Table’s Data Categories.

Events

  • Standard
    • Scheduling Fields
    • Recap Fields
  • Integration
    • Fields related to any integrations (you may not have integrations on your site so if you don’t know what we’re talking about, you can ignore this)
  • Integration - Product Grouping
    • Product fields related to integrations

Venues

  • Profile Field
  • Integration - Profile ID Join
  • Integration - Custom Field Join
  • Integration - Profile Join and Product Grouping
  • Integration - Custom Field Join and Product Grouping
  • Venue Count

Products

  • Integration - Product Grouping

For our example, we’re going with the most popular option, the Recap Field. After the steps, we’ll outline a list of options for the other choices.

So, for the Data Table, you’re going to choose Events and then select Standard for the Data Category.

These selections will make a new menu appear: Field Type. From here, you will select Recap.

Once again, as if from nowhere, a new field will display. This time it’s going to be Recap Field. Here’s where you pick the recap field you want to pull into this piece of the pie.

Now, here’s where things get a bit more complicated, or at least, more considered. You need to think about how you plan to display the data. Some of the fields will lend themselves nicely to having their responses displayed, ie. ‘Approximately how many people attended’, while a text field such as ‘Enter the name of your on-site contact’, clearly does not. But you may not be planning to display the actual data collected, you could instead be planning to display how many responses you had to a question and in that case, you could still pull a text field or whatever field type you wanted, really. This was a roundabout way of telling you to think about what you’re going to show when you pick your field.

Another thing to keep in mind is that you will be able to add filters to each of these slices, so if you’re looking at comparing responses to a single question, you will be able to accomplish that in the coming steps. We’re going to pick exactly this type of question, ‘Which giveaway items did you have on-site?’.

Now, remember just a moment ago when we talked about choosing between using the data vs. using the number of responses? Let’s get into that a bit more here. First, the number in parentheses next to your field name is a count for how many responses you have on that field, so you’ll know straight away if you’re pulling a field with data associated or not. Also, the next field is called Value Type, and this is where you decide if you’re pulling based on the content of the response OR the number of responses.

Use Values

Uses the response data to generate the chart

Use Counts

Tallies the number of responses to the question to populate the chart

Let’s look at building each of these out, shall we?

Use Values

When you select this option, two new fields will display. “If this field has multiple values for a single event’ and ‘If displaying values for this field across multiple events’. Perhaps you immediately know what that means, but if you’re more inclined to think ‘huh?’, let’s see what those actually mean.

If this field has multiple values for a single event

This is to be applied in situations where you have more than once response to the same question at the same event. If you’re using survey fields, for example. Or even if you’re repeating a question in a recap for some reason or another. Here you have two options: Use Average or Use Sum.

If displaying values for this field across multiple events

Once again, you have two options: Use Average or Use Sum. This one will be applied to the more common situation in which you have more than one event with submitted responses to the question. So if you have 100 events with responses, do you want the sum of those responses? Or do you want the average? That’s what you decide here.

Use Counts

This is initially more simple, only one new field will appear when you make this selection, “Count Method”.

Count Method

It’s counting, how complicated could we possibly make it? Well the answer is plenty! You have five methods of counting available to you here. Count All Values, Count Unique Values, Count Duplicate Values, Count Duplicate Values Minus Their First Occurrence, and Count Unique Values Amongst Duplicates.

  • Count All Values
    • Every answer is counted
  • Count Unique Values
    • Only one value per event will get counted
  • Count Duplicate Values
    • Values will get counted only after they’ve been entered more than once
  • Count Duplicate Values Minus Their First Occurrence
    • Values will be counted only after they are entered once and will exclude the first instance
  • Count Unique Values Amongst Duplicates
    • When values are entered more than once, only the first instance will be counted.

One final note on using counts, if you select any of the Duplicate options, you will also see a new field: Duplicate Assessment - Population Approach. Your options here are Per Event or All Events.

For our example, we’re going with Use Values and we’re going to Use Sum.

After that, there’s a couple of optional fields. You can choose to add text before or after the number should you choose to. So, given our example of ‘which giveaway items did you have on-site?’, we’re going to enter the product after the number.

The final field here is Decimals. This relates to how many decimal places you want to include in your chart. Especially if you’re using averages, you’ll want to enter something here to keep the numbers manageable. The most popular option is 2.

Now, if you don’t need to filter your pie piece, you could call it done here. Just follow the same steps outlined above and then just click Save Changes.

However, if you need to filter, you’ve got more steps ahead.

Filtering your Piece of the Pie

Start filtering by clicking Filters at the top of the editing section.

Then click Add Filter.

Now we’ll take a second to talk about the structure of filters. Filtering can be broken into two pieces, the filter and the clause. Think of it this way, with each additional filter you’re adding OR logic, meaning something could be this OR this. When you add a Clause to a filter, it’s adding AND logic, meaning both criteria need to be met to get a result. You can have a filter without a clause but you cannot have a clause without a filter.

So let’s see about starting out with just the filter. From the Type field, select one of the filter type options. They are: Specific Value, Another Field, Venue Type, Market, Event Types, Event Statuses, Programs, Venue Event Count, Date Range.

  • Specific Value
    • If your field has multiple options, this is where you would specify which value you wanted to pull into a specific portion of the chart.
    • You will assign a logic field of either ‘equals’ or ‘does not equal’ and then select the value you want.
  • Another Field
    • If you want to filter based on responses to another question, this would be the option you want to pick.
    • You’ll once again select the Field Category (Standard, Integration, or Venue Profile). For Standard and Venue fields, you’ll also assign Field Type, Field Logic (equals, does not equal) and then you’ll enter the Field ID Value.
  • Venue Type
    • Narrow results to specific venue type(s)
    • Select from list of venue types. Each venue type will need to be added individually.
  • Market
    • Narrow results to specific Market(s)
    • Select the market(s) from a list. Each market will need to be added individually.
  • Event Types
    • Narrow results to specific event type(s)
    • Apply Logic (Is Any Of, Is Not Any Of) then select event types from a list. Each event type will need to be added individually.
  • Event Statuses
    • Narrow results to specific event statuses
    • Select the statuses from a list. Each status will need to be added individually.
  • Programs
    • Narrow results to specific programs within the client site
    • Apply Logic (Is Any Of, Is Not Any Of) then select programs from a list. Each program will need to be added individually.
  • Venue Event Count
    • Narrow results to only include events where the venue meets set criteria
    • Apply Logic (Equals, Does Not Equal, Greater Than, Greater Than or Equal, Less Than, Less Than or Equal) then enter the integer value.
  • Date Range
    • Pull results only from within a specified time period
    • Select the Start and End Date from a calendar menu

So, for our filter, we’re going with Specific Value and we’re picking “Hats” which has an ID of 4281.

Now, if we needed to, we could add a clause, which remember is a way to add AND logic, meaning additional criteria must be met for the data point to be included in the chart. To do that, we would click Add Clause.

The steps from here would be the same as building out the initial filter. As well, you could add additional filters by clicking Add Filter again and just repeating the steps. If you add an additional filter instead of a clause, this will apply OR logic which allows for broader options to get pulled into your chart, so just think about how you need your filters to work before you make your choice.

Widget Filters

We’ve looked at filtering on the pie-piece level, but you can also apply filters to the entire widget. Save yourself the effort of applying filters piece by piece and just add them once here. At the top of the widget builder, click Widget Filters.

If you’ve already added piece-level filtering, this won’t be a big stretch for you, but if you haven’t, we’re going to go through all the steps so don’t worry about missing out on something. The next step is clicking Add Filter.  

This will open the Filter Builder. Your first step here is entering the Name of the filter. Then you need to select your Filter Type. For Filter Type, your options are: Venue Markets, Event Types, Recap Definitions, Programs, Date Range (full date), Date Range (Month and Year), Venue States, Integration Custom Fields, Scheduling Custom Fields, Recap Custom Fields, and Venue Custom Fields.


  • Venue Markets
    • Narrow your widget data to specific markets
    • Select the market(s) from the dropdown menu. Markets will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Event Types
    • Narrow your results to certain event types.
    • Select the event type(s) from the dropdown menu. Event types will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Recap Definitions
    • Pull data only from events with specific recap assignments
    • Select the recap(s) from the dropdown menu. Recap definitions will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Programs
    • Display data based on the event’s program assignment
    • Select the program(s) from the dropdown menu. Programs will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Date Range (full date)
    • Select a date range for dd/mm/yy
  • Date Range (Month and Year)
    • Select a date range for mm/yy
  • Venue States
    • Pull data based on the state the venue is in
    • Select the state(s) from the dropdown menu. States will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Integration Custom Fields
    • Use Integration Fields to determine what data is pulled into your chart
    • Select the field(s) from the dropdown menu. Fields will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Scheduling Custom Fields
    • Pull data based on Scheduling Fields on the event
    • Select the field(s) from the dropdown menu. Fields will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Recap Custom Fields
    • Use specific Recap Fields to determine what event’s pull into your chart
    • Select the field(s) from the dropdown menu. Fields will need to be added individually. If none are selected, the dashboard will default to including all in the filter.
  • Venue Custom Fields
    • Use responses from Venue Fields to populate the widget
    • Select the field(s) from the dropdown menu. Fields will need to be added individually. If none are selected, the dashboard will default to including all in the filter.

Build out additional filters as needed by repeating the above steps.