Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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
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
brzanek
post 12.09.2017, 11:56:20
Post #3





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

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

A czy mogę jakoś poprawnie to zapisać
[PHP] pobierz, plaintext 
  1. var miasto = "http://brzanek.webd.pl/charts/data.php?hid_miasto='".$_GET['hid_miasto']."'";
[PHP] pobierz, plaintext

W adresie strony wtedy dawał bym tak
http://brzanek.webd.pl/charts/bargraph.php?hid_miasto=9
Jeśli na sztywno dam tak
[PHP] pobierz, plaintext 
  1. var miasto = "http://brzanek.webd.pl/charts/data.php?hid_miasto=9";
[PHP] pobierz, plaintext

to działa.
Go to the top of the page
+Quote Post
olszam
post 12.09.2017, 14:50:51
Post #4





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

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

w app.js nie możesz kodu php wstawić natomiast możesz tak zrobić
wstawić gdzieś znacznik hidden na początku w body
[PHP] pobierz, plaintext 
  1. <input type="hidden" id=idmiasto value=<?php echo $_GET['idmiasto']; ?> >
[PHP] pobierz, plaintext


a potem w app.js zrobić zmienną która pobiera wartości z tego inputa

[PHP] pobierz, plaintext 
  1. var id = document.getElementById('idmiasto').value;
  2. var miasto = "http://brzanek.webd.pl/charts/data.php?idmiasto="+id;
[PHP] pobierz, plaintext

Go to the top of the page
+Quote Post
brzanek
post 12.09.2017, 18:15:47
Post #5





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

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

Zrobiłem to tak
w pliku php dodałem to
[PHP] pobierz, plaintext 
  1. <?
  2. $id = $_GET['hid_miasto'];
  3. ?>
  4. <script>
  5. var id = "<?php echo $id; ?>";
  6. //Do something
  7. </script>
  8. <?php
[PHP] pobierz, plaintext


A w pliku js dałem tak
[PHP] pobierz, plaintext 
  1. 		var nazwa = "<?php echo json_encode($id); ?>";
  2. 		var miasto = "http://brzanek.webd.pl/charts/data.php?hid_miasto="+id;
  3. 	$.ajax({
  4. 		url: miasto,
[PHP] pobierz, plaintext

Wszystko śmiga dzięki za pomoc
Go to the top of the page
+Quote Post
olszam
post 12.09.2017, 18:33:21
Post #6





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

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

aż się dziwie że zwykły plik app.js działa z kodem php, ja zazwyczaj tego unikami ale na przyszłość by za często tak nie mieszać smile.gif
Go to the top of the page
+Quote Post
brzanek
post 28.10.2017, 15:34:13
Post #7





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

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

Witam mam kolejny problem z tymi wykresami.
Mam plik php wywołujący formularz, który pobiera dane z bazy danych mysql
[PHP] pobierz, plaintext 
  1. <?php
  2. require_once "../../maincore.php";
  3. require_once THEMES."templates/header.php";
  4. $con=mysql_connect('localhost','login','haslo');
  5. mysql_select_db("nazwa_bazy_danych", $con);
  6. mysql_query("SET CHARSET utf8");
  7. echo '<div class="row">';
  8. echo '<div class="col-md-12">';
  9. ?>
  10. <script type="text/javascript" src="http://brzanek.webd.pl/28082017/klimat/wojewodztwo/charts/js/Chart.min.js"></script>
  11. <script type="text/javascript" src="http://brzanek.webd.pl/28082017/klimat/wojewodztwo/charts/js/max.js"></script>
  12.  
  13. <input type="hidden" id=miasto value=<?php echo $_GET['miasto']; ?> >
  14. <input type="hidden" id=miesiac value=<?php echo $_GET['miesiac']; ?> >
  15. <input type="hidden" id=rok value=<?php echo $_GET['rok']; ?> >
  16. <form method="get" action="index.php" name="form1" id="form1">
  17. <div class="row">
  18. <div class="col-md-3"><p>
  19. <?
  20. openside();
  21. echo form_select('miasto', $locale['news_02056'], $_GET['miasto'],
  22.                                  array(
  23.                                      'inline' => TRUE,
  24.                                      'inner_width' => '100%',
  25.                                      'options' => array(
  26.                                          szczecin => Szczecin,
  27.                                          koszalin => Koszalin,
  28.                                          kolobrzeg => Kołobrzeg,
  29.                                          szczecinek => Szczecinek,
  30.                                          darlowo => Darłowo,
  31.                                          gorzow => Gorzów,
  32.                                          chojnice => Chojnice,
  33.                                          miroslawiec => Mirosławiec,
  34.                                          pila => Piła,
  35.                                          resko => Resko
  36.                                      )
  37.                                  )
  38. );
  39. closeside();
  40. ?>
  41. </p>
  42. </div>
  43.  
  44. <div class="col-md-3"><p>
  45. <?
  46. openside();
  47. echo form_select('miesiac', $locale['news_02056'], $_GET['miesiac'],
  48.                                  array(
  49.                                      'inline' => TRUE,
  50.                                      'inner_width' => '100%',
  51.                                      'options' => array(
  52.                                          1 => styczeń,
  53.                                          2 => luty,
  54.                                          3 => marzec,
  55.                                          4 => kwiecień,
  56.                                          5 => maj,
  57.                                          6 => czerwiec,
  58.                                          7 => lipiec,
  59.                                          8 => sierpień,
  60.                                          9 => wrzesień,
  61.                                          10 => październik,
  62.                                          11 => listopad,
  63.                                          12 => grudzień
  64.                                      )
  65.                                  )
  66. );
  67. closeside();
  68. ?>
  69. </p>
  70. </div>
  71.  
  72. <div class="col-md-3"><p>
  73. <?
  74. openside();
  75. echo form_select('rok', $locale['news_02056'], $_GET['rok'],
  76.                                  array(
  77.                                      'inline' => TRUE,
  78.                                      'inner_width' => '100%',
  79.                                      'options' => array(
  80.                                          1980 => 1980,
  81.                                          1981 => 1981,
  82.                                          1982 => 1982,
  83.                                          1983 => 1983,
  84.                                          1984 => 1984,
  85.                                          1985 => 1985,
  86.                                          1986 => 1986,
  87.                                          1987 => 1987,
  88.                                          1988 => 1988,
  89.                                          1989 => 1989,
  90.                                          1990 => 1990,
  91.                                          1991 => 1991,
  92.                                          1992 => 1992,
  93.                                          1993 => 1993,
  94.                                          1994 => 1994,
  95.                                          1995 => 1995,
  96.                                          1996 => 1996,
  97.                                          1997 => 1997,
  98.                                          1998 => 1998,
  99.                                          1999 => 1999,
  100.                                          2000 => 2000,
  101.                                          2001 => 2001,
  102.                                          2002 => 2002,
  103.                                          2003 => 2003,
  104.                                          2004 => 2004,
  105.                                          2005 => 2005,
  106.                                          2006 => 2006,
  107.                                          2007 => 2007,
  108.                                          2008 => 2008,
  109.                                          2009 => 2009,
  110.                                          2010 => 2010,
  111.                                          2011 => 2011,
  112.                                          2012 => 2012,
  113.                                          2013 => 2013,
  114.                                          2014 => 2014,
  115.                                          2015 => 2015,
  116.                                          2016 => 2016,
  117.                                          2017 => 2017
  118.                                      )
  119.                                  )
  120. );
  121. closeside();
  122. ?>
  123. </p>
  124. </div>
  125. <div class="col-md-3">
  126. <p>
  127. <input class="btn btn-success" type="submit" value="Wybierz" />
  128. </p>
  129. </div>
  130. </div>
  131. <script>
  132. changeSelection();
  133. </script>
  134. </form>
  135. <?
  136. echo '</div> 
  137. </div>';
  138. ?>
  139.  
  140. <div class="row">
  141. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><canvas id="temperaturaa"></canvas></div>
  142. </div>
  143. <?
  144.  
  145. echo '<div class="row">';
  146. echo '<div class="col-md-12">';
  147. $result = mysql_query('SELECT * FROM `'.$_GET['miasto'].'` WHERE data LIKE "%.'.$_GET['miesiac'].'.'.$_GET['rok'].'%" ORDER BY id ASC') or die(mysql_error());
  148. while($row = mysql_fetch_array($result)) {
  149. 	echo "<p>".$row['tempmax']." / ".$row['data']."</p>";
  150. }
  151. echo '</div> 
  152. </div>';
  153. require_once THEMES."templates/footer.php";
  154. ?>
[PHP] pobierz, plaintext


plik max.js tworzący wykres
[PHP] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 		//var nazwa = "<?php echo json_encode($id); ?>";
  3. 		var miastoid = document.getElementById('miasto').value;
  4. 		var miesiacid = document.getElementById('miesiac').value;
  5. 		var rokid = document.getElementById('rok').value;
  6. 		var miasto = "http://brzanek.webd.pl/28082017/klimat/wojewodztwo/charts/temperatura.php?miasto="+miastoid+"&miesiac="+miesiacid+"&rok="+rokid;
  7. 	$.ajax({
  8. 		url: miasto,
  9. 		method: "GET",
  10. 		success: function(data) {
  11. 			console.log(data);
  12. 			var data = [];
  13. 			var tempmax = [];
  14.  
  15. 			for(var i in data) {
  16. 				data.push("" + data[i].data);
  17. 				tempmax.push(data[i].tempmax);
  18. 			}
  19.  
  20. 			var chartdata = {
  21. 				labels: data,
  22. 				//labels: ["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"],
  23. 				datasets : [
  24. 					{
  25. 						label: 'Temperatura powietrza w',
  26. 						hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
  27. 						hoverBorderColor: 'rgba(200, 200, 200, 1)',
  28. 						fill: false,
  29. 						lineTension: 0.1,
  30. 						backgroundColor: "#fff",
  31. 						borderColor: "#b60101",
  32. 						borderWidth: 1,
  33. 						pointBorderWidth: 1,
  34. 						pointHoverBorderWidth: 2,
  35. 						data: tempmax
  36. 					}
  37. 				]
  38. 			};
  39. 			var ctx = $("#temperaturaa");
  40.  
  41. 			var barGraph = new Chart(ctx, {
  42. 				type: 'line',
  43. 				data: chartdata
  44. 			});
  45. 		},
  46. 		error: function(data) {
  47. 			console.log(data);
  48. 		}
  49. 	});
  50. });
[PHP] pobierz, plaintext


plik temperatura.php
[PHP] pobierz, plaintext 
  1. <?php
  2. header("Content-Type: application/json;charset=utf-8");
  3. ini_set( 'display_errors', 'On' ); 
  4. error_reporting( E_ALL );
  5.  
  6. $con=@mysql_connect('localhost','login','hasło');
  7. mysql_select_db("nazwa_bazy_danych", $con);
  8. mysql_query("SET CHARSET utf8");
  9. $result = mysql_query('SELECT tempmax, data FROM `'.$_GET['miasto'].'` WHERE data LIKE "%.'.$_GET['miesiac'].'.'.$_GET['rok'].'" ORDER BY id ASC') or die(mysql_error());
  10. while($row = mysql_fetch_array($result)) {	
  11. 	$data[] = $row;
  12. }
  13. print json_encode($data);
[PHP] pobierz, plaintext


Po wywołaniu pliku temperatura.php i podstawieniu w adresie potrzebnych danych wszystko śmiga
http://brzanek.webd.pl/28082017/klimat/woj...=2&rok=1982
Ale na wykresie nic się nie pojawia. Gdzie jest błąd?

Czy ktoś jest w stanie mi pomóc z tym wykresem?
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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