Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][PHP]Wykres jak to połączyć., Nie potrafię połaczyć danych z pliku dane.php z wykresem.
lwojno9
post 4.01.2016, 20:34:37
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 11.12.2015

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

Witam

Walczę już jakiś czas i nie potrafię poradzić sobie z takim problemem.

Mam plik html który rysuje wykres, pobiera dane wygenerowane plikiem dane.php i rysuje wykres.

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <!-- 
  3. 	Most basic sample showing the c3js sample in it's most basic form.
  4.  -->
  5. <html>
  6. <head>
  7. 	<meta charset="utf-8">
  8.  
  9. 	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
  10.  
  11.  
  12. </head>
  13. <body>
  14. 	<h1>wykres</h1>
  15. 	<div id="chart"></div>
  16.  
  17. 	<!-- Load the javascript libraries -->
  18. 	<script src="assets/js/d3.min.js" charset="utf-8"></script>
  19. 	<script src="assets/js/c3.min.js"></script>
  20. 	<script src="jquery-2.1.4.min.js"></script>
  21.  
  22.  
  23. 		<br>
  24.  
  25.  
  26. 	<!-- Initialize and draw the chart -->
  27. 	<script type="text/javascript">
  28.  
  29. 		var chart = c3.generate({
  30. 		    bindto: '#chart',
  31. 		    data: { x: 'x', url: 'dane.php'},
  32. 				size: { height: 566},
  33. 				point:{ show: false },
  34.  
  35. 	grid: {
  36.         y: {
  37.             lines: [
  38.                 {value: 80, text: '80 Stopni C', position: 'middle'},
  39.                 {value: 0, text: '0 Stopni C', position: 'middle'}
  40.             ]
  41.         }
  42.     },
  43. axis:
  44. {
  45. 							x: {label: { text: 'Czas zapisu'}, type: 'category',	tick: { rotate: 15,	multiline: false,culling: { max: 25},fit: true	}},
  46. 							y: { label: 'Temperatura C', lines: [{value: 0, text: 'Lable 1'}]},
  47. 							//y2: { show: true, label: 'Temperatura C', lines: [{value: 0, text: 'Lable 1'}]}
  48. 				}
  49.  
  50. 		});
  51.  
  52.  
  53.  
  54.  
  55. 	</script>
  56.  
  57. </body>
  58. </html>
[HTML] pobierz, plaintext


Chciałbym teraz zrobić aby dane były dynamicznie odświeżane co pewien czas.
Zmodyfikowałem kod tak.

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <!-- 
  3. 	Most basic sample showing the c3js sample in it's most basic form.
  4.  -->
  5. <html>
  6. <head>
  7. 	<meta charset="utf-8">
  8.  
  9. 	<link href="assets/css/c3.min.css" rel="stylesheet" type="text/css">
  10.  
  11. 	<script language=javascript>
  12. // tworzymy zmienna
  13.  
  14. var object = null;
  15.  
  16. 	try 
  17. 	{
  18. 		object = new XMLHttpRequest();
  19. 	}
  20. 	catch(e)
  21. 	{
  22. 		try
  23. 		{
  24. 			object = new ActiveXObject("Msxml2.XMLHTTP");
  25. 		}
  26. 		catch(e2)
  27. 		{
  28. 			try
  29. 			{
  30. 				object = new ActiveXObject("Microsoft.XMLHTTP");
  31. 			}
  32. 			catch(e3)
  33. 			{
  34. 				alert("Niestety Twoja przeglądarka nie obsługuje AJAXA");
  35. 			}
  36. 		}
  37. 	}
  38.  
  39.  
  40. function getData(dataSource, divID)
  41. {
  42.     if (object.readyState==4 || object.readyState==0) 
  43.     {
  44.         var obj = document.getElementById(divID);
  45.  
  46.         // czyta z pliku lub wykonuje skrypt
  47.         object.open("POST", dataSource);
  48.  
  49.         object.onreadystatechange = function()
  50.         {
  51.            if (object.readyState == 4 && object.status == 200) 
  52.             obj.innerHTML= object.responseText;
  53.         }
  54.          object.send(null);
  55.       }
  56. }
  57.  
  58. // w ponizszej funkcji wywolujemy funkcje getData z odpowiednimi parametrami
  59. // oraz wywolujemy ja sama rekurencyjnie po co okreslony czas (w naszym wypadku 1000 ms)
  60. function odswiezaj()
  61. {
  62.       getData('dane.php','mojDIVIK');
  63. 		   setTimeout("odswiezaj()", 1000);
  64. }
  65.  
  66. </script>
  67.  
  68. </head>
  69. <body>
  70. 	<h1>wykres</h1>
  71. 	<div id="chart"></div>
  72.  
  73. 	<div id="mojDIVIK"></div><!-- tutaj pokazują się dane z pliku dane.php
  74.  
  75. 	<!-- Load the javascript libraries -->
  76. 	<script src="assets/js/d3.min.js" charset="utf-8"></script>
  77. 	<script src="assets/js/c3.min.js"></script>
  78. 	<script src="jquery-2.1.4.min.js"></script>
  79.  
  80.  
  81. 		<br>
  82.  
  83.  
  84. 	<!-- Initialize and draw the chart -->
  85. 	<script type="text/javascript">
  86.  
  87. 		var chart = c3.generate({
  88. 		    bindto: '#chart',
  89. 		    data: { x: 'x', url: 'dane.php'},
  90. 				size: { height: 566},
  91. 				point:{ show: false },
  92.  
  93. 	grid: {
  94.         y: {
  95.             lines: [
  96.                 {value: 80, text: '80 Stopni C', position: 'middle'},
  97.                 {value: 0, text: '0 Stopni C', position: 'middle'}
  98.             ]
  99.         }
  100.     },
  101. axis:
  102. {
  103. 							x: {label: { text: 'Czas zapisu'}, type: 'category',	tick: { rotate: 15,	multiline: false,culling: { max: 25},fit: true	}},
  104. 							y: { label: 'Temperatura C', lines: [{value: 0, text: 'Lable 1'}]},
  105. 							//y2: { show: true, label: 'Temperatura C', lines: [{value: 0, text: 'Lable 1'}]}
  106. 				}
  107.  
  108. 		});
  109.  
  110.  
  111.  
  112.  
  113. 	</script>
  114.  
  115.  
  116.  
  117.  
  118.  
  119. <script language=javascript>
  120. odswiezaj();
  121. </script>
  122. </body>
  123. </html>
[HTML] pobierz, plaintext



Niestety nie potrafię tego połączyć na stronie wyświetla się wykres a pod spodem dane.
Wydaje mi się że trzeba by jakoś połączyć ten kawałem kodu

[HTML] pobierz, plaintext 
  1. var chart = c3.generate({
  2. 		    bindto: '#chart',
  3. 		    data: { x: 'x', url: '<div id="mojDIVIK"></div>'},
  4. 				size: { height: 566},
  5. 				point:{ show: false },
[HTML] pobierz, plaintext


Proszę o jakąś wskazówkę która pomogła by mi rozwiązać problem.
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: Przełącz na: Standardowy · 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: 14.08.2025 - 02:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn