Javascript ukazuje ručičku inde, ako je hodnota – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Javascript ukazuje ručičku inde, ako je hodnota – JavaScript, AJAX, jQuery – Fórum – Programujte.comJavascript ukazuje ručičku inde, ako je hodnota – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

Martin
~ Anonymní uživatel
1552 příspěvků
2. 2. 2017   #1
-
0
-

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
1506 příspěvků
3. 2. 2017   #2
-
0
-

Do OutsideOptions přídej min: -40

Nahlásit jako SPAM
IP: 213.211.51.–
Martin
~ Anonymní uživatel
1552 příspěvků
3. 2. 2017   #3
-
0
-

Ďakujem už to funguje

Nahlásit jako SPAM
IP: 84.16.53.–
peter
~ Anonymní uživatel
3714 příspěvků
3. 2. 2017   #4
-
0
-

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
1552 příspěvků
3. 2. 2017   #5
-
0
-

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
3714 příspěvků
3. 2. 2017   #6
-
0
-

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...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 28 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032021 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý