-1+1128 
Developing a JavaScript SDK

A long time ago

DOS 6.2 allowed for:

  • 320x240x8bpp
  • Direct access to pixels on screen
  • Assembler for performance

Today, the Web has finally caught up in the graphics department. Now, we have access to:

  • Multiple browsers and rendering technologies
  • Multiple resolutions
  • Performance that varies by browser and device

Development setup:

  • We write in JavaScript
  • Commit to GitHub
  • Build system in JavaScript
  • Debug in Chrome
  • Run automated tests
  • Like WebStorm (and Vim)

Graphics:

Canvas (fast) SVG (slow) WebGL (>50%)

Interactive animations:

Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.

Graceful degradation:

High FPS (frames per second) lets you scale graphics with low image degradation.

Third party libraries:

  • Raphael
  • Hammer.js
  • Leaflet
  • Moment.js

Challenges:

  • Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
  • Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
  • Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
  • HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps

Support:

  • Process: TrialSupportBuy
  • 1 day issue resolution
  • #1 Tell me what I did wrong
  • #2 Can you do…

Testing:

  • Automated tests on every GIT push

Automatically:

  • Compare images
  • Record performance
  • View errors in console

Interactive testing:

  • Next step: record and playback

BrowserStack:

  • Interactive mode
  • Automated: Selenium API

Debugging:

Chrome Developer tools (F12)

  • Debugging
  • Profiling
  • Timeline

Remote debugging available: https://developer.chrome.com/devtools/docs/remote-debugging

Future:

  • More charts
  • Extension API
  • Memory allocation tracking
  • WebGL

We are looking for statically-typed language:

  • Error checking
  • Performance
  • Superior minification

  • Easy to write and read

  • Easy to call from JS

Building

Custom build script:

  • Compile
  • Minify
  • Extract documentation
  • Embed customer data

Check out ZoomCharts products:

Network Chart Big network exploration Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.

Time Chart Time navigation and exploration tool Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.

Pie Chart Amazingly intuitive hierarchical data exploration Get quick overview of your data and drill down when necessary. All in a single easy to use chart.

Facet Chart Scrollable bar chart with drill-down Compare values side by side and provide easy access to the long tail.

ZoomCharts http://www.zoomcharts.com The world’s most interactive data visualization software

Lectures
    no lectures added
Prerequisites

ZoomCharts on your computer

Syllabus
Additional information
Teacher qualifications

Developer

Latest Update

none

Roster
1. Zackman
2. Benny3400
3. sirdgama
4. airlesstraveled
5. aevrah
6. lottle
7. jeremyevans
8. bugoyskiboy
9. zoomcharts
10. jesstoth66
11. netr
12. oana1sarbu
13. yurifauzi
14. seanknight
15. josef1919
16. Bunnino
17. Spartyftw
18. psilocymin
19. apocrypha13142
20. alistairwalsh
21. Smiljana
22. darethedweeb
23. shaynee
24. snowanne
25. anonimouz
26. aardvarkbjones
27. Ntavouri
28. youngmonie
29. sam112358
30. silverhana
31. huong
32. anaconda101
33. chinktank
34. alexnom
35. AshesOfDeadEmpires
36. eduardov113
37. kemz
38. bymythroat
39. Hebert002
40. AnaMaalisha
41. hardy1234
42. thatgirlfromgalifrey
43. ArduinoAficionado
44. tedbrun
45. weslieb_
46. Cytoxin
47. Aradeea
48. Aradeea
49. MikeyyZ
50. kaps5050
51. kaps5050
52. sud-rhein
53. alyousifah
54. Alicia
55. glendarey
56. Syeeric
57. elegantnoob
58. caseykdavis
59. greenredidunno
60. ACarter01
61. nukeduke
62. tonny
63. skippotter
64. mohan50
65. wonikamalker
66. eyeofatigress
67. theflyingbrant
68. erraticerror
69. amal.ka
70. onlyoncethreetimes
71. OfficialFluttershy
72. CautiousNarwhal
73. elitaliafero
74. presston
75. ravikiran
76. michelleusam
77. munirahmad86
78. neoezekiel
79. mastermayhem
80. erwinlarios
81. kellyalana
82. wdk21
83. desirage
84. Carpe-Noctem1618
85. mvresh
86. p3t3r.tnie
87. modi.herik
88. ddamico
89. laytex
90. ij888
91. mfusky
92. R3vis1on
93. rh548
94. tiaan871
95. giftgale88
96. dkk1031
97. shonthegreat
98. Joecorgi
99. blutimus
100. carolinelebakken
101. Ecivilak
102. blueeyedugly
103. euphorialive
104. AIMBoss
105. AwedSentinel
106. shrutir58
107. Fran
108. anniew77
109. navjotahuja92
110. gurusiv
111. piyushjain
112. sodainmycereal
113. leocaetano
114. geoful
115. Panky
116. alexoanimaignis
117. eulb42
118. Sudesbparate
119. hammam
120. blackiszero
121. cause
122. medousah
123. videshpa
124. TBLIXXXY
125. bony143
126. Keepatitbro
127. akashdixitutd
128. Meleenas
129. ksakash
130. d4rkie316
131. megamanflex
132. leflyi
133. bazani
134. mansi___singh
135. umaryounas14
136. cvluckey
137. lapettit
138. germainmi26
139. Anj2017
140. shannonT16