This document provides a summary of a presentation about visualizing large data sets with Wijmo Enterprise. The presentation covers an introduction to Wijmo, challenges of web development today, techniques for visualizing large datasets using Wijmo charts and grids, and includes live demos. Specifically, it discusses how to optimize charts for large datasets, use grids to visualize large amounts of data, handle the data layer with CollectionView, and visualize qualitative data with annotations and drill-down capabilities.

1. Hi
1

2. Visualizing Large Data Sets With Wijmo Enterprise
Approaches and Experiences
Ross Dederer
Wijmo

3. About Me
 Ross Dederer
 Wijmo
 Pittsburgh, PA
 Developer Relations
 Have background in complex Reporting software
 ActiveReports
3

4. What I will talk about/Agenda
 Introduction of Wijmo and a history of the product.
 Web Development focuses and challenges today
 How to visually optimize a chart for large dataset
 How to use a grid control to visual large amounts of data.
 Live Demos
4

5. Wijmo Enterprise
5

6. What is Wijmo 5?
 JavaScript UI Controls
 Zero dependencies
 Specialize in data grids and charts
 Includes the famous FlexGrid control
 Focus on performance
 Small core controls and extensible
 Offer additional features as optional extensions
6

7. What Makes Wijmo 5 Special?
 True Controls (Control Classes like in .NET)
 Not Widgets
Control
//Initialize
var myFlexGrid = new wijmo.grid.FlexGrid('#myFlexGrid');
//Show Row Headers
myFlexGrid.headersVisibility = wijmo.grid.HeadersVisibility.All;
Widget
//Initialize
$('#mywijgrid').wijgrid();
//Show Row Headers
$('#mywijgrid').wijgrid('option', 'showRowHeader', true);
7

8. Wijmo 5: Architecture
Core
wijmo.js/css
FlexGrid
wijmo.grid.js
FlexChart
wijmo.chart.js
Gauge
wijmo.gauge.js
Input
wijmo.input.js
More to come...
Interop
wijmo.angular.js
Event
CollectionView
Control
Globalize
Styles
Directives
<wj-flex-grid>
<wj-flex-grid-column>
…
FlexGrid Filter
wijmo.grid.filter.js
FlexGrid GroupPanel
wijmo.grid.groupanel.js
FlexGrid DetailRow
wijmo.grid.detail.js
Extensions
FlexChart Analytics
wijmo.chart.analytics.js
FlexChart Annotation
wijmo.chart.annotation.js
FlexChart Interaction
wijmo.chart.interaction.js
8

9. Web Development Today
 Overview
9

10. Data
 Qualitative vs Quantitative Data
 What are organizations focusing on, challenges ( From SAS 2013 )
 Data on the Web
 Tricks to avoid timeouts
 What do you do with all of that data when you get it?
 Mobile vs Desktop
 How do we visualize all this data
10

11. Data Visualization
 Data Visualization is the presentation of data in a graphical format.
 Help your end users see things that aren’t obvious looking at RAW data.
 This can be accomplished via
 Charts – more visual, take the #’s out of it.
 Grids – Doesn’t need to be as confusing as a spreadsheet.
 Interactivity
 Tool Tips
 Annotation Layer
11

12. Performance on the web
 Feature
 Why is it important? Greg Linden
 Google Dev* ( 2015 ) Critical Rendering Path
 Optimizing Content Efficiency
 Rendering Performance
 Minimize HTTP Requests
 Utilize Client more
 How quickly can users get access to data***
 Still considered performance?
12
Amazon
100 ms Delay = -1% in revune
Bing
1.5 s Delay = -1.6% decrease in satisfaction
Google
10 s vs 30 s seach = 25% fewer searches
Results (2014): Speed is critical
*Greg Linden

13. Web Development Today – Screen Size
 Today ( Layout )
 Desktop Screens
 Tablet screens
 Mobile Device Screens
 Future
 Apple Watch
 Google Glass
 Oculus Rift (?)
13

14. 14

15. 15

16. 16

17. CollectionView
17

18. Handling the Data Layer - CollectionView
 Several Classes implements the Wijmo CollectionView
 iCollectionView: current record management, custom sorting, filtering, grouping
 iEditableCollectionView: methods for editing, adding, and removing items
 iPagedCollectionView: provides paging for navigation through large numbers of items
 MVVM
 Performance
 Demo
18

19. FlexChart
 Creating Responsive large data set driven responsive Charts
19

20. FlexChart
 One Flexible API
 Many Extensibility points
 Defined by ChartType
 Column and Bar
 Scatter
 Line and LineSymbols
 Area
 Spline and SplineSymbols
 SplineArea
 Stacking
 Dynamic Charts
 Uses ICollectionView internally changes are updated
automatically
20

21. FinancialChart
 Extension of FlexChart
 Analytics also extension
 Chart Types
 Heikin-Ashi
 Line Break
 Renko
 Kagi
 ColumnVolumne
 Other volume charts
 Other Features
21

22. Stacking and Multiple Chart Types
 More than one series
 Stacked or Stacked 100 percent
 X amount of charts in one
single chart view
 Add a FlexChart Control and
then add X number of series and
define their chart types
 Composite Charts
 Convert many charts into one
 Utilize labels
22

23. Using Composite for Responsive FlexCharts
 Above – Composite Charts in response to
smaller screen size. Legend has been
enabled
 Left – View on Large Displays
23

24. Logarithmic Data / Dataset
 How do we deal with Outliers?
 How do scale the Axis?
 In terms 1, 10, 100, 1,000?...
 Wijmo Globalization
24
DataSet:
$scope.countries = [
{ country: 'Luxembourg', pop: 558514, gdp: 62395 },
{ country: 'Norway', pop: 5156463, gdp: 500244 }, …

25. Globalization
25

26. Handling Outliers - Axis
 Option 1: Setting Min and Max properties
 Might loose data points
 Sacrifice accuracy for clarity.
 Option 2: Change Axis to Log Scale
 Axes naturally compress
 Scale as value grows toward Max in dataset.
 Accuracy and clarity
 One Property.
 logBase
26
<wj-flex-chart-axis wj-property="axisY" title="GDP (US$ billions)"
<strong> log-base="10"</strong>
</wj-flex-chart-axis>

27. 27

28. Qualitative Data – Charting
 Analytics, Annotations, and drill-down
28

29. Analytics - Module
 Wijmo.chart.analytics
 Function Series
 Trend Lines
 Simple
 Weighted
 Exponential
 Triangular Types
 Supports all trend lines that Microsoft Excel supports
29

30. Annotations
 Annotation Layer
 Display data points on top of the
Chart surface
 Has built in shapes
 Can provide qualitative data
30

31. Drill-Down
 Present Data in digestible chunks
 Widely used in Reports and Dashboards
 Use bread crumbs ( can define aggregate )
 Use Styling
31

32. Hero Sample
 Weather chart
 Stock Chart
32

33. FlexGrid
 Introduction, data layer, data grouping
33

34. Grids and Tables – FlexGrid
 Grids allow us to present entire dataset to end user
 Make FlexGrid control responsive
 CollectionView
 iCollectionView
 Class keeps track of changes made to data.
 Virtual Scrolling
 Too load or not too load
 Performance
34

35. Grouping and GroupPanel
 Group Data Sets
 Drag and Drop UI
 Dialog (Excel-like) for custom grouping
 Grouping using itemFormatter
 Can eliminate scrolling
 Live Demo
 Group Panel
 Custom Grouping
35

36. ItemFormatter
 ItemFormatter - FlexGrid and Chart
 Provide native editors
 Wijmo input control handles most data input cases
 Optimized for Mobile and Desktop
 Custom innerHTML Cells for chart and grid
 API – getCellData()/setCellData()
36

37. Scrolling
 Large data sets are ultimately going to lead to the user having to scroll down
through the page
 Tricks to avoid scrolling
 How do you load over a million rows into a table in < few seconds
 Only DOM elements that are needed for viewport + buffer
 Is scrolling the same on Desktop and Mobile
 No, will show In demo
 Live Demo using Chrome Emulator
37

38. Filtering/Searching – Responsiveness
 Searching vs Filtering
 Filtering – searching data quickly
 Not sure what your looking for
 One single search box – multiple criteria
 Demo this
 Live Demos
38
Large/Desktop
Screen
Tablet
Mobile

39. DetailRow
 Extension of FlexGrid
 FlexGridDetailProvider
class
 Rich API, highly
customizable
 Can have one or more
detail rows visible
 Aware of its context
39

40. Detail Row with FlexChart
40

41. Demo
41

42. Conclusion
 Thank you
 Resources on next slide
42

43. Resources
 Searching – One single search box for all, multiple searches – TR asked for it
 Filtering too much IU?
 Get rid of custom cells
43