Case Study: Designing Complex Chart Views

This article demonstrates how to design complex chart views (like Multi-Axis Charts and Spider Area Charts) on Lambda Analytics.

TOPICS


Introduction to Designing Complex Chart Views

The ability to design complex and visually stunning charts is a key feature to getting the most out of Lambda Analytics. This collection of case studies will walk through the necessary steps to create specific chart views, including:

  • Opening the Ad Hoc Editor and selecting the necessary view type
  • The amount and relation of fields and measures needed
  • Advanced formatting recommendations
  • Recreate-able examples based on public domains

NOTE  NOTE

This case study assumes that you are comfortable working with the Ad Hoc Editor.

Back to TOPICS


Multi-Axis Charts

To create a Multi-Axis Chart in the Ad Hoc Editor:

1.  From the Home page, select Create > Ad Hoc View from the main menu bar. The Select Data wizard appears.

2.  In the Select Data wizard, select the Quiz Domain.

3.  Click Choose Data. 

4.  In the column between the Source and Selected Fields panels, click the Select All button to select all data from the Quiz Domain for availability in your Ad How View.

The Course, User, and Quiz sets will move from the Source to Selected Fields panel.

5.  Click OK. The Ad Hoc Editor opens.

6.  In the Ad Hoc Editor top navigation, select Chart from the View Type list. 

7.  Click the Chart Detail Selector icon and select Chart Types. 

8.  In the Dual and Multi-Axis section, select the Multi-Axis Column chart type. 

9. Close the Select Chart Type dialog.

10.  To successfully create a Spider Area Chart, you will need at least three measures and a single field.

For the purposes of this case study, drag the following Quiz Domain items from the Fields and Measures panels into the Columns and Rows boxes, respectively:

Attempts Finished: From the Quiz Statistics set (within the Quiz set) in the Measures panel. Drag this measure into the Columns box. This will display the number of finished quiz attempts.

Attempts Total Time Taken: From the Quiz Statistics set (within the Quiz set) in the Measures panel. Drag this measure into the Columns box. This will display the average grade of quiz attempts.

Quiz Name: From the Quiz set in the Fields panel. Drag this field into the Rows box. This will associate each quiz attempt statistic with the corresponding quiz.

Once these three measure and this single field are added, you will see the initial stages of your Multi-Axis chart. 

11.  In the Filters panel, drag the Rows slider all the way to the right, enabling a row for each quiz. 

You will now see a completed basic Multi-Axis Chart of your number of finished quiz attempts, total time taken, and average grade of quizzes. 

Back to TOPICS

Formatting a Multi-Axis Chart

TIP  TIP

To learn more about Advanced Chart Formatting, click here for more information.

Using the Advanced Chart Formatting commands, you can easily transform your chart into a visually striking, branded, and dynamic image.

To transform this chart with formatting, follow the steps listed in the Advanced Chart Formatting article, then enter the following formatting commands and values.

Property Value
title.text Number of Finished Attempts, Total Time Taken, and Average Grade of Quizzes
title.style.fontSize 24
chart.borderWidth 2
chart.borderColor #141619
chart.borderRadius 20
chart.spacingTop 20
chart.marginTop 50
chart.plotBorderWidth 1
chart.plotBorderColor #141619
xAxis.labels.style.color #141619
xAxis.labels.style.fontSize 14
yAxis.title.style.fontSize 14
legend.borderColor #141619
legend.itemStyle.color #141619
tooltip.valueDecimals significant
tooltip.borderRadius 10
colors ["#351431", "#798448", "#775253"]
chart.backgroundColor #c1bca6
chart.plotBackgroundColor #FCFCFB

Back to TOPICS


Spider Area Charts

For the purposes of this case study, we will create a Spider Area Chart using the Quiz Domain.

To create a Spider Chart in the Ad Hoc Editor:

1.  From the home page, select Create > Ad Hoc View from the main menu bar. The Select Data wizard appears.

2.  In the Select Data wizard, select the Quiz Domain.

3.  Click Choose Data. 

4.  In the column between the Source and Selected Fields panels, click Select All to select all data from the Quiz Domain for availability in your Ad Hoc View. The course, user, and quiz sets will move from the Source to Selected Fields panel.

5.  Click OK. The Ad Hoc Editor opens.

6.  In the Ad Hoc Editor top navigation, use the View Type drop-down menu to select Chart.

7.  Click the Chart Detail Selector icon and select Chart Types.

8.  In the Line and Area section, select the Spider Area chart type. Then, close the Select Chart Type dialog.

9.  To successfully create a Spider Area Chart, you will need at least two measures and a single field.

For the purposes of this case study, drag the following Quiz Domain items from the Fields and Measures panels into the Columns and Rows boxes, respectively.

Quiz ID: From the Quiz set in the Measures panel, drag this measure into the Columns box. This will display the number of quiz attempts, as represented by ID. 

User ID: From the User set in the Measures panel, drag this measure into the Columns box. This will display the number of users, as represented by ID.

Course Category: From the Course Category set (within the Course set) in the Fields panel, drag this field into the Rows box. This will categorize each quiz attempt through a predefined course category.

Once these two measures and this single field are added, you will see the initial stages of your spider chart.

10.  In the Filters panel, drag the Rows slider all the way to the right, enabling a row for every course category. 

11.  In the Columns box, right-click User ID and navigate to Change Summary Calculation > Count Distinct.

TIP  TIP

Changing the summary calculation from Count All to Count Distinct will lead your spider chart to display the number of unique users who have completed a quiz, instead of a count of all users, which could have counted the same user more than once.

You will now see a completed basic spider area chart of your distinct users and quiz attempts by course category. 

Back to TOPICS

Formatting a Spider Area Chart

TIP  TIP

To learn more about Advanced Chart Formatting, click here for more information.

To rotate the axis labels to match the example charts:

1.  Click the Chart Detail Selector icon to open the Chart Format window.

2.  In the Rotation of X-Axis Labels field under the X-Axis heading, change the value from "-45" to "0" and click Apply. This rotates the label text to the most legible position. 

Using the Advanced Chart Formatting commands, you can easily transform your chart into a visually striking, branded, and dynamic image.

To transform this chart with formatting, follow the steps listed in the Advanced Chart Formatting article, then enter the following formatting commands and values.

Property Value
chart.borderWidth 2
chart.borderColor grey
chart.spacingTop 20
chart.marginTop 50
chart.plotBorderWidth 3
chart.plotBorderColor grey
xAxis.labels.style.color grey
xAxis.labels.style.fontSize 14
legend.borderColor #E8F2F4
tooltip.valueDecimals 0
tooltip.borderRadius 10
colors ["#005A31", "#84D2F6"]
chart.backgroundColor #386FA4
chart.plotBackgroundColor #E8F2F4
title.text Number of Quiz Attempts and Distinct Users by Course Category
title.style.fontSize 22
title.style.color #E8F2F4
legend.itemStyle.color "white"

Back to TOPICS