Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][MySQL][PHP] Wykres w zależności od adresu
brzanek
post 12.09.2017, 09:53:19
Post #1





Grupa: Zarejestrowani
Postów: 427
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----

Witam na stronie mamy wykres dotyczący prędkości wiatru dla danej miejscowości. Miejscowości w bazie danych mysql mam kilkadziesiąt i nie chcę tworzyć aż tylu plików dla każdego miasta osobno. Czy jest możliwość aby z adresu pobierało id danej miejscowości za pomocą &_GET i wyświetlało dane dla odpowiedniego miasta.
Tak wygląda plik z wykresem
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>ChartJS - BarGraph</title>
  5.  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">		
  7.  
  8. 		<style type="text/css">
  9. 			#chart-container {
  10. 				width: 900px;
  11. 				height: 100px;
  12. 			}
  13. 		</style>
  14. 	</head>
  15. 	<body>
  16. <div class="container">
  17. 		<div class="row">
  18. 			<canvas class="col-md-12" id="mycanvas" height="400"></canvas>
  19. 		</div>
  20. </div>
  21. 		<!-- javascript -->
  22. 		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  23. 		<script type="text/javascript" src="http://brzanek.webd.pl/charts/js/Chart.min.js"></script>
  24. 		<script type="text/javascript" src="http://brzanek.webd.pl/charts/js/app.js"></script>
  25.  
  26. 	</body>
  27. </html>
[HTML] pobierz, plaintext


Plik app.js
[PHP] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	$.ajax({
  3. 		url: "http://brzanek.webd.pl/charts/data.php",
  4. 		method: "GET",
  5. 		success: function(data) {
  6. 			console.log(data);
  7. 			var player = [];
  8. 			var score = [];
  9.  
  10. 			for(var i in data) {
  11. 				//dataczas.push(new Date(data[i].dataczas));
  12. 				player.push("" + data[i].playerid);
  13. 				score.push(data[i].score);
  14. 			}
  15.  
  16. 			var chartdata = {
  17. 				labels: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"],
  18. 				datasets : [
  19. 					{
  20. 						label: 'Średnia prędkość wiatru w km/h',
  21. 						//backgroundColor: '#65ea84',
  22. 						//borderColor: 'rgba(200, 200, 200, 0.75)',
  23. 						hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
  24. 						hoverBorderColor: 'rgba(200, 200, 200, 1)',
  25. 						fill: false,
  26. 						lineTension: 0.1,
  27. 						backgroundColor: "#fff",
  28. 						borderColor: "#00a41b",
  29. 						borderWidth: 1,
  30.             //borderCapStyle: 'butt',
  31.             //borderDash: [],
  32.             //borderDashOffset: 0.0,
  33.             //borderJoinStyle: 'miter',
  34.             //pointBorderColor: "rgba(75,192,192,1)",
  35.             //pointBackgroundColor: "#fff",
  36.             pointBorderWidth: 1,
  37.             //pointHoverRadius: 5,
  38.             //pointHoverBackgroundColor: "rgba(75,192,192,1)",
  39.             //pointHoverBorderColor: "rgba(220,220,220,1)",
  40.             pointHoverBorderWidth: 2,
  41.             //pointRadius: 1,
  42.             //pointHitRadius: 10,
  43. 						data: data
  44. 					}
  45. 				]
  46. 			};
  47.  
  48. 			var ctx = $("#mycanvas");
  49.  
  50. 			var barGraph = new Chart(ctx, {
  51. 				type: 'line',
  52. 				data: chartdata
  53. 			});
  54. 		},
  55. 		error: function(data) {
  56. 			console.log(data);
  57. 		}
  58. 	});
  59. });
[PHP] pobierz, plaintext


Plik data.php
[PHP] pobierz, plaintext 
  1. <?php
  2. //setting header to json
  3. header('Content-Type: application/json');
  4. //database
  5. $con=mysql_connect('localhost','login','pass');
  6. mysql_select_db("brzanek_prognozydarksky", $con);
  7. $result = mysql_query("SELECT * FROM prognoza_godzinowa WHERE htime >= UNIX_TIMESTAMP(UTC_DATE() + INTERVAL 2 DAY) AND htime <= UNIX_TIMESTAMP(UTC_DATE() + INTERVAL 3 DAY) AND hid_miasto=2") or die(mysql_error());
  8. 	$data = array();
  9.     while($row =mysql_fetch_array($result))
  10.     {
  11.         $data[] = $row['hwindSpeed'];
  12.         $playerid[] = $row['htime'];
  13.     }
  14.     echo json_encode($data);
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
olszam
post 12.09.2017, 11:25:17
Post #2





Grupa: Zarejestrowani
Postów: 342
Pomógł: 23
Dołączył: 20.01.2011
Skąd: Chełm

Ostrzeżenie: (0%)
-----

w html robisz powiedzmy selecta z listą miast a w app.js musisz tylko dorobić kod na pobieranie id miasta z selecta(mały przykład https://www.w3schools.com/Jsref/tryit.asp?f..._select_value2). Następnie coś takiego 
[PHP] pobierz, plaintext 
  1.  ...
  2. var miasto = "http://brzanek.webd.pl/charts/data.php?idmiasto="+id;
  3. 	$.ajax({
  4. 		url: miasto,
  5. ...
[PHP] pobierz, plaintext


w data.php to normalnie $_GET['idmiasto'];
Go to the top of the page
+Quote Post

Posty w temacie
- brzanek   [JavaScript][MySQL][PHP] Wykres w zależności od adresu   12.09.2017, 09:53:19
- - olszam   w html robisz powiedzmy selecta z listą miast a w ...   12.09.2017, 11:25:17
- - brzanek   A czy mogę jakoś poprawnie to zapisać [PHP] pobier...   12.09.2017, 11:56:20
- - olszam   w app.js nie możesz kodu php wstawić natomiast moż...   12.09.2017, 14:50:51
- - brzanek   Zrobiłem to tak w pliku php dodałem to [PHP] pobi...   12.09.2017, 18:15:47
- - olszam   aż się dziwie że zwykły plik app.js działa z kodem...   12.09.2017, 18:33:21
- - brzanek   Witam mam kolejny problem z tymi wykresami. Mam pl...   28.10.2017, 15:34:13

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.06.2024 - 05:56
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn