asdfasdfsadf

Visualizations

Knowi offers over 30 visualization options.

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

Add Widget

Data Grid

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("",customer,"") 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 such as min, max, average, etc. on certain columns

Pivot

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

There are 6 operations available: sum, count, max, min, avg, tally (Note: 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 Maked columns shrink to fit widget width to eliminate hoprizontal 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

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

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

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

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

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

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

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

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 visualize the magnitude of flow between nodes in a network.

The plugin takes as input the nodes and weighted links, computing positions via iterative relaxation. After fixing the horizontal position of each node, the algorithm starts from the sources on the left, positioning downstream nodes so as to minimize link distance. A reverse pass is then made from right-to-left, and then the entire process is repeated several times. Overlapping nodes are shifted to avoid collision.

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.

Filter

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

Bubble

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

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

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

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

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 is a form of data visualization that helps in determining the cumulative effect of sequentially introduced positive or negative values.

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

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

Clusters geo locations into intelligent zoomable groupings (all the way into individual markers).

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

Filter

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

Geo Marker Heatmaps

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 Regions

Filter

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

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

Text display to showcase prominent words. The expected data must include a field that includes the text to analyze, and a size field that is used to determine the size of the word.

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 Widgets

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

Filter

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:

  • _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

Filter

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

Box plot (beta)

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
Date/Experiment ID
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 (beta)

Treemapping is a method for displaying hierarchical data by using nested rectangles.

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 (beta)

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)

Data Grid 2 (Beta)

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

?Data

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 such as min, max, average, etc. on certain columns
Internal Sparkline Charts Add Line, Area, Bar, Spline, Spline Area or Pie charts inside of the table

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.

Array

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

Sparkles

Simple Threshold (KPI)

This visualization allows for the simple tracking of your key metrics. A user can:

  • select the metric to monitor
  • enter a threshold value
  • choose the display color for when the metric is <= the threshold
  • choose the display color for when the metric is > the threshold

KPI

Image Heat Map (Beta)

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. 

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:

Filter