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

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

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

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

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

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

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: http://blog.kaggle.com/2015/04/22/scikit-learn-video-3-machine-learning-first-steps-with-the-iris-dataset/)

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

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

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

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

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

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)

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

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

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

CONFIDENTIAL Create Gadget Select the Chart Type to create

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

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

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

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

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

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

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

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

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

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

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

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

CONFIDENTIAL Your Turn

CONFIDENTIAL Your Turn

CONFIDENTIAL Thank you! Questions?