Πολλές φορές όταν αναπτύσσουμε webapps ή websites, χρειαζόμαστε να αναπαραστήσουμε κάποια δεδομένα, σε γραφικές παραστάσεις. Αυτή η ανάγκη μπορεί να είναι πολλές φορές μεγάλος πονοκέφαλος για τον προγραμματιστή. Εκτός από τις λύσεις του κάθε προγραμματιστή, υπάρχουν και πολλά έτοιμα εργαλεία τα οποία μπορούν να χρησιμοποιηθούν. Ένα από αυτά, με μεγάλη δημοτικότητα είναι και το google chart tools.
Προσφέρει πολλές έτοιμες λύσεις στον προγραμματιστή και τον διευκολύνει στη στη δημιουργία σύνθετων γραφημάτων. Το ενδιαφέρον είναι ότι ένα μέρος τους δίνεται ως open source, ενώ μπορεί να χρησιμοποιηθεί απλή html και javascript για την υλοποίηση του. Στο παράδειγμα που ακολουθεί θα χρησιμοποιήσω τα google charts για να αναπαραστήσω γραφικές παραστάσεις συναρτήσεων. Πρώτα δημιουργούμε τη σελίδα που θα είναι η διεπαφή στα γραφήματα μας. Ο κώδικας είναι ο εξής:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/main.css">
<title>Google visualization plugin</title>
</head>
<body>
<form id="form1">
<input type="text" id="min" placeholder="Δώσε την ελάχιστη τιμή">
<input type="text" id="max" placeholder="Δώσε την μέγιστη τιμή">
<input type="range" min="10" max="100" step="10" value="10" id="range" >
<output name="out" for="range"></output>
</form>
<p>Διάλεξε μια συνάρτηση
<br>
<input type="checkbox" id="check1" >
<label for="check1">y=x**2</label>
<br>
<input type="checkbox" id= "check2" value="2">
<label for="check2">y=x**5</label>
<br>
<input type="checkbox" id= "check3" value="3">
<label for="check3">y=2*x**2+1</label>
<br>
<input type="button" value="Υπολογισμός Συνάρτησης" id="calculate_button" >
<br>
</p>
<div id="google" style="height:400px; width: 400px;"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript" src="googleApi.js">
</script>
</body>
</html>Η σελίδα αποτελείται από δυο textboxes , μια range (μπάρα κύλισης) και τρια checkboxes τα οποία αντιστοιχούν στις σελίδες που θέλουμε να αναπαραστήσουμε. Επίσης περιλαμβάνονται τα script για τη javascript που θα χρησιμοποιήσουμε καθώς και για το googlecharts, το οποίο βρίσκεται στο τέλος της σελίδας. Ο χρήστης εισάγει τιμές από το πληκτρολόγιο και επιλέγει το πλήθος των σημείων που θέλει να έχει η γραφική του παράσταση κάθε φορά. Μόλις πατήσει το "υπολογισμός συνάρτησης" βλέπει το γράφημα του στη σελίδα. Ο κώδικας που είναι υπεύθυνος για τη λειτουργία αυτή είναι ο εξής:
/**
* Αυτο το script χρησιμοποιεί το google visualization api
*/
//ορίζουμε τις global variables και περναμε τους eventlisteners
var calculate_button = document.getElementById("calculate_button");
var checkbox1 = document.getElementById("check1");
var checkbox2 = document.getElementById("check2");
var checkbox3 = document.getElementById("check3");
calculate_button.addEventListener('click', init );
checkbox1.addEventListener('click', hide_checkboxes);
checkbox2.addEventListener('click', hide_checkboxes);
checkbox3.addEventListener('click', hide_checkboxes);
// Με τη συνάρτηση αυτή ξεκινάμε το πρόγραμμα μας
function init() {
var min =Number(document.getElementById("min").value);
var max =Number(document.getElementById("max").value);
var range = Number(document.getElementById("range").value);
var vima = (max-min)/range;
calculate_values(vima, min, max);
}
//Σε αυτή τη συνάρτηση ελέγχουμε ποιο checkbox έχει επιλεγεί και απενεργοποιούμε τα υπόλοιπα
function hide_checkboxes(){
if(checkbox1.checked == true)
{
checkbox2.disabled = true;
checkbox3.disabled = true;
}
if(checkbox2.checked == true)
{
checkbox1.disabled = true;
checkbox3.disabled = true;
}
if(checkbox3.checked == true)
{
checkbox1.disabled = true;
checkbox3.disabled = true;
}
}
//Αυτή η συνάρτηση υπολογίζει τις τιμές των δεδομένων μας για κάθε συνάρτηση που επιλέγουμε
function calculate_values (vima, min, max) {
var x =min;
var y=0;
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number','y');
if(document.getElementById("check1").checked == true){
for(var i=min; i {
y = Math.pow(x,2);
data.addRow([x,y]);
x+=vima;
}
plot_functions(data,max);
}
//2η συναρτηση
if(document.getElementById("check2").checked == true){
for(var i=min; i {
y = Math.pow(x,5);
data.addRow([x,y]);
x+=vima;
}
plot_functions(data,max);
}
//3η συνάρτηση
if(document.getElementById("check3").checked == true){
for(var i=min; i {
y = 2*Math.pow(x,2)+1;
data.addRow([x,y]);
x+=vima;
}
plot_functions(data,max);
}
}
//Η συνάρτηση αυτή δημιουργεί το γράφημα στη σελίδα μας
function plot_functions(data,max) {
new google.visualization.LineChart(document.getElementById("google")).
draw(data, {curveType: "none",
width: 400, height: 400,
vAxis: {maxValue: max}}
);
}
Ο κώδικας είναι αρκετά σχολιασμένος , ώστε να καταλάβει κανείς τη λειτουργία του. Αρχικά δηλώνουμε τις global μεταβλητές που θα χρησιμοποιήσουμε. Αφορούν τα στοιχεία checkboxes της σελίδας μας. Σε αυτά περνάμε eventListeners οι οποίοι καλούν τη συνάρτηση hide_checkboxes όταν επιλεγούν. Η τελευταία είναι υπεύθυνη για την απενεργοποίηση των checkboxes που δεν επιλέγονται. Το πρόγραμμα ξεκινά όταν ο χρήστης πατήσει το κουμπί "Υπολογισμός συνάρτησης" . Καλείται η συνάρτηση init όπου το πρόγραμμα παίρνει τα στοιχεία του χρήστη. Στη συνέχεια καλεί τη συνάρτηση calculate_values όπου υπολογίζει τα σημεία της συνάρτησης, ανάλογα με το ποια έχουμε επιλέξει. Στο τέλος καλεί την plot_functions , όπου δημιουργούμε μια νέα instnance της google.visualization.LineChart, η οποία παίρνει ως ορίσματα το div μας, τον πίνακα δεδομένων που δημιουργήσαμε στην calculate_values και κάποιες παραμέτρους που αφορούν τη μορφή της γραμμής, το μέγιστο του άξονα και το μέγεθος του γραφήματος. Το τελικό αποτέλεσμα φαίνεται στην παρακάτω εικόνα.
To css που χρησιμοποιήσαμε είναι το εξής:
body{
align:center;
background: -webkit-radial-gradient(30px 50px, ellipse, #FFFFFF 40%, #333366 60%, #669999 90%);
background: -moz-radial-gradient(30px 50px, ellipse, #FFFFFF 40%, #333366 60%, #669999 90%);
width:100%;
height:800px;
}
ul{
list-style:none;
text-align:center;
}
.button{
width:150px;
height:30px;
box-shadow:#669999 5px 5px 5px 5px inset;
}
#form{
float:right;
}
- Συνδεθείτε ή εγγραφείτε για να σχολιάσετε
