1

Hi

Visualizing Large Data Sets With Wijmo EnterpriseApproaches and Experiences

Ross DedererWijmo

3

About Me Ross Dederer Wijmo Pittsburgh, PA Developer Relations

Have background in complex Reporting software ActiveReports

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

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

7

What Makes Wijmo 5 Special? True Controls (Control Classes like in .NET) Not Widgets

Control//Initializevar myFlexGrid = new wijmo.grid.FlexGrid('#myFlexGrid');//Show Row HeadersmyFlexGrid.headersVisibility = wijmo.grid.HeadersVisibility.All;

Widget//Initialize$('#mywijgrid').wijgrid();//Show Row Headers$('#mywijgrid').wijgrid('option', 'showRowHeader', true);

8

Wijmo 5: ArchitectureCore

wijmo.js/css

FlexGridwijmo.grid.js

FlexChartwijmo.chart.js

Gaugewijmo.gauge.j

sInput

wijmo.input.jsMore to come...

Interopwijmo.angular

.js

EventCollectionView

ControlGlobalizeStyles

Directives<wj-flex-grid><wj-flex-grid-column>…

FlexGrid Filterwijmo.grid.filter.js

FlexGrid GroupPanel

wijmo.grid.groupanel.js

FlexGrid DetailRow

wijmo.grid.detail.js

Extensions

FlexChart Analytics

wijmo.chart.analytics.jsFlexChart

Annotationwijmo.chart.annotati

on.jsFlexChart Interaction

wijmo.chart.interaction.js

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

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

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?

Amazon100 ms Delay = -1% in revuneBing 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 (?)

14

15

16

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

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

21

FinancialChart Extension of FlexChart Analytics also extension Chart Types

Heikin-Ashi Line Break Renko Kagi ColumnVolumne Other volume charts

Other Features

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

23

Using Composite for Responsive FlexCharts

Above – Composite Charts in response to smaller screen size. Legend has been enabled

Left – View on Large Displays

24

Logarithmic Data / Dataset How do we deal with Outliers? How do scale the Axis?

In terms 1, 10, 100, 1,000?...

Wijmo Globalization

DataSet:$scope.countries = [{ country: 'Luxembourg', pop: 558514, gdp: 62395 }, { country: 'Norway', pop: 5156463, gdp: 500244 }, …

25

Globalization

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

<wj-flex-chart-axis wj-property="axisY" title="GDP (US$ billions)"

<strong> log-base="10"</strong> </wj-flex-chart-axis>

27

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

30

Annotations Annotation Layer

Display data points on top of the Chart surface Has built in shapes

Can provide qualitative data

31

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

32

Hero Sample Weather chart Stock Chart

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

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

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

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

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

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

40

Detail Row with FlexChart

41

Demo

42

Conclusion Thank you

Resources on next slide

43

Resources Searching – One single search box for all, multiple searches – TR asked for

it

Filtering too much IU?

Get rid of custom cells