Kaavioiden hyödyntäminen datan visualisoinnissa: case Yritys X

Abstract

IT-alalla on yhä kovempi kilpailu asiakkaista. Tuotteen visuaalisella ulkoasulla on nykypäivänä suurempi merkitys kuin aikaisemmin, ja sen myötä graafisten käyttöliittymien päivittämiseen keskitetään alakohtaisesti paljon resursseja. Yritykset pyrkivät erottumaan joukosta eri tavoin. Toteutusten käyttäjäystävällisyys voi olla ratkaiseva tekijä asiakkaiden vertaillessa eri yritysten ratkaisuja.

Yritys X on turkulainen tietoturvapalveluita tarjoava yritys. Tietoturvafirmoissa datan visualisoinnilla on tärkeä rooli järjestelmän tilan ilmaisemisessa asiakkaille. Visualisointiratkaisujen tulee olla selkeitä ja helposti luettavia. Nykypäivän www-ohjelmoinnin nopea kehitystahti on tuonut mukanaan lukemattoman määrän eri JavaScript-kirjastoja datan visualisointiin.

Tämän opinnäytetyön tarkoituksena oli tutkia toimeksiantoyritykselle Chart.js-kirjaston ja Vue.js-rungon sopivuutta dataa visualisoivien kaavioiden luomiseen verkkoportaalissa, ja sen pohjalta luoda toimeksiantoyrityksen verkkoportaaliin uusia kaavioita kyseisiä teknologioita hyödyntäen. Samalla pohdittiin Vue.js-rungon toimintaperiaatteita perehtymällä tarkemmin sen modulaariseen kehitysfilosofiaan. Työssä hyödynnettiin Chart.js:n ja Vue.js:n dokumentaatiota. Samalla yritettiin hahmottaa miten kyseisiä ohjelmointikonsepteja hyödyntäen onnistuisi parhaiten selkeiden tulkittavien kaavioiden luonti.

Opinnäytetyössä rakennetut kaaviot tuli käyttöön yrityksen verkkoportaalissa, ja jatkokehitysehdotuksia kaavioille esitetään aktiivisesti. Kaaviokirjaston hyvä käytettävyys mahdollistaa uusien ratkaisujen syöttämisen järjestelmään, ja toimeksiantoyrityksen muutkin verkkoratkaisut uusitaan tarvittaessa.

In the information security field, data visualization is an important method for communicating to the customer the status of the system and the health of its various components. The visual appearance of the product is the be-all-end-all in the modern day and, with it, more and more resources are being poured into updating graphical user interfaces. Visualization solutions have to be clear and easy to read. Companies strive to stand out in a variety of ways. User-friendliness can be a decisive factor for customers when comparing solutions from different companies.

The goal of this thesis was to update the existing data visualization methods of the commissioning company, Company X, an information security firm based in Turku, to the modern age with new graphs built using Chart.js which is a JavaScript library for data visualization and Vue.js, an open-source web development framework. The current modus operandi for data visualization within the company was also streamlined by separating the backend from the frontend using Vue.js and JavaScript and eliminating the old graphs built with Google Charts that were deemed outdated. The thesis also delves into the intricacies of both Chart.js and Vue.js through documentation and studies their efficacy for building graphs.

The new graphs built in this thesis were immediately put into use in the company’s web portal, and the solutions proposed in this thesis met the demands of the commissioning company. Furthermore, the company is in the process of revamping the entire portal using new data visualization solutions, all of which are being built using the technology introduced in this thesis.