Select List ve Gauge İlişkilendirmek

Kapalı Hesap (239913)
09-07-2012, 17:37   |  #1  
OP Kapalı Hesap
Teşekkür Sayısı: 0
4 mesaj
Kayıt Tarihi:Kayıt: Tem 2012

Merhaba arkadaşlar.

Elimde bir kod parçası var ve javascript ve HTML ile ilgilenmeye yeni başladım.Öncelikle size kod parçasını sunayım.

[ Tüm kodu seç ] [ Yeni Pencerede Göster ]
<html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1', {packages:['gauge']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id='chart_div'></div> </body> </html>
Ben burada belli projeleri select list ile ekleyip, select listde o an seçili olan alanlara göre belirlenen sayılardan yola çıkarak gauge u hareket ettirmeye çalışacağım.

Mesela

Proje adı: (select list seçenekleri burada olacak.Örnek olarak mert projesi olsun.Yukarıdaki kodda memory, cpu ve network değerleri var.Onları da mert içinde bulunan sayı değerlerine göre değiştirmeliyim.Mesela mert projesinde bu değerler memory = 96, cpu = 100, network = 78 olduğunda gaugemiz bu değerleri göstermeli.Proje ahmet olduğunda yine farklı değerler girilecek şekilde olmalı.)

mert projesine ait 3 farkle sayı değeri olacak maximum 100e kadar.Ve onlara göre gauge hareket edecek.Farklı bir proje seçildiğinde yine farklı projedeki sayı değerlerine göre gauge hareket edecek.

Not : Yukarıdaki kod Google Developer tarafından zaten sunuluyor.

Yardımlarınız için şimdiden teşekkür ederim.

Kapalı Hesap (239913)
10-07-2012, 08:58   |  #2  
OP Kapalı Hesap
Teşekkür Sayısı: 0
4 mesaj
Kayıt Tarihi:Kayıt: Tem 2012

Tamam biraz daha basite indirgeyelim.Benim yaptığım araştırmalara göre select listleri artık yapabiliyorum.Fakat seçili select listlerde onun altındaki kodları nasıl gauge'ye yansıtırım bilemiyorum. Yani kodlarım şu şekli aldı.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>calısma1</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load('visualization', '1', { packages: ['gauge'] });
</script>
<script type="text/javascript">
function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Memory', 80],
        ['Memory', 80],
        ['Memory', 80]
        ]);
        new google.visualization.Gauge(document.getElementById('visualization')).
                draw(data);
}
        google.setOnLoadCallback(drawVisualization);
        </script>
</head>
<body style="font-family: Arial;border: 0 none;">
        <div id="visualization" style="width: 600px; height: 400px;"></div>
Proje Adı:
<select name="Proje">
        <option value="proje1">mert</option>
        <option value="proje2">ahmet</option>
        <option value="proje3">hasan</option>
        <option value="proje4">ali</option>
        <option value="proje5">veli</option>
</select><br />
</body>
</html>

Fakat bunların altına her başlık için birer if-else if ekleyip.Eğer bu seçenek seçiliyse sayı değerleri a=96 b=98 c=100 olmalı ve bunlar gauge a yansımalı.

Kapalı Hesap (239913)
11-07-2012, 08:34   |  #3  
OP Kapalı Hesap
Teşekkür Sayısı: 0
4 mesaj
Kayıt Tarihi:Kayıt: Tem 2012

Herkese bakışlarından dolayı teşekkür ederim.Sorunu başka bir yöntemle hallettik.Select boxlar yerine linkler kullandık ve her link ilgili projeye gidiyor ve onun altındaki gauge u çalıştırıyor.

Herkese iyi çalışmalar.