Visualizations

Knowi offers over 30 visualization options.

Visualization types can be modified via the settings option within the widget.

Add Widget

Data Grid

Alternative Grid type. Supports formatting, conditional highlighting, sorting, grouping, and search. Also supports Excel downloads, sparkline charts within cells, and have a different look and feel than the basic grid type.

Data Grid 2

Specific options:
Font size Size of the fonts for the header and rows
Font color Font color of the rows
Color of odd rows Background color for the each odd rows
Color of even rows Background color for the each even rows
Color of Header rows Background color for the header
Header font color Font color for the header
Minimum Column Width For cases with large number of columns, apply a minimum grid width to enable horizontal scroll instead of fitting the grid into the viewport
Grid line thickness Adjust the thickness of grid lines
Cells Padding Pad cell content
Grouping Group data by parameters
Aggregation Calculate statistics: min, max, average, total, count, and weighted average. Can be displayed at the top or bottom of the data grid
Internal Sparkline Charts Add Line, Area, Bar, Spline, Spline Area or Pie charts inside of the table
First Page Limit Allows you to set the number of records to load on the first page of Data Grid widget. Default is 1000 records
Parent-Child - Parent Column If you wish to display data where you have a parent child relationship, and where a parent key is defined wish to put all the items under that parent
Parent-Child - Key Column If you wish to display data where you have a parent child relationship, and where a parent key is defined wish to put all the items under that parent. Use this to define which field the accordion will apply on
Parent-Child - Collapse Rows Use this to display child rows collapsed by default

Creating Sparklines: To create a sparkline within a chart your data must first be in array format.

If you data is not in array format, you can use the ARRAY() function in Cloud9QL.

Once your data is in array format you can turn your data into a sparklines via settings.

Data Grid - Basic

Basic Grid. Supports formatting, conditional highlighting, sorting, grouping, and search. Has a different look and feel to other Grid type.  Filter

Data Grid:
Primary Use: Display the data in numerical form on a simple, easy to read grid
How to use: Click on a visualization that has been already created/formatted, change the type to "data grid"
Hyperlink Support: Hyperlinks are created using the concat function within Cloud9QL and column names may be passed in as parameters to
the url creation.

For example:
select concat("<a href='http://www.facebook.com/'", customer_id, " _target='blank'>",customer,"</a>") as Facebook
Specific options:
Font size Default font size
Color of odd rows Background color for the each odd rows
Color of even rows Background color for the each even rows
Font color Font color
Color of Header rows Background color for the header
Header font color Font color for the header
Minimum Column Width For cases with large number of columns, apply a minimum grid width to enable horizontal scroll instead of fitting the grid into the viewport
Grid line thickness Adjust the thickness of grid lines
Cells Padding Pad cell content
Grouping Group data by parameters
Aggregation Calculate statistics: min, max, average, total, count, and weighted average. Can be displayed at the top or bottom of the data grid.

Pivot

Pivot table is used to organize, summarize and compare complex data. It allows you to extract significance from a large data set.

There are 7 operations available: sum, count, max, min, ratio, avg, tally. If you set your column operation to ratio, it will compute correlation between previous two columns to the left. Tally is used to display all subtotal and grand total cells as count while displaying all regular cells as sum.

pivot

Pivot specific options:
Total column Additional column with summary for each row
Total row Footer row with summary for each column
Rows background color Defaults to white
Rows font color Defaults to black
Header background color Defaults to light blue
Header font color Defaults to black
Fit To Widget Width Marked columns shrink to fit widget width to eliminate horizontal scroll
Format Apply different formatting to values: Number, Currency, Date or Percentage
Columns Sort Order Sort columns by topmost column header: Ascending or Descending

Pie

Break down by grouping (percentage or number). Filter

Pie Specific Options:
Plot data/Y-axis Data to be displayed on chart
Grouping/Legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Donut

Variation of a pie chart.  Filter

Donut Specific Options:
Plot data/Y-axis Data to be displayed on chart
Series/Legend Different groupings of data
Display Theme Background color of the chart (light or dark)

Column

Column chart with grouping and secondary axis support.  Filter

Column Specific Options:
Plot data/Y-axis Data to be displayed on chart
Series/Legend Different groupings of data
X-axis Category displayed on the X-axis
X-axis Ordering Ascending or descending
X-axis Type If a time series chart, set to date/time
Secondary Y-axis Second Y-axis to be placed on the right side of the chart to make a second set of grid points
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Stacked Column

Column chart with stacking of multiple groupings.  Filter

Stacked Column Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Ordering Ascending or descending
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Y-axis Second Y-axis to be placed on the right side of the chart to make a second set of grid points
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Bar

Filter

Bar Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Ordering Ascending or descending
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Area

Variation of line chart with color fill. Filter

Area Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Ordering Ascending or descending
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Y-axis Second Y-axis to be placed on the right side of the chart to make a second set of grid points
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Stacked Area

Area chart with stacking for various groupings.  Filter

Stacked Area Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Ordering Ascending or descending
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Y-axis Second Y-axis to be placed on the right side of the chart to make a second set of grid points
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Line Chart

Filter

Line Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Spline Chart

Variation of a line chart with curve fitting. Filter

Spline Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Scatter

XY chart that plots each data points as a marker.  Filter

Scatter Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Sankey

Sankey diagrams are a specific type of flow diagram, in which the width of the arrows is shown proportionally to the flow quantity. The dataset requires a From, To, and a number value. For example, how many people that visited Page A went to Page B, etc. 

Filter

Sankey Options:
From Source node
To Target node

Chord

A chord diagram is a graphical method of displaying the inter-relationships between data in a matrix.

The data is arranged radially around a circle with the relationships between the points drawn as arcs connecting the data together.

Chord Widget

Chord Options:
From The field that represents From
To The field that represents To
Counts/Values The field that represents the Counts

Bubble

Variation of scatter plot, where the size of the bubble is based on another dimension of the data.  Filter

Bubble Specific Options:
Plot data/Y-axis Data to be displayed on chart
X-axis Category displayed on the X-axis
X-axis Type If a time series chart, set to date/time
Series/legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)
Bubble Size Field Denotes what the bubble will represent

Funnel

Useful to represent stages. For example, a sales funnel that tracks pipeline data from number of leads to closed won. Filter

Funnel Specific Options:
Plot data/Y-axis Data to be displayed on chart
Series/legend Different groupings of data
Secondary Chart Type Chart type for the second display
Display Theme Background color of the chart (light or dark)

Gauge - Goal

Simple gauge with color settings to adjust based on value. Filter

Gauge/Goal Specific Options:
Plot data/Y-axis Data to be displayed on chart
Start Value Starting value of the gauge
Max Value Maximum value of the gauge
Start Color Color of the,gauge when it is at the starting value
Color Mid-Point Color of the gauge when it is nearing the middle value
End Color Color of the gauge when it is nearing the ending value

Gauge - Speedometer

Variant of Gauge - Speedometer chart in Speedometer form.  Filter

Gauge/Speedometer Specific Options:
Plot data/Y-axis Data to be displayed on chart. Required
Start Value Starting value of the gauge. Will default to 0 when not specified.
Max Value Maximum value of the gauge
First Range Value Top of the first range in numeric form, with the color specified in the First Range Color property.
First Range Color Color code, or the color name of the first range. Example: green
Second Range Value Top of the second range in numeric form, with the color specified in the Second Range Color property.
Second Range Color Color code, or the color name of the range. Example: yellow
Third Range Value Top of the second range in numeric form, with the color specified in the Second Range Color property.
Third Range Color Color code, or the color name of the range. Example: red
Color Mid-Point Color of the gauge when it is nearing the middle value
End Color Color of the gauge when it is nearing the ending value
Log Scale Option to set logarithmic scale on the data

Datagrid Heatmap

Highlights the degree of relationship between two dimensions with color gradients. Examples: Day by Week with Hour by Day comparison, Cohort Analysis, etc. Filter

Data Grid - Heat Maps Specific Options:
Plot data/Y-axis Data to be displayed on chart
Y-Axis Categories The categories displayed vertically
X-axis Category displayed on the X-axis
X-axis Ordering Optional X-axis data ordering, if applicable
Min Color Color of the minimum values
Baseline Value Baseline number the data will be based off
Display Theme Background color of the chart (light or dark)

Waterfall

A waterfall chart aids in understanding the cumulative effect of sequentially introduced positive or negative values. Example: Financial Analysis, Quarterly Gain/Loss, etc. 

Filter

Waterfall Specific Options:
Plot data/Y-axis Data to be displayed on chart
Categories The categories displayed vertically
Y-axis Values displayed on the Y-axis
Series/legend Different groupings of data
X-axis Category displayed on the X-axis
Y-axis Max The maximum value of the Y-axis
Y-axis Tick Interval The interval of the tick marks in axis units
Total Interval When this preperty is true, the point display the total sum across the entire series
Intermediate Sum The points acts as a summary column for the values added or substracted since the last intermediate sum
Display Theme Background color of the chart (light or dark)

Geo Marker Pins

Marker Pins displayed on Google Maps. Requires latitude and longitude values in the dataset. For datasets without latitude/longitude, see geo-coding features in Cloud9QL.

Note: This requires Google Maps connectivity for on-premise installations.

Filter

Geo - Marker Pins Specific Options:
Maps Center Latitude Latitude for a specific address
Maps Center Longitude Longitude for a specific address
Zoom Level Magnification level
Map Type Roadmap,satellite, hybrid, or terrain
Marker Pin Text Field used for text display on the marker.

Geo Cluster/Custom Maps

Clusters latitude/longitude values with zoom in capabilities. Comes present with a number of tile providers, including the ability to add your own custom tile and Web Map service as well as custom GEO JSON overlays. Requires latitude and longitude values in the dataset, unless you code your own map using the Custom JavaScript Handler. This can be used on-premise without internet connectivity to point to your own mapping service/tile provider. For datasets without latitude/longitude, see geo-coding features in Cloud9QL.

Filter

Geo Cluster Specific Options:
Center Latitude Latitude of the center of the visualization's map
Center Longitude Longitude of the center of the visualization's map
Zoom Level Magnification level
Marker Pin Text Field used for text display on the marker.
Tile Provider Change provider to retrieve map tiles or enter a custom provider
Custom WMS Custom layers URL
Try it: Select Custom WMS Server from Tile Provider field. Paste http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi to Custom WMS Server and nexrad-n0r-900913 to Custom Map Layers fields
Custom Map Layers Layers names, which would be taken from custom layers provider URL and displayed on the map
Try it: Select Custom WMS Server from Tile Provider field. Paste http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi to Custom WMS Server and nexrad-n0r-900913 to Custom Map Layers fields
Custom Tile Provider Custom tile provider URL
Try it: Select Custom Tile Provider from Tile Provider field and place http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x} to Custom Tile Provider field

Geo Heatmaps

Geo Heatmap for location clusters. Requires latitude and longitude values in the dataset. For datasets without latitude/longitude, see geo-coding features in Cloud9QL.

Note: This requires Google Maps connectivity for on-premise installations.

Filter

Geo - Marker Heat Maps Specific Options:
Primary Region Specific region of world to be focused on

Geo Marker Heatmaps

Useful for city/region level clusters. Dataset requires city or state fields in the data or latitude/longitude.

Note: This requires Google Maps connectivity for on-premise installations.

Filter

Geo - Heat Maps Specific Options:
Maps Center Latitude Latitude for a specific address
Maps Center Longitude Longitude for a specific address
Zoom Level Magnification level
Map Type Roadmap,satellite, hybrid, or terrain
Radius The radius of influence for each data point

Geo - Countries

Color coded region maps. Dataset state fields in the data.

Note: This requires Google Maps connectivity for on-premise installations.

Filter

Geo - Countries Specific Options:
Primary Region Region to display on map. Defaults to map of the world
Start Color Start color for least recurring countries
End Color End color for most recurring countries

* requires 'country' and count of country fields in underlying data

Geo - US States

Color coded region maps. Dataset state fields in the dataset.

Note: This requires Google Maps connectivity for on-premise installations.

Filter

Geo - US States Specific Options:
Start Color Start color for least recurring state
End Color End color for most recurring state
Marker Pin Text Field to display in hover

* requires 'state' and count of state fields in underlying data

Data Summary

Filter

Data Summary:
Primary Use: Display the data in summary form. (Ex. Total messages delivered, opened, etc.)
How to use: Click on a visualization that has been already created/formatted, change the type to "data summary". Note that if the data includes multiple records, it'll display the first.

Word Cloud

Displays a word, with size of the word proportional to an associated value. For example, revenue by customer name, where the customer name displayed is proportional to the revenue number. 

Filter

Word Cloud:
Field containing text This will contain the field that contains the text to analyze.
Field containing Size Field that maps the size of the word to display. If this is not present by default in the data, use Cloud9QL or ad hoc analytics to transform the results to aggregate the data
Minimal Angle Control the text angle display. Defaults to 0.
Maximal angle Control the text angle display. Defaults to 0.
Step change angle Control the angle display step. Defaults to 1
Font Displayed text Font style

Custom Text/HTML

Customizable text/HTML based display. Can be simple text to more powerful rendering to include your data in a variety of forms.

Text/HTML:
Font size Default font size
Font color Font color
Background color Widget background color.
Text Code

Enter Text or HTML code. You can use {{tag}} to field data for the widget. type in { to get a list of fields along with some options you can use to customize the display of data

Tag Options:


Simple field display:

  • {{field_name}} - getting the first value for field with name "field_name".
  • {{field_name:n}} - get the nth value of the field with name "field_name".
  • {{field_name:n-c}} - get a list comma-separated from "n" to "c" with "field_name".

Commands:

  • _data - JSON object with data for the current dataset. Typically used within JavaScript.
  • _ul - builds a bullet list using value field. Command form {{_ul|field_name:n-c}}, {{_ul|field_name:n}}, {{_ul|field_name}}.
  • _ol - builds a numbered list using value field. Command form {{_ol|field_name:n-c}}, {{_ol|field_name:n}}, {{_ol|field_name}} (field_name - field name in the sheet, n - from, ? - to)
  • _table - builds a table from the field. Command form {{_table|field_name1,field_name2:n-c}}, {{_table|field_name1,field_name2:n}}, {{_table|field_name1,field_name2}}
  • _count - total number of records {{_count}}
  • _sum - the amount of field values {{_sum|field_name:n-c}}, {{_sum|field_name}}
  • _max - maximum value of the field {{_max|field_name:n-c}}, {{_max|field_name}}
  • _min - minimum value of field {{_min|field_name:n-c}}, {{_min|field_name}}
  • _widget - add another widget (not HTML widget) {{_widget|widget_name}}
  • _class - returns field value without any html wrappers. Useful if you want to use field value as a class name {{_class|field_name:n}}, {{_class|field_name}}

Web page

Display the contents of an external url/site within this widget

Filter

Web page Options:
Web page link Enter web pages URL link here ( http://example.com ).

Box plot

A boxplot is a graphical summary of the distribution of a sample that shows its shape, central tendency, and variability. Boxplots have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles, hence the terms box-and-whisker plot and box-and-whisker diagram.

Filter

Box plot specific options:
Median Median of the box
X-Axis Grouping field to display multiple plots
Lower quartile Value of lower quartile of box
Upper quatrile Value of upper quartile of box
Low whisker Value of low whisker
High whisker Value of high whisker
Theoretical mean Value of theoretical mean
X-Axis Type Set whether your X-Axis is numerical or a date/time
Display Theme Background color of the chart (light or dark)


Treemaps

Displays hierarchical (tree-structure) data as a set of nested rectangles, with smaller rectangles representing sub-groupings. Each rectangle has an area proportional to a specified dimension of the data. Often the nodes are colored to show a separate dimension of the data. 

Filter

Treemap specific options:
Plot Data/Y-Axis Numeric Y Axis field to use
Y Axis Categories Categories - displayed vertically for a grid heatmap
Display Theme Background color of the chart (light or dark)

Timelines

Linear representation of events in the order in which they happened. Examples: IoT devices, Gantt Charts etc.

Filter

Timeline specific options:
Days of the screen The domain of the graph
Start time Where the timeline starts
End time Where the timeline ends
Group field Group field
Event type Event type
Display Theme Background color of the chart (light or dark)

Simple Threshold Visualization

Single data point visualization with color changes based on the values/threshold. Select the metric to monitor, enter a threshold value, choose the display color for when metric is <= the threshold, and choose the display color when the metric is > the threshold.

Single KPI with Change

This visualization allows users to compare the percent change of a metric with another metric. A user can:

  • Select the Metic to track (the field that will be displayed)
  • Select the Previous value (the value to compare the metric to)
  • Display the Percent Change calculation between the two values
  • Display the original value (optional)
  • Choose the up/down caret color (defaults to green/red)

For example, if you have a metric called "New Delivered", you can compare its % change (increase or decrease) with another metric "Delivered".

KPI

Anomaly

Line/Area chart that allows you to identify when a metric is behaving differently than it has in the past, taking into account trends, seasonal day-of-week and time-of-day patterns.

anomaly

Anomaly Detection Specific Options::
Plot data/Y-axis * Data to be displayed on chart
X-axis * Category displayed on the X-axis
X-axis Type Must be Date/Time
Anomaly Algorithm Anomaly Forecasting Algorithm (Default is Moving Average Model)
Anomaly Deviation Mean absolute percentage threshold setting (Default is 50)
Display Theme Background color of the chart (light or dark)

* = required field

Image Heat Map

Plot points on an image or diagram. Image must be accessible via a URL, and the data must contain two columns for X and Y coordinates.  Image Heat Map

Band Chart / Projections

Line chart with shaded areas for upper and lower bounds. This can also be used for projections, and includes an option for the projected value. Unlike the anomaly chart, the upper, lower, and projected value must be present (or pre-calculated) in this dataset.

Image Heat Map

Band Chart / Projections Specific Options:
X-axis * Must be Date/Time
Historical / Current Value * Category displayed on the X-axis
X-axis Type Y-Axis values, displayed as line chart
Projections Field with projected values, displayed as dotted line
Lower Boundary Field with lower boundary values
Upper Boundary Field with upper boundary values

* = required field ** = Both lower and upper boundary required for band to be displayed, individually displayed as a line

On Click Event Handler

This option is available for various visualizations. It is intended for defining custom javascript behavior when a data-representing point is clicked on the visualization. To access clicked point details use pointDetails object:

Example:

window.open('http://example.com?spam' + pointDetails.spam + '&sent='  + pontDetails.sent, '_blank')