Σχεδιασμός και Υλοποίηση Συστήματος Διαχείρισης Προσωπικών Δαπανών  

19 

 

κώδικα που απαιτείται για τη δημιουργία και αποστολή ενός αιτήματος προς τον server, 

όπως  επίσης  και  για  τη  λήψη  των  δεδομένων  που  επιστρέφονται,  ελαχιστοποιείται 

αρκετά  με  τη  βιβλιοθήκη  jQuery,  που  προαναφέρθηκε.  Η  jQuery  διαθέτει  έτοιμες 

συναρτήσεις  για  τη  χρήση  των  ασύγχρονων  κλήσεων,  καθιστώντας  έτσι  τον 

προγραμματισμό με χρήση Ajax ευκολότερο και ταχύτερο.  

 

2.1.5 Bootstrap  

Ένα  εργαλείο  που  χρησιμοποιήθηκε  για  τη  γρήγορη  οπτική  ανταπόκριση  του 

ιστοχώρου  είναι  το  Bootstrap.  Πρόκειται  για  front-end  framework  που  διατίθεται 

δωρεάν και αποσκοπεί στον ταχύτερο και ευκολότερο προγραμματισμό ιστοχώρων [4]. 

Περιλαμβάνει  έτοιμα  template  βασισμένα  σε  CSS,  με  προκαθορισμένα  στυλ 

μορφοποίησης,  για  τα  διάφορα  στοιχεία  δομής  της  HTML.  Η  χρήση  του  Bootstrap 

διευκολύνει κατά πολύ τον προγραμματιστή, που επιθυμεί να κατασκευάσει ιστοχώρο, 

που  να  ανταποκρίνεται  οπτικά  άμεσα  σε  οποιαδήποτε  συσκευή  προβάλλεται, 

ανεξαρτήτως  μεγέθους  οθόνης.  Για  το  παρόν  σύστημα  χρησιμοποιήθηκε  η  πιο 

πρόσφατη έκδοση, Bootstrap 4. 

 

2.1.6 Chart.js  

Το σύστημα που αναπτύχθηκε για την παρούσα διπλωματική εργασία έχει την 

ικανότητα  να  εξάγει  στατιστικά  αποτελέσματα  σε  μορφή  γραφικών  παραστάσεων. 

Προκειμένου  να  παρέχεται  αυτή  η  δυνατότητα,  ήταν  αναγκαία  η  χρήση  κάποιας 

βιβλιοθήκης που να προσφέρει τον κατάλληλο τρόπο προβολής τέτοιων γραφημάτων. 

Γι’  αυτόν  το  λόγο  χρησιμοποιήθηκε  η  έτοιμη  βιβλιοθήκη  Chart.js.  Πρόκειται  για 

εργαλείο  ανοιχτού  κώδικα,  που  περιλαμβάνει  συναρτήσεις  Javascript  για  τη 

δημιουργία και προβολή οχτώ (8) διαφορετικών ειδών στατιστικών γραφημάτων. Πέρα 

από την απλή απεικόνιση, διαθέτει εφέ κίνησης για το κάθε γράφημα, όπως επίσης και 

προσαρμοζόμενη  προβολή  ανάλογα  με  τις  διαστάσεις  της  συσκευής  στην  οποία 

προβάλλεται.   

Παρακάτω, στις εικόνες παρουσιάζεται ένα παράδειγμα χρήσης της βιβλιοθήκης 

Chart.js. Συγκεκριμένα, στην Εικόνα 6 φαίνεται το τμήμα κώδικα JavaScrip, στο οποίο 

καλείται  η  συναρτηση  Chart()  της  βιβλιοθήκης  και  ορίζονται  οι  παράμετροι  του 

γραφήματος, όπως ο τύπος του, που στην προκειμένη περίπτωση είναι γράφημα πίτας.