Visualizing large data sets with wijmo enterprise webinar
-
Upload
ross-dederer -
Category
Software
-
view
826 -
download
1
Transcript of Visualizing large data sets with wijmo enterprise webinar
![Page 1: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/1.jpg)
1
Hi
![Page 2: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/2.jpg)
Visualizing Large Data Sets With Wijmo EnterpriseApproaches and Experiences
Ross DedererWijmo
![Page 3: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/3.jpg)
3
About Me Ross Dederer Wijmo Pittsburgh, PA Developer Relations
Have background in complex Reporting software ActiveReports
![Page 4: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/4.jpg)
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
![Page 5: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/5.jpg)
Wijmo Enterprise
5
![Page 6: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/6.jpg)
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
![Page 7: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/7.jpg)
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);
![Page 8: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/8.jpg)
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
![Page 9: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/9.jpg)
Web Development Today Overview
9
![Page 10: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/10.jpg)
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
![Page 11: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/11.jpg)
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
![Page 12: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/12.jpg)
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
![Page 13: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/13.jpg)
13
Web Development Today – Screen Size Today ( Layout )
Desktop Screens Tablet screens Mobile Device Screens
Future Apple Watch Google Glass Oculus Rift (?)
![Page 14: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/14.jpg)
14
![Page 15: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/15.jpg)
15
![Page 16: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/16.jpg)
16
![Page 17: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/17.jpg)
CollectionView
17
![Page 18: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/18.jpg)
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
![Page 19: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/19.jpg)
FlexChart Creating Responsive large data set driven responsive Charts
19
![Page 20: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/20.jpg)
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
![Page 21: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/21.jpg)
21
FinancialChart Extension of FlexChart Analytics also extension Chart Types
Heikin-Ashi Line Break Renko Kagi ColumnVolumne Other volume charts
Other Features
![Page 22: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/22.jpg)
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
![Page 23: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/23.jpg)
23
Using Composite for Responsive FlexCharts
Above – Composite Charts in response to smaller screen size. Legend has been enabled
Left – View on Large Displays
![Page 24: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/24.jpg)
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 }, …
![Page 25: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/25.jpg)
25
Globalization
![Page 26: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/26.jpg)
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>
![Page 27: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/27.jpg)
27
![Page 28: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/28.jpg)
Qualitative Data – Charting Analytics, Annotations, and drill-down
28
![Page 29: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/29.jpg)
29
Analytics - Module Wijmo.chart.analytics Function Series Trend Lines
Simple Weighted Exponential Triangular Types
Supports all trend lines that Microsoft Excel supports
![Page 30: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/30.jpg)
30
Annotations Annotation Layer
Display data points on top of the Chart surface Has built in shapes
Can provide qualitative data
![Page 31: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/31.jpg)
31
Drill-Down Present Data in digestible chunks Widely used in Reports and Dashboards Use bread crumbs ( can define aggregate ) Use Styling
![Page 32: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/32.jpg)
32
Hero Sample Weather chart Stock Chart
![Page 33: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/33.jpg)
FlexGrid Introduction, data layer, data grouping
33
![Page 34: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/34.jpg)
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
![Page 35: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/35.jpg)
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
![Page 36: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/36.jpg)
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()
![Page 37: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/37.jpg)
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
![Page 38: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/38.jpg)
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
![Page 39: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/39.jpg)
39
DetailRow Extension of FlexGrid FlexGridDetailProvider
class Rich API, highly
customizable
Can have one or more detail rows visible
Aware of its context
![Page 40: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/40.jpg)
40
Detail Row with FlexChart
![Page 41: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/41.jpg)
41
Demo
![Page 42: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/42.jpg)
42
Conclusion Thank you
Resources on next slide
![Page 43: Visualizing large data sets with wijmo enterprise webinar](https://reader036.fdocuments.in/reader036/viewer/2022062503/587a1d1c1a28abb4238b6a4b/html5/thumbnails/43.jpg)
43
Resources Searching – One single search box for all, multiple searches – TR asked for
it
Filtering too much IU?
Get rid of custom cells