| dc.description.abstract | SINTEF Ocean har samlet store mengder sensormålinger i form av tidsserier over flere år fra ulike rederier. I denne sammenheng ønsket de hjelp med å få tilgjengeliggjort denne informasjonen for rederiene. For å oppnå dette ønsket de å få utviklet en web-applikasjon, med oversikt over sensordata fra fartøyene presentert med grafer og kart.
Da grafisk fremstilling av tidsserier var en sentral del av produktet, ønsket vi å undersøke en problemstilling som omhandlet dette. Denne problemstillingen omhandlet å sammenlikne fire ulike grafbiblioteker med hensyn til brukbarhet, ytelse og evnen til å tilfredstille de funksjonelle kravene som oppdragsgiver ønsket. For å undersøke dette brukte vi kvantitative og kvalitative undersøkelser. Google Lighthouse ble brukt til kvantitative undersøkelser, og målte ytelsen på innlasting av nettsiden. Den kvalitative undersøkelsen innebar at en av utviklerne testet hvordan de ulike grafbibliotkene var i bruk. Dette ble gjennomført ved forskjellige antall datapunkter. Med Google Lighthouse testet vi i tillegg ulike oppsett av grafene. Grafbibliotekene som ble undersøkt var Apexcharts, C3, Echarts og Highcharts. Disse ble valgt på grunnlag av dokumentasjon, renderteknologi og hvorvidt disse allerede var implementert som komponenter til Javascript-rammeverket Vue 3.
Det var tydelig ut ifra resultatene at det var stor forskjell på hvordan de ulike grafbibliotekene presterte når antall punkter i dataseriene økte. Apexcharts og C3 håndtere store mengder data dårlig, mens Echarts og Highcharts klarte dette godt. Dette kom frem både i den kvalitative og den kvantitative undersøkelsen. Highcharts var marginalt bedre enn de andre grafbibliotekene på begge undersøkelsene, men det var bare Echarts som hadde all ønsket funksjonalitet innebygd. I tillegg til dette er Echarts gratis, mens Highcharts krever lisens for kommersiell bruk. Det ser ut til at betydningen av den underliggende renderteknologien som er brukt av grafbibliotekene øker i takt med antall punkter som tegnes på grafen. I denne sammenhengen var det renderteknologien Canvas som fungerte best. Echarts benyttet Canvas, mens Apexcharts, Highcharts og C3 benyttet SVG. Highcharts går over til Canvas når antall punkter går over en grense.
Selve web-applikasjonen ble utviklet ved å bruke Scrumban som utviklingsmetodikk. Enkelheten og arbeidsflyten i Scrumban gjorde at denne utviklingsmetodikken fungerte bra for et prosjekt av dette omfanget og med tre utviklere. Sluttproduktet tilfredsstilte alle de viktigste funksjonene som oppdragsgiver ønsket, men manglet hovedsakelig oppkobling til API ved levering. Som følge av den vitenskapelige undersøkelsen ble Echarts valgt til sluttproduktet. | |
| dc.description.abstract | Over the years, SINTEF Ocean has collected large quantities of data, in the form of measurements from sensors on board vessels. They now wish to develop an application, where the shipping companies can get access to an overview of their data, represented as graphs and maps.
Graphical representation of time series data was a central part of the product, and we wanted to further explore this topic. Our research question therefore involved comparing four different graphing libraries concerning performance, usability, and the ability to satisfy functional requirements provided by the client. To achieve this, we used both quantitative and qualitative testing. Google Lighthouse was used for quantitative testing, and measured the performance when loading the webpage. The qualitative testing was done by one of the developers testing the usability of the graphing libraries. This testing was conducted with various amounts of data points. Different setups of graphs were also tested using Google Lighthouse. The graphing libraries tested was Apexcharts, C3, Echarts and Highcharts. These were selected on the basis of documentation, render technology and whether they already were implemented as components for the JavaScript framework Vue 3.
It was clear from the results, that there was a big difference between how the graphing libraries performed, when the amount of points increased. Apexcharts and C3 handled large amounts of data poorly, while Echarts and Highcharts did well. This was evident both in the qualitative and quantitative testing. Highcharts was marginally better in both tests, but when it came to implementation of functionality, only Echarts had all the desired functionality. In addition Echarts is free, while Highcharts needs a license for commercial use. It seemed like the importance of the render technology used by the graphing libraries increased based on the amount of points rendered on the graph. In this instance the render technology, Canvas had the best performance. Echarts utilised Canvas, while Apexcharts, Highcharts and C3 utilised SVG. Highcharts switches to Canvas when the amount of points is above a certain threshold.
Development of the web application was done using Scrumban as the development framework. The simplicity and workflow in Scrumban made it fitting for a task of this magnitude, and three developers. The end product satisfied most of the important features defined by the client, but lacked the implementation of the API. Due to the findings in this scientific research, Echarts was chosen as the graphing library in the end product. | |