1. Add More Zing to your Dashboards – Creating Zing Plot Gadgets
CONFIDENTIAL
Add More Zing to your Dashboards – Creating Zing Plot Gadgets
User Group Meeting October 21, 2015 John L. Evans

2. Agenda Gadgets and Dashboards Data Visualization Gadgets Dataset
CONFIDENTIAL
Agenda
Gadgets and Dashboards
Data Visualization Gadgets
Dataset
Steps to Configure
Guided Walkthrough
Your Turn

3. A Gadget? An interactive record containing dynamic web content
CONFIDENTIAL
A Gadget?
An interactive record containing dynamic web content
Navigational tiles/Query gadgets
Smart Table grid gadgets
Data visualization gadgets (today’s discussion!)
Built from report data
Associated to dashboards

4. CONFIDENTIAL
A Dashboard?
A page containing one or more gadgets with dynamic web content
Can contain:
Means to redirect users to other pages
Reports linked to data visualizations
Made for each application’s home page
Can also be standalone pages accessed through menus

5. CONFIDENTIAL
What is Zing?
Library that allows creation of charts, dashboards, and infographics
Flexible
Interactive
Fast
Scalable
Modern

6. Data Visualization Gadgets
CONFIDENTIAL
Data Visualization Gadgets
Vertical Funnel
Quick visual tool to determine if there is bias in the data
Scatter plot of effect size against a measure of study size or variability
Gauge
Visualize the count of a given metric relative to a specified maximum and minimum value
Good for displaying progress, quantities, and statuses
Note: this usually requires a custom SQL report
Scatter plot
Display data as points in Cartesian coordinates to represent values for two variables
Useful way to identify relationships between the two variables
Good for continuous numerical data
Does NOT display a line or curve through the data
Histogram
Vertical bars that represent the distribution of data in binned ranges
Works well for continuous data that can be split into even bin ranges
Bar chart
Rectangular vertical bars with height proportional to the values they represent
Useful way to compare different categories of objects that have discrete values along the y-axis
Pie chart
Display data as proportionately sized pie slices in a circle
Works well for numeric or string data with small numbers of discrete values
Line plot
Similar to scatter plot, but data points are connected by lines
Works best when you do not have too many data points and the relationship between the two variables is nearly linear
Does NOT approximate a single line through the data points
Used to visualize data from reports
Types
Pie chart
Histogram
Bar chart
Scatter plot
Line plot
Vertical funnel
Gauge

7. Sample Data Iris Dataset Samples from three species of Iris
CONFIDENTIAL
Sample Data
Iris Dataset
Samples from three species of Iris
Five values
Length and width of petal
Length and width of sepal
Random generated date
Data in LIMS as an experiment
(photo:

8. Steps to Configure Use data to create report Create gadget
CONFIDENTIAL
Steps to Configure
Use data to create report
Create gadget
Select report with your data
Edit gadget to create/choose chart type
Add gadget to dashboard

9. Create Report Navigate to the Zing! Application Expand Samples menu,
CONFIDENTIAL
Create Report
Navigate to the Zing! Application
Expand Samples menu,
choose Small Molecule,
and select Query

10. Create Report Select 2015 UGM Zing Report Format under Report Name
CONFIDENTIAL
Create Report
Select 2015 UGM Zing Report Format under Report Name

11. Create Report At bottom of search, expand Assay Criteria
CONFIDENTIAL
Create Report
At bottom of search, expand Assay Criteria
Select “IRIS” for Assay Type
Select “Iris Assay” for Assay
Select “Sepal Length” for Data Type
Select “has data” for Criteria
Select Search button

12. Create Report In resulting data table, select the “Save” menu
CONFIDENTIAL
Create Report
In resulting data table, select the “Save” menu
Then select “Save as Live Report”
Note: Report can be either Live or Scheduled

13. Create Report You will be brought to the “Create New LIVE REPORT” page
CONFIDENTIAL
Create Report
You will be brought to the “Create New LIVE REPORT” page
Enter a name for your report and select the Create New button (remember the name)

14. Create Gadget Navigate to the Zing! Application
CONFIDENTIAL
Create Gadget
Navigate to the Zing! Application
Expand Gadgets menu, choose Core Gadget, and select Create

15. Create Gadget Enter attribute information
CONFIDENTIAL
Create Gadget
Enter attribute information
A height and width of 4 is recommended for this type of chart
At the bottom, select the report that was just created
Select the Create New button

16. Create Gadget Select the Edit icon
CONFIDENTIAL
Create Gadget
Select the Edit icon
Select the Create a Chart Gadget option under the Content attribute

17. CONFIDENTIAL
Create Gadget
Select the Chart Type to create

18. CONFIDENTIAL
Create Gadget
Depending on the chart type selected, various options will be available:
Select data column to be used in chart here
Specify chart title here

19. CONFIDENTIAL
Create Gadget
Depending on the chart type selected, various options will be available:
Use Add More Data button to provide additional y-axis inputs
Alternate color displayed for markers – can use color names or hex values
Select data to plot along y-axis
Text label used in the legend – “Series 1” if left blank
Specify axis labels here
Specify chart title here
Specify axis labels here
Select data to plot along x-axis

20. CONFIDENTIAL
Create Gadget
Depending on the chart type selected, various options will be available:
Alternate color to be displayed if value satisfies rule
LIMS will automatically select even bin ranges based on data
Number of vertical bars to bin data into
Bars will be blue unless you specify a conditional operator to color differently
Specify axis labels here
Specify chart title here
Specify axis labels here
Select data field to create chart here

21. Create Gadget Select the Create Gadget button
CONFIDENTIAL
Create Gadget
Select the Create Gadget button
Content window will be populated automatically with JavaScript to create chart
Select the Update button to save changes to the gadget

22. Add Gadget to Dashboard
CONFIDENTIAL
Add Gadget to Dashboard
Edit the 2015 UGM Zing Dashboard record (AAQ17) and select your chart gadget in the pulldown
Select the Update button

23. View Gadget on Dashboard
CONFIDENTIAL
View Gadget on Dashboard
Your gadget will now be visible on the dashboard

24. CONFIDENTIAL
Gadget Use
Selecting data on the gadget itself will open a Smart Table with those specific values

25. Gadget Use Right-clicking on the chart will provide some other options
CONFIDENTIAL
Gadget Use
Right-clicking on the chart will provide some other options

26. Edit Gadget On gadget record, select the edit icon
CONFIDENTIAL
Edit Gadget
On gadget record, select the edit icon
To update values, select Content tab. Two options:
1. Recreate chart from pulldown

27. Edit Gadget 2. Edit the JavaScript code in the Content window
CONFIDENTIAL
Edit Gadget
2. Edit the JavaScript code in the Content window

28. Summary Zing gadgets are: Easy to use for data visualization
CONFIDENTIAL
Summary
Zing gadgets are:
Easy to use for data visualization
Quick to setup and display
Interactive with low overhead
Flexible and provide many options
Capable of handling large data sets

29. Your Turn Create three different Zing chart gadgets
CONFIDENTIAL
Your Turn
Create three different Zing chart gadgets
Populate the 2015 UGM Zing Dashboard with them
CHALLENGE 1: Add the report data as a grid gadget
CHALLENGE 2: Create your own dashboard
CHALLENGE 3: Create your own application and link to your dashboard

30. CONFIDENTIAL
Your Turn

31. CONFIDENTIAL
Your Turn

32. CONFIDENTIAL
Thank you!
Questions?