Insights Canvas: Sample Use Case

Example Insights Canvas

There are so many use cases for SurveyGizmo's Insights Canvas, but sometimes it can be difficult to know how to accomplish what you want to do.

With this sample use case, we hope to illustrate just one potential application of the Insights Canvas and give you some ideas about how you can leverage this powerful tool.

Example Use Case

Let's say that you run a Customer Service team at your organization. After each customer interaction, a survey is sent to the customer to gather feedback across several metrics that your team tracks: Accuracy, Enthusiasm, Politeness, Patience, and Promptness.

Each of these metrics is tracked within the survey via a Star Rating Grid question; each metric is a row within the star grid as shown below.

Star Rating Grid Example

While a Standard Report can certainly be an effective option for reporting on this data, an Insights Canvas allows you to take the default Standard Report output for a Star Rating Grid...

Star Rating Grid: Standard Report Output

...and turn it into something more visually exciting and dynamic:

Insights Canvas Example

The above Insights Canvas uses the mean value (average rating across all survey respondents) for each row in the survey's Star Rating Grid, and, based on that value, dynamically changes the color of the stars. Continue reading to learn how you can build this Insights Canvas.

Background Information

The example Insights Canvas uses the following features:

We will also use other Insights Canvas tools and shortcuts while putting together this example.

Create Your Insights Canvas

We will now cover the steps for putting together the above-mentioned Insights Canvas.

  1. On your account Home Page, click the Create a Survey button and select Create an Insights Canvas from the available options.
    Create an Insights Canvas
  2. Give your canvas a title. In our example, the title is Service Representative Rating
  3. Choose to associate a team if you need to limit access to the canvas. 
  4. Select a Canvas Size. For the purposes of this example, we will select the Tablet > Horizontal option (resulting in a width x height of 1024 x 768)Select Canvas Size
  5. We will not be using a template in our example, and as such will select the Blank option from the Templates section.
  6. Click Start Building after making your selections. You will then land on your canvas dashboard where you can begin adding and customizing various canvas elements.

Add Text Elements

We will begin by adding simple text elements that will serve as the canvas title and the metric labels.

  1. Click anywhere on your canvas, or use the Insert button to bring up the add-element menu. Select Text from the available options.
    Insert Text Element
  2. Use the provided text field to write your canvas title (e.g. Service Representative Rating). Don't worry about adding any formatting to the text at this time. We will be using custom CSS code to address this later.
    Add Text Element Content
  3. Navigate to the Layout & Options tab of your text element.
    • Set the Width to 1024 px - this will ensure that the title text element spans the entire width of the canvas.
    • Input large-header into the Class Name field. We will use this value to target the text element with our custom CSS code later on.
      Text Element: Layout & Options
  4. Save your text element and move it into place at the top of your Insights Canvas. Don't worry about the appearance as we will address this later with custom CSS.
    Move Text Element
  5. Now, add a second text element that will serve as the labels for the customer service metrics (e.g. Accuracy, Enthusiasm, Politeness, Patience, and Promptness). Make sure to add line breaks after each item as pictured below; these will serve as the row labels on the canvas.
    Text Element Content 2
  6. This time, input text-header as the Class Name on the Layout & Options tab (this will be used to target this text element with custom CSS code later). Don't worry about the width value, we will adjust this at the end, if needed.
  7. Save the element. We will adjust the look & feel later.

Your Insights Canvas should look something like this:

Move Second Text Element

At this point the Insights Canvas is pretty simple and lacks styling. We added a Class Name to each of our text elements so that we can later reference these with custom CSS code to add styling.

Next, we will add some calculations to pull data from our Customer Service survey and to output the mean value for each of our customer service metrics.

Add Calculation Elements

This section assumes familiarity with SurveyGizmo's Custom Scripting options (syntax based on PHP.) If you are not familiar with Custom Scripting or if you want us to create an Insights Canvas for your team, consider contacting out Programming Services Team.

Calculation Elements allow you to pull results from a specific question within a specific survey via the sgapiGetResults Custom Scripting function. By default, the function returns an array of statistics based on aggregated responses to the question. Specific data can be pulled from the array and output to the canvas. Visit our Insights Canvas Calculation article for additional information.

In our example, we want to pull the mean for each Star Rating row (customer service metric) and format this mean before outputting the result (rounded to the nearest tenth) to the canvas.

  1. Click anywhere on your Insights Canvas to bring up the add element menu and select Calculation from the Data section.
    Add Calculation Element
  2. Provide an Internal Title for your Calculation element (e.g. Output Mean for Accuracy). Next, select the Script Type; we will be using Custom Scripting for this example.
    Provide Calculation Title
  3. The Calculation element requires the use of the sgapiGetResults(%%sid, %%qid) Custom Scripting function. You will need to reference the survey (by ID) and question (by ID) for which you want to pull the results. Learn how to track down these ID numbers.
  4. When working with the Calculation element, you will likely need to first output the result of the script to the canvas to determine both the specific piece of data you want to reference, and the structure of the results output.

    To do so, use the sgapiGetResults function to pull the results, and use the sgapiPrint_R function to output the returned array.
      //pull results from the Star Rating question (ID 2) from the survey (ID 3850363)
    %%acc = sgapiGetResults(3850363,2);
    
    //output the array of results for %%acc
    %%output .= sgapiPrint_R(%%acc);
  5. Save your Calculation element and you will see the question results output directly to your Insights Canvas, for example:
      Array(		
    [result_ok] => 1		
    [data_ready] => 1
    [data_progress] => 100
    [result] => Array(
    [values] => Array(
    [3] => Array(
    [10001] => Array(
    [mean] => 4.5087719298246		
    [count] => 57
    [sum] => 257
    [min] => 1
    [max] => 5	
    [stddev] => 2.0679440844052	
    [not_applicable] => 0)
    )		
    [4] => Array(
    [10001] => Array(
    [mean] => 4.4745762711864		
    [count] => 59
    [sum] => 264
    [min] => 2
    [max] => 5	
    [stddev] => 1.4831719078919	
    [not_applicable] => 0)
    )		
    [5] => Array(
    [10001] => Array(
    [mean] => 3.5438596491228		
    [count] => 57
    [sum] => 202
    [min] => 1
    [max] => 5	
    [stddev] => 1.5151842521436	
    [not_applicable] => 0)
    )		
    [6] => Array(
    [10001] => Array(
    [mean] => 3.4576271186441		
    [count] => 59
    [sum] => 204
    [min] => 1
    [max] => 5	
    [stddev] => 1.4864126545877	
    [not_applicable] => 0)
    )		
    [7] => Array(
    [10001] => Array(
    [mean] => 3.4736842105263		
    [count] => 57
    [sum] => 198
    [min] => 1
    [max] => 5	
    [stddev] => 1.4914344542426	
    [not_applicable] => 0)
    )		
    )		
    [stats] => Array(
    [count] => 57)
    )		
    )
  6. The above Calculation output allows us to see what information is available to us via the GetResults function as well as how it is structured. We can then begin to further customize the script to return the mean value specifically.
  7. Next, we want to target the mean value of the Accuracy Metric (from our survey's Star Rating Grid question). To do this, it is helpful to refer to the Survey Legend to reference the necessary question/row IDs for our Star Rating Grid.

    The Survey Legend shows us that the rating column for our Star Rating Grid has a column ID of 10001 and the row for the Accuracy metric has an ID of 3.
    Survey Legend ExampleReferring back to the original output of the GetResults function, we see that the mean value is nested within an array. We have to access the mean value within the defined row and column (which themselves are nested within the question values and results arrays).
      //Use sgapiGetResults to get the survey ID, question ID for the star rating question
    %%acc = sgapiGetResults(3850363,2);
    
    //output the array for %%acc (accuracy metric)
    //%%output .= sgapiPrint_R(%%acc);  
    //Get the mean of the Accuracy Metric from the star rating question		
    %%accmean = %%acc['result']['values']['3']['10001']['mean'];
    
    //Print the mean	
    %%output .= sgapiPrint_R(%%accmean);
    We then print the Accuracy mean directly to the Insights Canvas via the sgapiPrint_R function for the following result:
       4.5172413793103
    You will notice that the value that was output is rounded to several more decimal points than we likely need for our purposes. Next, we will format the output value to show fewer decimal points.
  8. We will present a couple of options for formatting the mean value:

    1. We can output the mean rounded to one decimal point; should that decimal be a 0, the mean would be truncated to a single digit (e.g. a mean of 3.0 would result in 3). We use the sgapiRound function for this.
    2. We can output the mean rounded to one decimal point and keep the decimal regardless of whether it is 0 or not, so 3.0 would remain as 3.0. We use the sgapiNumberFormat function for this.
  9. In both of the above cases, we need to reference the mean. In step 7, we set the mean to the variable named %%accmean. As such, for option a above, we use the following script:
      //Value is rounded to 1 decimal. If the value is "3.0" it is truncated to "3"		
    %%accurateRound = sgapiRound(%%accmean,1);
    		
    //Print the value		
    %%output .= %%accurateRound;
    and for option b, we use the following script:
      //Get the value rounded to 1 decimal. Keeps the value after the decimal if it is "0"		
    %%accurateFormat = sgapiNumberFormat(%%accmean,1);
    		
    //Print the value	
    %%output .= %%accurateFormat;
  10. Choose one of the above options and Save your Calculation element to print the value. You should now see a rounded number output to your canvas, e.g. 4.5. Your finished script should look like this:
      //Use sgapiGetResults to get the survey id, question id for the star rating question
    %%acc = sgapiGetResults(3850363,2);
    
    //output the array for %%acc
    //%%output .= sgapiPrint_R(%%acc);
    
    //Get the mean of the 'Accuracy' metric from the star rating question
    %%accmean = %%acc['result']['values']['3']['10001']['mean'];
    
    //Print the mean
    //%%output .= sgapiPrint_R(%%accmean);
    
    //Get the value rounded to 1 decimal. If the value is "3.0" it is truncated "3"
    //%%accurateRound = sgapiRound(%%accmean,1);
    
    //Get the value rounded to 1 decimal. Keeps the value after the decimal if it is "0" 
    %%accurateFormat = sgapiNumberFormat(%%accmean,1);
    
    //Print the value
    %%output .= %%accurateFormat;
  11. You will notice again that this output is not styled. Before moving on, edit the Calculation element once more, navigate to the Layout & Options tab, and add a Class Name of text-header. This class will again serve to style this element later on in this process.
  12. You will need to create a Calculation element for each of the other four metrics in the Star Ranking question: Enthusiasm, Politeness, Patience, and Promptness. The most efficient way to do this is to use the Duplicate option.

    1. Right click on your existing Calculation element and select the Duplicate option.
      Duplicate Calculation Element
    2. After selecting the Duplicate option, your new/copied element's Settings panel will automatically open. Here, you can change your Internal Title and swap out the row ID within the script (the column ID will remain the same). Once you have made the necessary changes, click Save.
    3. Repeat this process for the remaining metrics. You should have five calculation elements on your canvas (in addition to the previously added text elements).

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for SurveyGizmo features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!


Next, we will be using the Shape element to add star icons to the canvas. We will then use the Conditional Styles feature to add dynamic styling to the stars. This dynamic styling will allow the stars to change color based on the value of mean for the corresponding service metric.

Add Shapes

There are a number of items available via the Insights Canvas Shape element. For our example, we will be using the Star 1 shape/icon.

  1. Now is a good time to start rearranging some items on your canvas to make room for the stars that you will be adding. Specifically, let's move our five calculation elements to the right of the canvas to make some room in the center. One way to do this is to Group the calculation elements and move them as a unit.

    1. Hold down your Shift key and click on each Calculation element until they are all selected.
    2. Once all Calculation elements are selected, right click and choose the Group Selection option.
    3. Now, all five elements can be moved as one unit.
      Group Calculation Elements
    4. Once you have moved the group of elements, feel free to right click again and this time click Ungroup. This will allow you to interact with the elements individually again.
  2. Now that we have cleared some space on the Insights Canvas, we can begin adding the stars. We will add five stars per row to correspond with the Star Rating question on our survey. We can add the stars one by one, but there is a short cut that will allow us to speed things up just a bit.
  3. Start by adding the first star:

    1. Click anywhere on the canvas to bring up the add element menu and select Shape from the Layout section.
    2. Choose the Star 1 shape from the Shape Type menu.
    3. Navigate to the Layout & Options tab and choose the color that the stars will be once filled. In our example, we use the hex code of #ffdd02 for a yellow color.
    4. Next, within the Display Options, we set a Width and  Height of 80 x 80 px. Now that we have modified the visual display of the star, we are ready to Save the element.
      Shape Element: Layout & Options
    5. Now that we have added one star to the canvas, we can use a couple short cuts to quickly add the remainder.
  4. Click on the star that you just added to highlight it. Once highlighted, click Control+D to duplicate the star. Do this a few more times until you have five star-shapes on your canvas.
    Duplicate Shape Element
  5. Once you have five stars on your canvas, hold down your Shift key and click on each star to select all of them. Once all are selected, right click and choose the option to Group Selection.
    Group Star Shapes
  6. With all five stars selected, you can copy them as a unit. Use the keyboard shortcut Control+D (or right click and select Duplicate). This will copy the grouped selection of five stars, giving you ten. Repeat this until you have all twenty-five stars.
    Duplicate Grouped Elements

Once all twenty-five starts have been added, rearrange them in five rows of five as this will make the next steps quite a bit easier.

Position Star Shapes

We have now added all of the necessary stars (Shape elements) to the Insights Canvas and we are ready to start applying Conditional Styles which will dynamically change the color based on each service metric mean value.

Add Conditional Styles

The Conditional Styles feature on SurveyGizmo's Insights Canvas allows you to dynamically update insights elements based on data elements.

In the case of our example, we want to dynamically change the color of the stars that we have added to the canvas based on the mean values for each customer service metric that we are tracking. For example, if our Accuracy mean is 3.5 we want 3/5 stars to remain yellow, while the remaining stars will turn gray. Once the mean reaches at least 4, the fourth star will turn yellow, and so on.

This is a bit of a manual process, but once you apply the conditional styles to a few of the stars and become familiar with the process, it speeds up.

  1. Click on the first star in row one (for the Accuracy metric) and use the pencil icon to edit the shape.
  2. Next, navigate to the Logic tab. We will configure the Conditional Styles here.
  3. Click Add State to access the Conditional Styles controls.
    Add State
  4. Provide a State Name (e.g. Accuracy Mean Less Than One).
  5. Within the Change Condition section:

    1. Use the Select a condition dropdown to select the Calculation element that outputs the mean for your first customer service metric (Accuracy).
      Add Change Condition
    2. Choose the less than operator and enter 1 in the provided field (a numeric value is necessary here).
      Completed Change Condition
  6. Now that we have defined the condition that needs to be met, we need to define the outcome. Choose the Default Styles option within the Effect section. Essentially, we are saying that if the condition is met (if the mean for Accuracy is lower than 1), the default styles of the star will be changed.
  7. Since we do not want to override the width of the star, input 80 into the Width field. Leaving this field blank will override the width that was previously set via the Layout & Options tab.
  8. Next, in the Color section, input a color that the star will be changed to should the accuracy mean value be less than 1. Click the Update State button once done.
    Conditional Styles Effect
  9. You will return to the Logic tab where you can proceed to Save the element and return to your canvas.

    We have now applied the following conditional style:

         If the mean score of the accuracy metric is less than 1, the color of the star is changed from the original yellow to gray.*
    *You may have noticed that nothing happened once you saved the element. Depending on what the mean score is for Accuracy you may not see a change. In our example, the accuracy mean is 4.5. As such, we would expect the first star to remain yellow.
  10. Now, we need to move on to the next star shape. We will set up everything in the same manner, with one exception.

    1. Where we previously set up the logic condition to fire when Accuracy is less than 1, for the second star we will need the logic to fire when Accuracy is less than 2. This will ensure that the second star changes color only if the mean score is less than or equal to 2.0.
    2. We then move on to the third star and add logic for when Accuracy is less than 3, then the fourth star for less than 4 and on to the fifth star to finish all the conditions for the Accuracy metric.
  11. Now that we have finished setting up the Conditional Styles for all five star shapes associated with the Accuracy metric, we can move on to the next row: Enthusiasm.

    1. We will start with the first star shape in the second row and essentially replicate the same process that we just used for the stars associated with Accuracy, with one major exception. Where with accuracy we based the logic condition on the Calculation Element that pulls the Accuracy mean, this time we will base the logic on the calculation element that pulls the mean for the Enthusiasm metric.
      Build Second Change Condition
  12. To finish, we will apply all change conditions for the stars associated with the Enthusiasm metric and then move on to the Politeness, Patience, and Promptness metrics.

We are now finished with the majority of the canvas configuration. The Insights Canvas should now look something like this:

Star Shapes With Conditional Styles Applied

All that remains is to style our Insights Canvas and move the individual elements into their final position. As you might recall, we added a Class Name to the following elements:

  • The Text Element that contains our Insights Canvas title.
  • The Text Element that contains the customer service metrics of Accuracy, Enthusiasm, Politeness, Patience, and Promptness
  • Each Calculation Element that returns the mean for its corresponding metric.

The Class Names will be targeted with our CSS code to make visual changes to the text.

Customize Look & Feel With CSS

This section assumes familiarity with CSS styling. If you are not familiar with CSS or if you want us to create an Insights Canvas for your team, consider contacting out Programming Services Team.

We will be applying CSS code that targets only the elements that have a Class Name assigned. The CSS code will transform the text on the canvas in a number of ways, including changing the text font, size, and color.

  1. To add custom CSS to your Insights Canvas, click on the Canvas Style option found in the upper left portion of your canvas.
    Canvas Style
  2.  The canvas styling options will open. Click on the Custom Code option found within the Advanced section.
  3. You will now have the option to add either Custom CSS or Custom JavaScript. Click on the CSS option.
  4. Clear out the existing placeholder text, and paste the below CSS code into the provided field:
      .text-header div {		
    font-size: 40px !important;
    color: #51B2D2 !important;
    line-height: 2.5 !important;
    font-weight: 900 !important;
    font-family: "Lato" !important;
    }
    		
    .large-header div {
    font-size: 40px !important;
    color: #51B2D2 !important;
    line-height: 2.5 !important;
    font-weight: 900 !important;
    font-family: "Lato" !important;
    text-align: center !important;
    border-bottom: solid 10px #ffffff !important;
    }
  5. Click the Done option in the bottom right and see your Insights Canvas transformed!
  6. The Custom CSS that we just added will make it easier to rearrange the canvas elements into their rightful places (which is the last step in the process).
    • Click on the items that you want to move and drag them into place. This is a great time to group elements like the stars so that you can move them as a group.
  7. Once you have moved every element into place, your canvas should look something like this:
    Insights Canvas With Custom CSS Applied
  8. Now is a good time to add either a background image or to customize the background color. To do this, navigate to Canvas Style > Colors > Background.

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for SurveyGizmo features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!


You now have a finished Insights Canvas that is ready to be shared. For this example, we will be displaying our Insights Canvas on a monitor in our Customer Service department so that all of our service reps can have easy visibility into the team's performance (in real-time).

As the mean scores for each of the metrics increase or decrease, we will see the star colors dynamically changed according to the scores.

Learn more about Insights Canvas sharing options!


Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In