Presentation Dashboards For Kx How To Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 127
| Download | |
| Open PDF In Browser | View PDF |
Dashboards for Kx
“How to” Guide
Setup
Dashboards v4.0.1 – “How to” Guide
Kx.com
Getting Started
Login to Start
User: Administrator
Password: password
Dashboards for Kx – “How to” Guide
3
Layout
Components
Workspace
Component
Properties
Dashboard
Properties on Load
Dashboards for Kx – “How to” Guide
4
What’s in a Component Property?
The Property Panel is used to configure component
settings
In this document, screenshots of relevant sections of the
component will be used to illustrate where configurations
are required
Further information on configuring components
can be found at http://code.kx.com
Dashboards for Kx – “How to” Guide
5
Define the Basics
Name Your Dashboard
Set check mark in Fill Height
This will auto-fit your dashboard to
different browser sizes
Dashboards for Kx – “How to” Guide
6
Slide Panel Control
Slider Controls
Dashboards for Kx – “How to” Guide
7
Create a Connection – Access to HTMLEvalPack required - contact Kx
Click Connections to set up
database access
Dashboards for Kx – “How to” Guide
8
Dashboard Connection Settings
Connection 1
Name: html5eval_x
Type: kdb
Host: webdev
Port: 20070*
User: Administrator
Password: password
*Sample
Connection 2
Name: html5eval_y
Type: kdb
Host: webdev
Port: 20071*
User: Administrator
Password: password
Connection Group
Group Name: html5eval_grp
Type: Mastered
html5eval_x
html5eval_y
Port Numbers – ensure there is no clash with existing port connections
This step is optional. The Dashboard Eval Pack used for this tutorial uses the Connection Group:
htmlevalcongroup
Dashboards for Kx – “How to” Guide
9
FYI: When you want to create a New Dashboard
To create a dashboard, click
the New dashboard icon
Name your dashboard
Dashboards for Kx – “How to” Guide
10
Save a Dashboard
Save work regularly so as
not to lose changes
Dashboards for Kx – “How to” Guide
11
Duplicate a Dashboard
Duplicating a dashboard will
create an exact copy
Duplicated dashboard name
will have “(1)” appended at
the end
Dashboards for Kx – “How to” Guide
12
Open / Delete Dashboards
Manage Dashboards
Left-click
Dashboards for Kx – “How to” Guide
13
Export Dashboards
Export Dashboard
Left-click
Dashboards for Kx – “How to” Guide
14
Import Dashboards
Import Dashboard
Dashboards for Kx – “How to” Guide
15
Add a Data Grid Component
Dashboards for Kx – “How to” Guide
Kx.com
Drag a Component into the Workspace; e.g. Data Grid
Left-click-and-drag a
component into the workspace
Dashboards for Kx – “How to” Guide
17
Configure Properties of a Data Grid
Left-click inside box
Selected component will have a light
blue border
Dashboards for Kx – “How to” Guide
Define a Data Source; left-click inside
the input box to edit
18
Create New Data Source: GroupName
Click on New to create a
Data Source
Give Data Source a name;
default is “New Node”
Name: GroupName
Dashboards for Kx – “How to” Guide
19
What’s in a Data Editor?
Connections Set Up
Database Name
Database type
Check to enable Pivot and
Update Queries
Text-based q Editor
Or select predefined Analytic
Set Data Source update
frequency
Successful data query will
populate results in this panel
Dashboards for Kx – “How to” Guide
20
Sample Data Example: GroupName
Cut-and-paste* into Editor the following:
tab:flip
`Date`Kieran`George`Ivan`Conor`Tomas`Scott`Hugh`Niall!(2015.01.04
2015.01.05 2015.01.06 2015.01.07 2015.01.08;12.05 5.1154 8.554
7.1254 3.14478;2.145 5.144 11.587 0 1.0114;3.114 5.1145 0.1447
2.0445 1.255;8.1545 0 2.15465 5.1456 9.1544;11.5465 0 5.54456 3.224
11.574;0 1.254654 3.55 2.414 5.14;0 1 1 1 0;2.55 14.5 11.021 0 0)
Because this is a self-contained query, the database
connection doesn’t matter.
If you are pulling data from a database, ensure the
database connection is correct.
* When doing a cut-and-paste of queries into the editor watch
for line-breaks on new rows which may break the query; delete to
remove. Hand-typing a query will prevent this.
Dashboards for Kx – “How to” Guide
21
Execute a Data Source
Important to populate data using the correct order:
1. Execute
2. Apply
3. Select Item
Dashboards for Kx – “How to” Guide
22
Executed Data Populates The Data Grid
Click Preview to test your Dashboard
Dashboards for Kx – “How to” Guide
23
Try This: Sourcing Data from a kdb+ database
• Name: DataGridData
• Connect to html5eval_grp (or html5evalcongroup)
• Max Rows: 1,000
select Type, Month, Group, Return, PerReturn, OpenDate, CloseDate
from TradeData
If doing a cut-and-paste of queries into the editor
watch for line-breaks which can break the query;
delete these line-breaks will restore functionality.
Hand-typing a query will prevent this.
• Execute -> Apply -> Select
DataGridData
Data Grid
Dashboards for Kx – “How to” Guide
24
Customize Data Grid
Dashboards for Kx – “How to” Guide
Kx.com
Configure Search Options for GroupName: Default is Quick Search
Toggle through Filter options
Dashboards for Kx – “How to” Guide
26
Optimize Column Widths to Best Display Data
Change Width (relative) to best display data
How does Width (relative) work?
Width (relative) applies a scale across all data columns. If Width (relative) is set to “1”; i.e. same value, then each column will have the same
width.
However, if one column is set to “2”, then the relative width of the column will change, contingent on the total number of columns displayed.
For example:
Width (relative) for a five column data grid is “2”, “1”, “1”, “1”, “1”.
Total Width (relative) = 2+1+1+1+1 = 6
Relative width for each column is therefore: Width (relative) / Sum of Width (relative)
Relative width = (2/6), (1/6), (1/6), (1/6), (1/6)
Relative width = 33%, 16%, 16%, 16%, 16%
Note: Min Width (px) will also influence Width (relative). Set Min Width (px) to zero for all columns if only Width (relative) is to be used
Dashboards for Kx – “How to” Guide
27
Define Column Data Types
Column 1 Date = Format: Date and Date Format: DD/MM/YYYY and Width (relative): 15
Columns 2-9 = Format: Formatted Number and Precision: 2 and Width (relative): 10
Dashboards for Kx – “How to” Guide
28
Set Min / Max value for a numeric column
Left-click color bar
Click-select base color
in color bar
Click-select colour
tone inside palette
…Or enter a Hex color
Set Min/Max Value color for each column
Dashboards for Kx – “How to” Guide
29
Apply CSS to Data Grid Header
Step: 1
Step: 2
Left-click
Step: 3
Left-click
Left-click
Step: 4
Add CSS: e.g. “color:red;”
Step: 5
Step 6: RESULT:
Dashboards for Kx – “How to” Guide
Left-click
30
Use Template to Apply Format to Column
Step: 1
Step: 2
Left-click
Step: 3
Set font color for Date column. Remember to enclose variable name inside {{ }} as it appears in database
Template formats will
overwrite any highlight rules
applied to the column
Left-click
Dashboards for Kx – “How to” Guide
31
Check out Data Grid Properties
Dashboards for Kx – “How to” Guide
32
Data Grouping Example
Groupings are done by Data Source columns.
Groupings can include pre-determined calculations
of dependent data
Dashboards for Kx – “How to” Guide
33
Try This: In DataGridData
•
•
•
•
•
•
•
For: DataGridData
Ensure each column has a valid Display Name; e.g. PerReturn = “% Return”
Format Month and Return at Precision: 0
Format PerReturn as Percentage
Apply a Range Color to Return
Set a Negative Color to Return
Create a Summary Grouping for Type and Group
• Create a Summary Row for Grouping for Avg Return
Dashboards for Kx – “How to” Guide
34
Adding Input Parameters
Dashboards for Kx – “How to” Guide
Kx.com
Parameter Query
• Create a new query: DataGrid2
• Connect to html5eval_grp (or html5evalcongroup)
• Add the following query
{[trade;mnth;asset] select Type, Month, Group, Return, PerReturn, OpenDate, CloseDate
from TradeData where Type=trade, Month=mnth, Group=asset}
• Use pre-set values for added query Parameters:
• trade is Type symbol and Value = Long
• mnth is Type int and Value = 12
• asset is Type symbol and Value = Forex
• Execute -> Apply -> Select
Dashboards for Kx – “How to” Guide
36
DataGrid2 : Data Editor View
Added Parameters will appear
below the data editor
Dashboards for Kx – “How to” Guide
37
Map Query Parameters to Dashboard View State Parameters
Rollover to view Icons
Click the Eye icon+ to map the query
parameter to a dashboard View State
Parameter
Dashboards for Kx – “How to” Guide
38
Set Dashboard View State Parameter Defaults
View State Parameter
Type
Value
Trade
symbol
Long
mnth
int
12
asset
symbol
Forex
Click the Eye icon open the View State
Parameter menu
Ensure the correct Type is
assigned to your data
Set a Default Value which will carry to
the Value (filled on load)
Repeat for mnth and asset
Dashboards for Kx – “How to” Guide
39
Assigned View States for DataGrid2
Dashboards for Kx – “How to” Guide
40
DataGrid2
Use Column Formats to improve the visual look of the Data Grid
Dashboards for Kx – “How to” Guide
41
Add New Components: Data Form
Dashboards for Kx – “How to” Guide
42
Configure: Data Form
DataGrid 2 applied to Data Source of
Data Form
Data Form will use default values of View State Parameters to populate Data Form input boxes.
Dashboards for Kx – “How to” Guide
43
Test Data Form Inputs
Asset
Mnth
Trade
Forex
12
Long
Commodity
11
Short
Equity
10
9
8
7
6
5
4
3
2
Dashboards for Kx – “How to” Guide
44
Use Dropdown component with a Data Source
Step: 1
Click-and-drag in a Drop Down component
Step: 2
Create a Data Source which parses the individual categories – in this case, Month
Cut-and-paste into Dropdown Data Source Editor (html5evalcongroup)
([]Month: asc exec distinct Month from TradeData)
Step: 3
Map the Selected Value of the dropdown to the View State Parameter of Mnth used by DataGrid2
Continued…
Dashboards for Kx – “How to” Guide
45
Use Dropdown component with a Data Source
Step: 4
Set the Data Source Mapping
Alternative
Value and Text can be separate
columns if defined in Data Source
Step: 5
Step: 1
Set Selected Value to View State
Parameter to DataGrid2 Mnth
Preview
Step: 2
Uncheck Use Data Source
Step: 3
Define Items: Values and Text
Change label size, dropdown width and description
Use Selected Row Viewstate Routing to assign selected
value to other view state parameters
Dashboards for Kx – “How to” Guide
46
Use Text Input component with a View State Parameter
Step: 1
Click-and-drag in a Text Input component
Step: 2
Map the Selected Value to the View State Parameter, Mnth used
by DataGrid2
Left-click
Step: 3
Preview
User has freedom to input any value; out of range values will return a
blank Data Grid
Dashboards for Kx – “How to” Guide
47
Try This for DataGrid2
• Using DataGrid2 configure a Dataform to use a dropdown for each View State of
mnth, asset and trade
Data Form
DataGrid2
Data Grid
Dashboards for Kx – “How to” Guide
48
Row Selection
Dashboards for Kx – “How to” Guide
Kx.com
Row Selection: Data Grid populating View State Parameters
Step: 1
Open GroupName Data Grid
Step: 2
Create View State Parameters for each user
Use Type: Float
Continued…
Dashboards for Kx – “How to” Guide
50
Row Selection: Data Grid populating View State Parameters, presented in a Text component
Step: 3
Enable Row Selection in
GroupName Data Grid
Step: 4
Add a Text component and Link to a named
Viewstate
Step: 5
Preview: Select Row
Click-on-row
In Selected Row
Viewstate Routing
map Data Source
Column to named
Viewstate
Dashboards for Kx – “How to” Guide
Text Component
51
Try This for GroupName
• Create a view state routing for each named individual
• Associate each view state with a text output, so user can view values for each
user when a row is selected.
GroupName
Data Grid
Dashboards for Kx – “How to” Guide
Name 1
Name 2
Name 3
Name 4
Text Component
Text Component
Text Component
Text Component
52
Date Picker
Dashboards for Kx – “How to” Guide
Kx.com
Date Picker: New Queries SourceDate and DateRange
Support for date picker requires a little modification to the query to support a date range. Create two new
data sources:
• Create Data Source: SourceDate
• Connection: html5eval_grp (or html5evalcongroup)
([]start: asc exec distinct OpenDate from TradeData)
• Create Data Source: DateRange
• Connection: html5eval_grp (or html5evalcongroup)
{[start;end] select Type, Month, Group, Return, PerReturn, OpenDate, CloseDate from
TradeData where OpenDate within (start;end)}
• Map query parameters, start and end to dashboard view states: start and end
Dashboards for Kx – “How to” Guide
54
Queries SourceDate and DateRange
Viewstate for start and end
should be of Type: Date
Dashboards for Kx – “How to” Guide
55
Add a Data Grid and Two Date Pickers
Step: 1
Step: 3
Connect Data Source and Dashboard Viewstate parameter for each picker
Add Two Date Pickers to the Dashboard
Step: 2
Add Data Grid: DateRange
Dashboards for Kx – “How to” Guide
Step: 4
In Preview mode, change Start and End Dates (Feb-Dec 2015)
56
Pivot Grid & Breadcrumbs
Dashboards for Kx – “How to” Guide
Kx.com
Pivot Grid: New Query PivotData
Pivot Grids create data groupings (independent variables) with summary statistics from dependent variables;
e.g. sum, average, count, min and max values. Navigation is controlled using the Breadcrumbs component.
• Create Data Source: PivotData
• Connection: html5eval_grp (or html5evalcongroup)
select Type, Month, Group, Return, PerReturn, OpenDate, CloseDate from TradeData
• Check Pivot Query
Breakdown Cols: Type, Month, Group
Aggregates (avg): Return, PerReturn
Dashboards for Kx – “How to” Guide
58
Complete Date Editor: PivotData
Left-clickdrag to
increase
viewable
area
Dashboards for Kx – “How to” Guide
59
Linking Pivot Grid to Breadcrumbs
Step: 1
Drag a Pivot Grid and
Breadcrumbs component
into dashboard
Step: 3
Step: 4
Step: 2
Create a Viewstate called selected of type symbol. Map to
Focus property of Pivot Grid.
Link selected property to Path of Breadcrumbs
Configure Pivot Grid as
PivotData
Continued…
Dashboards for Kx – “How to” Guide
60
Preview Pivot Grid and Breadcrumbs Interaction
Left-click
Dashboards for Kx – “How to” Guide
61
Return to Home
Left-click
Dashboards for Kx – “How to” Guide
62
Try This
• Create a Pivot Query, “DemoDrill”, from (connect to html5evalcongroup):
{`sym`src`hour`minute xcols 0!select quoteCount:count i,quoteSpread:10000*avg
(ask-bid),quoteSize:avg (bsize+asize)%2 by hour:`$string time.hh,minute:`$string 10
xbar time.minute, sym,src from dfxQuote where sym in exec distinct sym from
dfxTrade}[]
Breadcrumbs
DemoDrill
Pivot Grid
Hint: Query from DemoDrillDown dashboard
Dashboards for Kx – “How to” Guide
63
Bar Chart
Dashboards for Kx – “How to” Guide
Kx.com
Visualising PivotData
Add Visuals to Data.
• Use Data Source: PivotData
• Connection: html5eval_grp (or html5evalcongroup)
select Type, Month, Group, Return, PerReturn, OpenDate, CloseDate from TradeData
• Breakdown Cols: Type, Month, Group
• Aggregates: Return, PerReturn
• Keep Breadcrumbs component; required for data navigation in Chart
Dashboards for Kx – “How to” Guide
65
Visualising PivotData
Step: 1
Drag Bar Chart inside
dashboard
Step: 3
Step: 4
Step: 2
Add Breadcrumbs component (if not already). Create a linking
viewstate called selected (Type: Symbol); share with Bar Chart
Test Interactions in Preview
Configure Bar Chart as
PivotData
Left-click
Dashboards for Kx – “How to” Guide
66
Mapping Bar Chart variables to Dashboard Viewstates
Step: 1
Click
Step: 2
Step: 3
Link Chart Data Source variables
to Dashboard Viewstates
Viewstate
Type
Month
Int
Type
Symbol
Group
Symbol
Return
Float
PerReturn
Float
Display Viewstate values in a Text
component; add 5 components.
Configure a Text component for
viewstates: Month, Type, Group, Return
and PerReturn (% Return)
Dashboards for Kx – “How to” Guide
67
Interacting with Bar Chart; values assigned to Viewstates
Left-click
Preview to test
interactions and
populate Text
component
Left-click
Use Text component Titles
in Format menu to add
text header label
Dashboards for Kx – “How to” Guide
68
Change Bar Chart colors
Step: 1
Bar chart colors are displayed
in order from top to bottom
Step: 2
Left click to bring up palette
menu
Step: 3
Color Assigned
Left-click
Left-click
Or enter Hex color reference
Alternative
Assign a color to a Viewstate; use Hex color
Hex color: #4fa652
Left-click
Dashboards for Kx – “How to” Guide
69
Component Linking
Dashboards for Kx – “How to” Guide
Kx.com
Link Components to Share Interactions*
Add Components:
Go To ‘Focus’ property
Create Parameter ‘Link’
*Components must share same Data Source; e.g. PivotData
Dashboards for Kx – “How to” Guide
71
Test Interactions
Go to ‘Preview’ mode and test Dashboard
All linked
Components will
update when one is
changed
Dashboards for Kx – “How to” Guide
72
Try This
• Link a Pivot Grid, Bar Chart, Breadcrumbs and Treemap for “DemoDrill”:
{`sym`src`hour`minute xcols 0!select quoteCount:count i,quoteSpread:10000*avg
(ask-bid),quoteSize:avg (bsize+asize)%2 by hour:`$string time.hh,minute:`$string 10
xbar time.minute, sym,src from dfxQuote where sym in exec distinct sym from
dfxTrade}[]
Breadcrumbs
DemoDrill
Bar Chart
DemoDrill
Pivot Grid
DemoDrill
Treemap
Hint: Refer to code.kx.docs for information on configuring the Treemap component
Dashboards for Kx – “How to” Guide
73
Highlight Rules
Dashboards for Kx – “How to” Guide
Kx.com
Highlighting Change in Your Data
Highlight rules help direct users to changes and updates in their data. It’s best used with streaming and polling
data
• Use Data Source: LatestPrices
• Connection: html5eval_grp (or html5evalcongroup)
{[symval] `src xasc select last bsize, last bid, last ask, last asize by src from dfxRandomQuote where
sym=symval}
• Map symval to viewstate, symChoice. Set Default symChoice to EUR/USD
• Set Subscription to Polling, 1 second. Part of Query Editor.
Ensure data is polling, managed or streamed for highlights rule to update
Dashboards for Kx – “How to” Guide
75
Highlighting Change in Your Data: Bid
Step: 1
Drag Data Grid inside
dashboard
Step: 3
Create a Highlight Rule for Bid: Value greater than previous value
Left-click
Step: 2
Configure query
LatestPrices for EUR/USD
Continued…
Dashboards for Kx – “How to” Guide
76
Highlighting Change in Your Data: Ask
Step: 4
Create a Highlight Rule for Bid: Value less than previous value
Step: 5
Repeat Rules for Ask
Left-click
Alternative
Background Color: changes cell color
Border Color: changes cell border color
Icon: Select from Icon menu, icon will appear
when highlight rule is true
Icon Color: Select color of icon to appear
when rule is true
Dashboards for Kx – “How to” Guide
77
Preview to see Highlight rules in action
Dashboards for Kx – “How to” Guide
78
Try This
• Using LatestPrices query, add a Dropdown component to feed symbols:
EUR/USD, GBP/USD, USD/CAD, USD/CHF and USD/CHF into symChoice
• Apply Red and Green Range color to columns A(sk)size and B(id)size respectively
• Apply Red and Green Max color to Ask and Bid columns
• Add Bar and Horizontal chart; use chart highlight rules to mark change
Dropdown
LatestPrices
Bar Chart
LatestPrices
Data Grid
LatestPrices
Horizontal Chart
Hint: Query from DemoMarketMakers dashboard. See code.kx.docs for more information on configuring Horizontal charts
Dashboards for Kx – “How to” Guide
79
Multi-Chart
Dashboards for Kx – “How to” Guide
Kx.com
Multiple Chart overlays
Dashboard’s Multi-chart allows for different chart types including bar, bubble, candlesticks and lines to be
overlaid on a single chart. Includes dual axis support.
• Use Data Source: TradingPerformance
• Connection: html5eval_grp (or html5evalcongroup)
`Date xasc select Date, Open, Day0_Close, Day0_Ret, Day0_Cumu, Day0_StepFcast from ChartDNA
Dashboards for Kx – “How to” Guide
81
Configure Multi-Chart
Step: 1
Drag Multi Chart inside
dashboard
Step: 3
Add a Line Chart
Left-click
Step: 2
Configure query
TradingPerformance
Add prices for S&P Index. Update
color to #458568 and add Legend
name
Continued…
Dashboards for Kx – “How to” Guide
82
Configure Multi-Chart
Step: 4
Add a second Line chart
for Trade Return
Step: 5
Fix x-axis formatting
Step: 6
Fix y-axis formatting: left
Chart Trade Return on the right axis
Single adjustment of left decimal places
Continued…
Dashboards for Kx – “How to” Guide
83
Configure Multi-Chart
Step: 7
Fix y-axis formatting: right
Dashboards for Kx – “How to” Guide
Step: 8
Format Chart
84
Try This
• Add an Overlay data source (connection: html5evalcongroup)
`Date xasc select Date, Day4_Cumu from ChartDNA
• Change the chart type for Day0_Cumu to show fill while not obscuring S&P
prices
• Apply a date range filter to Multi-chart
Dashboards for Kx – “How to” Guide
85
Zoom and Pan
Dashboards for Kx – “How to” Guide
Kx.com
Zoom and Pan
Zoom and Pan provides built-in navigation focus. The zoom-and-pan range can be paired with dashboard
viewstates and used as filters in other dashboard queries.
• Create Data Source: ZoomandPan
• Connection: html5eval_grp (or html5evalcongroup)
`Date xasc select Date, Open from ChartDNA
Dashboards for Kx – “How to” Guide
87
Configure Zoom and Pan
Step: 1
Drag Multi Chart inside
dashboard
Step: 3
Add a Line Chart
Left-click
Step: 2
Dashboards for Kx – “How to” Guide
Configure query
ZoomandPan
88
Configure Zoom and Pan
Step: 4
Switch on Zoom / Pan
Left-click-drag
Create Viewstate parameters for Min
Zoom and Max Zoom
Text component displaying viewstates, start and end
Dashboards for Kx – “How to” Guide
89
Range Slider
Dashboards for Kx – “How to” Guide
Kx.com
Breadcrumbs for Charts: Range Slider
Similar to Pan-and-Zoom, Range Slider is a separate component which is paired with a chart and can be used
to control the amount of data to display. It’s paired with a chart similar to how Breadcrumbs works.
• Use Data Source: ZoomandPan
• Connection: html5eval_grp (or html5evalcongroup)
`Date xasc select Date, Open from ChartDNA
Dashboards for Kx – “How to” Guide
91
Breadcrumbs for Charts: Range Slider
Step: 1
Drag Range Slider inside dashboard
Step: 2
Add a Multi-Chart to the dashboard
Step: 3
Dashboards for Kx – “How to” Guide
Step: 4
Likewise, configure the Range Slider
to use ZoomandPan data source.
Step: 5
Set X-Axis for Date for Range Slider
Configure the Multi-Chart to use
ZoomandPan data source; create a
line chart for Open price
92
How It Looks So Far
Multi-Chart
Range Slider
Dashboards for Kx – “How to” Guide
93
Link Range Slider to Multi-Chart
Step: 6
Dashboards for Kx – “How to” Guide
Format Y-Axis
Step: 7
Create viewstate, “chartlink” of type Symbol
Step: 8
Link Range Slider to Multi-Chart using Range property
94
Try This
• Set Viewstate for Selected Min and Selected Max property
• Add a Data Grid. Configure it to display the values of the Range Slider
• Add a second Multi-chart; have it use the data source (TradePerform):
`Date xasc select Date, Day4_Cumu, Day3_Cumu, Day2_Cumu, Day1_Cumu, Day0_Cumu from
ChartDNA
• Configure the second Multi-chart to display Day4_Cumu, Day3_Cumu,
Day2_Cumu, Day1_Cumu, Day0_Cumu (“Trade Performance for days 0 to 4”).
Connect it to the Range Slider
TradePerform
Multi-Chart
ZoomandPan
Data Grid
Dashboards for Kx – “How to” Guide
ZoomandPan
Multi-Chart
ZoomandPan
Range Slider
95
Try This
• Create a set of Highlight Rules to Show Changes in VWAP
Dashboards for Kx – “How to” Guide
96
Navigation
Dashboards for Kx – “How to” Guide
Kx.com
Navigation: Jumping between dashboards
The Navigation component allows users to navigated between
different dashboards, and different screens in the same
dashboard. Viewstates can be shared across dashboards so
information from one can be passed into another.
Dashboards for Kx – “How to” Guide
98
Add Screens to support multiple dashboard views in a single dashboard
Step: 1
Step: 2
First create additional
screens within the parent
dashboard; these can be
populate with earlier
examples (optional)
Left click-and-drag the
Navigation component
into Screen 1
The star sets the
default screen to
use on load
Each Screen can be its own
dashboard with
components. For example,
each “Try Me” tutorial in
this document could be
done as a screen
Left-click
Dashboards for Kx – “How to” Guide
Continued…
99
Configure Button Style
Step: 3
Add three Navigation
buttons
Step: 4
Configure individual button links
Left-click
Dashboards for Kx – “How to” Guide
100
Global vs Individual Button Styles
Step: 5
Change macro button styles; applied across all buttons
Step: 6
Style Individual Buttons
Add a Navigation Component to each screen and dashboard
Use the keyboard cut-and-paste shortcut (CTRL+C / CTRL+V) to copy components within and
across Dashboard screens.
Dashboards for Kx – “How to” Guide
101
Alternatives
Alternative
Alternative
Alternative
Flexible Button Width
Navigate to other Dashboards
Share View States Across Dashboards
Step: 1
Uncheck Fixed Size
Step: 2
Set Columns to number of
buttons to display
Step: 1
Select from Dropdown
Match dashboard viewstates to
destination dashboard viewstates
Left-click
It’s necessary to create in the
destination dashboard viewstates
which match the name of the Target
A Column value of ‘1’ will stack buttons
Dashboards for Kx – “How to” Guide
102
Try This
• Create a Navigation Panel using a Data Source, and map a View State so a value
from one dashboard is displayed in another.
There is no example in Html5evalcongroup which has a Navigation panel. This may require a local kdb connection for the Data Source
Data Source should include
variables for items listed
Dashboards for Kx – “How to” Guide
103
Tabs, Accordions & Layout Panels
Dashboards for Kx – “How to” Guide
Kx.com
Building Depth to Dashboards
Tabs, Accordion and Layout Panel allow for additional
functionality and space inside a single Dashboard screen
Dashboards for Kx – “How to” Guide
105
Adding a Tab
Step: 1
Drag the Tab component into the
dashboard
Step: 2
Add a new tab, and rename existing
tabs
Step: 3
Select the first tab (“Setup”) and drag
inside the Accordion component
Left-click
Dashboards for Kx – “How to” Guide
106
Adding an Accordion inside a Tab
Step: 4
Add a second section to the Accordion panel:
When working with Accordion sections, it’s best to keep them in expanded mode so layout panel or
components can be added to them.
Left-click
Dashboards for Kx – “How to” Guide
107
Adding an Layout Panel inside an Accordion section
Step: 5
Switch Accordion view to Horizontal for vertical controlled accordion slider
Step: 6
Add a Layout panel to each Accordion section
Dashboards for Kx – “How to” Guide
108
Add components inside the Layout Panel
Step: 7
Add components to your Layout section
No Layout Panel is required if a Tab or Accordion section is only to house one component; simply drag-and-drop the component inside the Tab or
Accordion section and the component will automatically resize to fill the Tab or Accordion panel.
Dashboards for Kx – “How to” Guide
109
Have added components fill out layout panel
Step: 8
In Layout Panel, check Fill Height for components to fill the space of the Layout panel
Alternative
Advanced Layout will stack components;
good for dashboards configured for
mobile use
Blank Space
Once checked, it can be difficult to
re-select the layout panel to make
changes (1 px width selection area).
Therefore, check this box as a last
step when building dashboards
Dashboards for Kx – “How to” Guide
110
Tab and Accordion Alternatives
Alternative
Alternative
Alternative
Viewstate shared control of Tabs
Button control to open a particular Tab
Accordion Expand control bound to Viewstate
Step: 1
Assign a viewstate to
Selected Tab
Step: 2
Add a Second Tab
Component
Step: 3
Step: 4
Assign the second tab
component Selected Tab the
same viewstate
Switch between tabs of
either Tab component
Left-click
Dashboards for Kx – “How to” Guide
Step: 1
Step: 2
Step: 3
Assign a viewstate to
Selected Tab
Add a Button Component
anywhere to the dashboard
Set Button View State
Mapping; ‘0’ = Tab 1
Step: 1
Assign a viewstate to
Accordion expand
Step: 2
Add a second Accordion
Step: 3
In the second Accordion,
assign Expanded the
viewstate
Step: 4
Expand paired section
A Button can also be used to control
expansion. In Button View State
Mapping set Target to
and Current to “True”
111
Bring it Together
Dashboards for Kx – “How to” Guide
Kx.com
Try This: DemoLiquidity
Rebuild
Dropdown
Line Chart
Bar Chart
Multi-Chart I
Multi-Chart II
Component
All connect to html5evalcongroup
Dropdown
([]sym:asc exec distinct sym from dfxTrade)
Multi-Chart
Bar Chart
{[symval] `minute xasc select avg bid,avg ask, bidvol:max(0;sum bsize)%1e06, askvol:max(0;sum asize)%1e06 by 5 xbar time.minute from dfxQuote where sym=symval}
Multi-Chart I
{[symval] `minute xasc select price:avg bid,vol:(avg bsize) by 5 xbar time.minute from dfxQuote where sym=symval}
Multi-Chart II
{[symval;side] -500 sublist $[side=`bid;select price:avg bid,size:avg bsize by time.second from dfxQuote where sym=symval;select price:avg ask,size:avg asize by time.minute from
dfxQuote where sym=symval]}
Dashboards for Kx – “How to” Guide
113
Try This: DemoMarketMakers
Rebuild
Dropdown
Bipartite Chart
(Use lessons learned to configure)
Horizontal Chart
(Use lessons learned to configure)
Data Grid I
Data Grid 2
Component
All connect to html5evalcongroup
Dropdown
([]sym:asc exec distinct sym from dfxTrade)
Bipartite Chart
{[symval] select src,quoteCountPct:100*numQuotes%sum numQuotes,
tradedVolPct:100*size%sum size,spread from t:(select numQuotes:sum i,size:sum
"f"$size by src from dfxTrade where sym=symval) lj select spread:10000*avg (askbid) by src from dfxQuote where sym=symval}
Horizontal Chart
Data Grid I
Data Grid II*
{[symval] `src xasc select last bsize,last bid,last ask,last asize by src from dfxRandomQuote where sym=symval}
* Poll data at 1 second intervals
Dashboards for Kx – “How to” Guide
114
Try This: DemoMarketShare
Rebuild
Dropdown
Multi-Chart
Line Chart
Treemap
Area Chart
Component
All connect to html5evalcongroup
Dropdown
([]sym:`All,asc exec distinct sym from dfxTrade)
Multi-Chart
{[symval] select vol:sum (`float$size)%1e6,avg price,avg spread by src from $[symval=`All;dfxTrade;select from dfxTrade where sym=symval] lj select spread:1000*avg(ask-bid) by
sym,src from dfxQuote}
Line Chart
{[symval] `minute xasc (select distinct minute from t) pj/ {[t;x] ?[select from t where src=x;();(enlist `minute)!enlist `minute;(enlist x)!enlist (last;`spread)]}[t;] each exec distinct src
from t:select spread:1000*avg (ask-bid) by src,5 xbar time.minute from $[symval=`All;dfxQuote;select from dfxQuote where sym=symval]}
Treemap
dfxTrade (Breakdown: sym and src; avg-> size and avg -> price)
Area Chart
{[symval] `minute xasc (select distinct minute from t) pj/ {[t;x] ?[select from t where src=x;();(enlist `minute)!enlist `minute;(enlist x)!enlist (last;`vol)]}[t;] each exec distinct src from
t:select vol:sum (`float$size)%10e6 by src,5 xbar time.minute from $[symval=`All;dfxTrade;select from dfxTrade where sym=symval]}
Dashboards for Kx – “How to” Guide
115
Try This: DemoDrillDown
Rebuild
Breadcrumbs
Multi-Chart
Pivot Grid
Treemap
Bar Chart
Linechart
Component
All connect to html5evalcongroup
Pivot Grid
{`sym`src`hour`minute xcols 0!select quoteCount:count i,quoteSpread:10000*avg (ask-bid),quoteSize:avg (bsize+asize)%2 by hour:`$string time.hh,minute:`$string 10 xbar
time.minute, sym,src from dfxQuote where sym in exec distinct sym from dfxTrade}[]
Multi-Chart
{[filters] filters:raze `$"," vs string .c.f:filters; :.c.res:select quoteCount:count i,quoteSpread:10000*avg (ask-bid),quoteSize:avg (bsize+asize)%2e6 by 5 xbar time.minute from
$[0=count filters;dfxQuote;1=count filters;$[null first filters;dfxQuote;select from dfxQuote where sym=first filters];2=count filters;select from dfxQuote where
sym=filters[0],time.hh="I"$string filters[1];3=count filters;select from dfxQuote where sym=filters[0],time.hh="I"$string filters[1],src=filters[2];()]}
Horizontal Chart
{[filters] filters:raze `$"," vs string .c.ttf:filters; :select avg price,sum size%1e6 by 5 xbar time.minute from .c.t:$[0=count filters;dfxTrade;1=count filters;$[null first
filters;dfxTrade;select from dfxTrade where sym=first filters];2=count filters;select from dfxTrade where sym=filters[0],time.hh="I"$string filters[1];3=count filters;select from
dfxTrade where sym=filters[0],time.hh="I"$string filters[1],src=filters[2];()]}
Treemap
{`sym`src`hour`minute xcols 0!select quoteCount:count i,quoteSpread:10000*avg (ask-bid),quoteSize:avg (bsize+asize)%2 by hour:`$string time.hh,minute:`$string 10 xbar
time.minute, sym,src from dfxQuote where sym in exec distinct sym from dfxTrade}[]
*
Data Grid
`src xasc select last bsize,last bid,last ask,last asize by src from dfxRandomQuote where sym=symval}
Dashboards
forIIKx – “How to”{[symval]
Guide
116
Try This: Multi-screen & Tab
Navigation Component: Market / Liquidity / Drill down jump point
Tab 1: Market Share
Tab 2: Market Maker
Tab Dashboards (Use Layout Panel)
Dashboards for Kx – “How to” Guide
117
Demo POC presentation
Dashboards for Kx – “How to” Guide
Dashboards for Kx – “How to” Guide
118 Kx.com
q install
Dashboards for Kx – “How to” Guide
Kx.com
Install local kdb
1. Download kdb: http://kx.com/software.php
2. Export to a C:\ directory to a q drive
3. Open CMD Prompt
•
cd c:\
•
Cd q
•
Cd w32
•
q –p 5050
Dashboards for Kx – “How to” Guide
121
Create a Kdb file
1. Create a directory [Data] in q directory
2. Save or copy csv files to this directory
3. At q> prompt (in CMD window), run the data import; for example
•
PivotData: ("ZSSSJDSDSSSSSSSSSSSSSFSSFFFFFFFFFFFF"; enlist ",") 0: `:/q/data/PivotData.csv;
Dashboard file name: (“column formats”; enlist “,”) 0: ‘:/source file name & address;
Dashboards for Kx – “How to” Guide
122
Install QPad
1. Install 64-bit QPad from http://www.qinsightpad.com/
2. Run
Dashboards for Kx – “How to” Guide
123
Configure QPad
1. Connect to Server:localhost on port 5050
2. Write into the editor
.pivot.pivotV3:{[t;w;d;a;f;n;o]
piv: () xkey ?[t;w;d!d;a!f];
if [(count o)>0;
[
field: o[0];
order: o[1];
piv:$[order>0;field xasc piv;field xdesc piv];
]
];
$[n<=0;piv;n#piv]};
Dashboards for Kx – “How to” Guide
124
Configure QPad
1. Run
2. Add Data with; for example:
PivotData: ("ZSSSJDSDSSSSSSSSSSSSSFSSFFFFFFFFFFFF"; enlist ",") 0: `:/q/data/PivotData.csv;
Dashboards for Kx – “How to” Guide
125
Create a connection for localhost
1. In Dashboards, create a connection for localhost
Host: is PC name (e.g. wks254). Do not use “localhost” for Host
Dashboards for Kx – “How to” Guide
126
Set dropdown query connection to Localhost
1. In the Dropdown, select database connection
Connect to your newly added (local) kdb server
Dashboards for Kx – “How to” Guide
If using a local
connection, Control
for Kx specific apps,
Action Tracker, and
Order Book Replay
won’t be configurable
127
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.5 Linearized : No Language : en-GB Tagged PDF : Yes XMP Toolkit : Adobe XMP Core 5.6-c015 84.159810, 2016/09/10-02:41:30 Format : application/pdf Creator : Michael Wilson Title : PowerPoint Presentation Create Date : 2017:09:13 11:55:19+01:00 Creator Tool : Microsoft® PowerPoint® 2010 Modify Date : 2018:02:06 10:02:35Z Metadata Date : 2018:02:06 10:02:35Z Producer : Microsoft® PowerPoint® 2010 Document ID : uuid:a0342af3-2921-49c8-b145-624d4506bc8f Instance ID : uuid:62c6e1dd-0a6e-406a-b0b8-19a9eb9ff29c Page Count : 127 Author : Michael WilsonEXIF Metadata provided by EXIF.tools