Javascript ukazuje ručičku inde, ako je hodnota

Fórum › JavaScript, AJAX, jQuery

~ Anonymní uživatel
~ 1600 příspěvků

2. 2. 2017 #1

Ahojte, mám taký problém. S Javascriptom som nikdy nerobil a hľadal som najjednoduchšie riešenie grafov typu gauge pre meteostanicu, kde budem dávať tú hodnotu value s PHP, bude to posledná hodnota v DB. Poďme ale k veci. Podľa tutoriálu som si vytvoril prvé 2 grafy, ten napravo momentálne nepotrebujem. Starosti mi robí prvý. Potrebujem hodnotu napríklad 30°C a túto hodnotu ukazuje na 20°C a ak zadám do value 20°C tak mi túto hodnotu ukazuje na 0°C taktiež mám poposúvané yellow from to, red, green.. Vedel by mi niekto pomôcť? Bol by som vám veľmi vďačný:
HTML kód:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Arduino Meteostanica</title>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}"></script>
<script type="text/javascript" src="js/gauge.js"></script>
</head>

<body>   

       
<div id="Outside_chart_div" style="width: 200px; height: 200px; display: inline-block;"></div>
<div id="kmh_chart_div" style="width: 200px; height: 200px; display: inline-block;"></div>

<body>
<html>

JS kód:

function drawOutsideChart() {

  var OutsideData = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Von', 20]
  ]);

  var OutsideOptions = {
    width: 200, height: 200,
     greenFrom: -40, greenTo: 15,
        yellowFrom: 16, yellowTo: 25,
        redFrom: 26, redTo: 40,
      minorTicks: 10,
    majorTicks: ['-40','-30','-20','-10','0', '10', '20', '30', '40'],max: 40
  };

  var OutsideChart = new 		google.visualization.Gauge(document.getElementById('Outside_chart_div'));

  OutsideChart.draw(OutsideData, OutsideOptions);
}

function drawKmhChart() {

  var kmhData = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Km/h', 20]
  ]);

  var kmhOptions = {
    width: 200, height: 200,
    yellowFrom: 40, yellowTo: 60,
    minorTicks: 4, majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160', '180', '200', '220'],max: 220
  };

  var kmhChart = new 		google.visualization.Gauge(document.getElementById('kmh_chart_div'));

  kmhChart.draw(kmhData, kmhOptions);
}

google.setOnLoadCallback(drawOutsideChart);
google.setOnLoadCallback(drawKmhChart);

Zamerajte sa prosím iba na prvý graf Outside!
Výsledok u mňa je takýto:

Připojen obrázek.

Nahlásit jako SPAM

IP: 84.16.53.–

gna

~ Anonymní uživatel
~ 1875 příspěvků

3. 2. 2017 #2

Do OutsideOptions přídej min: -40

Nahlásit jako SPAM

IP: 213.211.51.–

Martin

~ Anonymní uživatel
~ 1600 příspěvků

3. 2. 2017 #3

Ďakujem už to funguje

Nahlásit jako SPAM

IP: 84.16.53.–

peter

~ Anonymní uživatel
~ 4004 příspěvků

3. 2. 2017 #4

Proc tak slozite? Cele to muzes rozdelit na 2 obrazky, pruhledne gify/png kolecka, pozadi a rucicky. A pak uz je to jen otazka rotace kolem stredu. Nebo pouzit canvas.
https://developer.mozilla.org/…ction/rotate
http://www.developphp.com/…ion-Tutorial
http://www.ajaxblender.com/…-canvas.html

elem.style.transform = "rotate("+degrees+"deg)";

degrees je 0-360, prepocet (php nebo js), pokud bude rucicka vodorovne
(40 C ~ -45)
(-40 C ~ +180+45)
0 st = 25 C - pevne si ale stanovim +25 na nule
0 C = +90 st
kruh je 360
0-90 je rozdil 25 C, kruh je tedy 4*25 = 100
delta 100 C = 360 stupnu
protoze jsou +- hodnoty, k teploty se musi pricist polovina kruhu, 50 C
protoze nula je na 90 stupnich, ke stupnim se pripocitava 90
360 - (360 * (teplota + 50) / 100 + 90)
20 C = 18 st
-10 C = 126 st
-40 C = 234

Overeni:

45 st = 25/2 (12.5 C)
45/2 (22.5 st) = 25/2 + 25/4 (18.75 C)
Cili 18.75 C je skoro 20, takze by melo vyjit kolem 22.5 st.

90 st = 0 C, 90+90 st = -25 C
-25/2 = - 12.5
90/2 + 90 = 135
Cili -10 je skoro jako -12.5 a melo by to vychazet kolem 135 st.

270 st = 2 * 25 = 50 C
180 st = 25 C
delta 45 st = 25/2 C = 12.5
25 + 12.5 = 37.5C, to je skoro 40
180 (25C) + delta 45 = 225 st, to je skoro tech 235

Takze je to ok prepocet.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:30c7:cf...–

Martin

~ Anonymní uživatel
~ 1600 příspěvků

3. 2. 2017 #5

Ešte mi poraďte, ako vložím PHP kód do toho kódu, potrebujem toto:

<?php $temperatureLivingRoom = mysqli_query($con,"SELECT `temperature`, `time` FROM `TempLivingRoom` ORDER BY `time` DESC LIMIT 1") or die(mysqli_error($con));
 
            while($line = mysqli_fetch_assoc($temperatureLivingRoom)){
		
	echo  $line['temperature']; echo'  ';} ?>

Vložiť do:

function drawLivingRoomChart() {

  var LivingRoomData = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Von', 10]
  ]);

  var LivingRoomOptions = {
    width: 200, height: 200,
    min: 10,
     greenFrom: 10, greenTo: 16.99,
        yellowFrom: 17, yellowTo: 23.99,
        redFrom: 24, redTo: 40,
      minorTicks: 20,
    majorTicks: ['10', '20', '30', '40'],max: 40
  };

  var LivingRoomChart = new 		google.visualization.Gauge(document.getElementById('LivingRoom_chart_div'));

  LivingRoomChart.draw(LivingRoomData, LivingRoomOptions);
}

Namiesto toho value 10. Ďakujem za pomoc.

Nahlásit jako SPAM

IP: 84.16.53.–

peter

~ Anonymní uživatel
~ 4004 příspěvků

3. 2. 2017 #6

Co za to? Vyreste problem za mne. Vyresis ty problem za mne? Mam 2 tel seznamy, xls, 1000 jmen a potrebuji spravne doplnit do toho prvniho a opravit jmena na prijmeni a jmeno. :)

Hej, jako, zkus googlovat a nauc se.

php na serveru generuje html stranku, tu posila uzivateli, ten ji prevezme do browseru a ten ji vykresli, spusti javascript. To, co musis docilit je, aby ty echa vypsali teploty ve formatu:
['Von', 10]
echo "['Von', 10]"; //to tak vypise, jen to musis ted tam spravne doplnit
A dal musis docilit, aby mezi jednotlivymi poli byla carka
['Von', 10], ['Dnu', 10], ['V garazi', 10]

Tak, hodne zdaru.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:30c7:cf...–

← Zpět na seznam vláken ← Zpět do Fóra