Visualizing large time series data in Blazor applications
Katainen, Kim (2024)
2024
Tietotekniikan DI-ohjelma - Master's Programme in Information Technology
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2024-12-02
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-2024110710011
https://urn.fi/URN:NBN:fi:tuni-2024110710011
Tiivistelmä
The development of web-based applications has become increasingly common, and many tra ditional desktop applications are now being implemented as web applications in the browser. This shift is supported by advancements in web technologies and standards, such as WebAssembly and WebGL, which facilitate the creation of effcient and demanding applications.
This thesis examines the use of a WebAssembly-based software framework for performance critical web applications and the application of WebGL for leveraging the graphics processing unit (GPU). The possibility to compiling code into WebAssembly has introduced multiple programming languages alongside JavaScript for web development. Microsoft’s Blazor WebAssembly frame work, for instance, allows .NET applications to be executed in the browser, enabling application development in C# with Blazor syntax in place of HTML.
The study focuses on real-time processing and visualization of large data sets in a web ap plication. An application is implemented to transfer time series data from a server to a Blazor WebAssembly web application and visualize the data in a chart. The goal is to identify optimiza tion methods for handling large time-series data sets and to evaluate how well the application meets real-time system requirements. The performance of the application is evaluated and tested across various aspects, such as data transfer, processing, and rendering.
The results indicate that a Blazor WebAssembly application can visualize millions of data points per second in real-time. The most critical optimizations involve data transfer from the server to the browser, where choices such as data type selection and the use of a binary transfer protocol play an important role. Additionally, applying "AOT Compilation", which compiles interpreted code di rectly into WebAssembly, enhances performance. Data processing in the web application proved to be another critical area of research, where algorithm selection and data type choices contribute signifcantly to optimization. Using WebGL for data rendering imposes minimal load on the appli cation compared to other aspects.
This thesis examines the use of a WebAssembly-based software framework for performance critical web applications and the application of WebGL for leveraging the graphics processing unit (GPU). The possibility to compiling code into WebAssembly has introduced multiple programming languages alongside JavaScript for web development. Microsoft’s Blazor WebAssembly frame work, for instance, allows .NET applications to be executed in the browser, enabling application development in C# with Blazor syntax in place of HTML.
The study focuses on real-time processing and visualization of large data sets in a web ap plication. An application is implemented to transfer time series data from a server to a Blazor WebAssembly web application and visualize the data in a chart. The goal is to identify optimiza tion methods for handling large time-series data sets and to evaluate how well the application meets real-time system requirements. The performance of the application is evaluated and tested across various aspects, such as data transfer, processing, and rendering.
The results indicate that a Blazor WebAssembly application can visualize millions of data points per second in real-time. The most critical optimizations involve data transfer from the server to the browser, where choices such as data type selection and the use of a binary transfer protocol play an important role. Additionally, applying "AOT Compilation", which compiles interpreted code di rectly into WebAssembly, enhances performance. Data processing in the web application proved to be another critical area of research, where algorithm selection and data type choices contribute signifcantly to optimization. Using WebGL for data rendering imposes minimal load on the appli cation compared to other aspects.