Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [MySQL][PHP]Highcharts + PHP + MYSQL Problem z wyświetlaniem danych
Forum PHP.pl > Forum > Przedszkole
brzanek
11.09.2015, 17:47:23
Witam mam bazę danych w formie


Chcę wyświetlić te dane na wykresie Highcharts
Mam kody
data.php
[PHP] pobierz, plaintext 
  1. <?php
  2. $con=mysql_connect('localhost','login','haslo');
  3. mysql_select_db("brzanek_rekordy", $con);
  4.  
  5.  
  6.  
  7. $result = mysql_query("SELECT * FROM choszczno");
  8.  
  9. $category = array();
  10. $category['name'] = 'miesiac';
  11.  
  12. $series1 = array();
  13. $series1['name'] = 'tempmax';
  14.  
  15. $series2 = array();
  16. $series2['name'] = 'tempmin';
  17.  
  18. $series3 = array();
  19. $series3['name'] = 'opady';
  20.  
  21.  
  22.  
  23. while($r = mysql_fetch_array($result)) {
  24.     $category['data'][] = $r['miesiac'];
  25.     $series1['data'][] = $r['tempmax'];
  26.     $series2['data'][] = $r['tempmin'];
  27.     $series3['data'][] = $r['opady'];   
  28. }
  29.  
  30. $result = array();
  31. array_push($result,$category);
  32. array_push($result,$series1);
  33. array_push($result,$series2);
  34. array_push($result,$series3);
  35.  
  36.  
  37. print json_encode($result, JSON_NUMERIC_CHECK);
  38.  
  39. mysql_close($con);
  40. ?> 
[PHP] pobierz, plaintext


Kod odpowiedzialny za wyświetlanie
[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 		<title>Stacked area chart with data from MySQL using Highcharts</title>
  6. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  7. 		<script type="text/javascript">
  8. 		$(document).ready(function() {
  9. 			var options = {
  10. 	            chart: {
  11. 	                renderTo: 'container',
  12. 	                type: 'area',
  13. 	                marginRight: 130,
  14. 	                marginBottom: 25
  15. 	            },
  16. 	            title: {
  17. 	                text: 'Project Requests',
  18. 	                x: -20 //center
  19. 	            },
  20. 	            subtitle: {
  21. 	                text: '',
  22. 	                x: -20
  23. 	            },
  24. 	            xAxis: {
  25. 	                categories: []
  26. 	            },
  27. 	            yAxis: {
  28. 	                title: {
  29. 	                    text: 'Requests'
  30. 	                },
  31. 	                plotLines: [{
  32. 	                    value: 0,
  33. 	                    width: 1,
  34. 	                    color: '#808080'
  35. 	                }]
  36. 	            },
  37. 	            tooltip: {
  38. 	                formatter: function() {
  39. 	                        return '<b>'+ this.series.name +'</b><br/>'+
  40. 	                        this.x +': '+ this.y;
  41. 	                }
  42. 	            },
  43. 	            legend: {
  44. 	                layout: 'vertical',
  45. 	                align: 'right',
  46. 	                verticalAlign: 'top',
  47. 	                x: -10,
  48. 	                y: 100,
  49. 	                borderWidth: 0
  50. 	            },
  51. 	            plotOptions: {
  52. 	                area: {
  53. 	                    stacking: 'normal',
  54. 	                    lineColor: '#666666',
  55. 	                    lineWidth: 1,
  56. 	                    marker: {
  57. 	                        lineWidth: 1,
  58. 	                        lineColor: '#666666'
  59. 	                    }
  60. 	                }
  61. 	            },
  62. 	            series: []
  63. 	        }
  64.  
  65. 	        $.getJSON("data.php", function(json) {
  66. 				options.xAxis.categories = json[0]['data'];
  67. 	        	options.series[0] = json[1];
  68. 	        	options.series[1] = json[2];
  69. 	        	options.series[2] = json[3];
  70. 		        chart = new Highcharts.Chart(options);
  71. 	        });
  72. 	    });
  73. 		</script>
  74. 	    <script src="http://code.highcharts.com/highcharts.js"></script>
  75.         <script src="http://code.highcharts.com/modules/exporting.js"></script>
  76. 	</head>
  77. 	<body>
  78. 		<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  79. 	</body>
  80. </html>
[PHP] pobierz, plaintext


Tu powinien być wykres ale nie ma
http://brzanek.webd.pl/area-chart-with-dat...harts/index.php
Coś jest nie tak tylko nie wiem co. Może ktoś mi pomóc.
Z góry dziękuję.
Pyton_000
11.09.2015, 17:51:30
Zobacz co Ci zwraca data.php a może Cię olśni wink.gif

PS. Pomóc.
brzanek
11.09.2015, 17:54:57
Właśnie chodzi o to, że nic mi nie zwraca - dlaczego?
Pyton_000
11.09.2015, 18:02:21
Ehh... http://brzanek.webd.pl/area-chart-with-dat...charts/data.php
brzanek
11.09.2015, 18:05:23
Sory dodałem to testowo w kodzie bo myślałem że nie aktualizują się pliki.
Już wywaliłem to i nic nie pojawia się.
Pyton_000
11.09.2015, 18:14:38
Temat: Najczestsze bledy

W szczególności jak wyśietlać błędy
brzanek
11.09.2015, 19:36:08
Dodałem do kodu
[PHP] pobierz, plaintext 
  1. error_reporting(E_ALL);
  2. ini_set('display_errors', 1);
[PHP] pobierz, plaintext

Ale nic mi się nie pojawia.

Dobra problem był w kodowaniu znaków dodałem mysql_query("SET NAMES utf8"); i działa.
Wszystko ładnie wyświetla się ale tylko wtedy jak typ kolumny w bazie danych jest INT a ja potrzebuję typ VARCHAR jak zmienię typ w bazie danych to wynik wyświetlania na wykresie to 0 a nie ten co powinien być.
Jak to poprawić?
rogal_81
11.09.2015, 19:41:47
To zastosuj na tych zmiennych intval(zmienna)
brzanek
11.09.2015, 19:46:24
Tak tylko w którym miejscu to dodać?
W kodzie nie mam zastosowania int
Pyton_000
11.09.2015, 19:51:07
przed $r dodaj (int)

Oczywiście poza miesiącem
brzanek
12.09.2015, 10:46:36
Musiałem trochę zmienić rozkład tabeli danych


Na wykresie wyświetla się temperatura najwyższa i najniższa w danym miesiącu ale jak dodać do tego jeszcze rok?
W momencie najechania na wykres jak wyświetla się temperatura to jak dodać do tego rok z danego id.
Tak wygląda kod do łączenia się z baządanych
[PHP] pobierz, plaintext 
  1. <?php
  2. $con=mysql_connect('localhost','login','pass');
  3. mysql_query("SET NAMES utf8");
  4. mysql_select_db("brzanek_rekordy", $con);
  5.  
  6.  
  7.  
  8. $sth = mysql_query("SELECT tempmax FROM choszczno");
  9. $rows = array();
  10. $rows['name'] = 'tempmax';
  11. while($r = mysql_fetch_array($sth)) {
  12.     $rows['data'][] = $r['tempmax'];
  13. }
  14.  
  15. $sth = mysql_query("SELECT tempmin FROM choszczno");
  16. $rows1 = array();
  17. $rows1['name'] = 'tempmin';
  18. while($rr = mysql_fetch_assoc($sth)) {
  19.     $rows1['data'][] = $rr['tempmin'];
  20. }
  21.  
  22. $result = array();
  23. array_push($result,$rows);
  24. array_push($result,$rows1);
  25.  
  26.  
  27. print json_encode($result, JSON_NUMERIC_CHECK);
  28.  
  29. mysql_close($con);
  30. ?>
[PHP] pobierz, plaintext


A tak wygląda plik wyświetlający wykres
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 		<title>Highcharts Example</title>
  6.  
  7. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  8. 		<script type="text/javascript">
  9. $(function () {
  10.     var chart;
  11.     $(document).ready(function() {
  12.         $.getJSON("data.php", function(json) {
  13.  
  14. 		    chart = new Highcharts.Chart({
  15. 	            chart: {
  16. 	                renderTo: 'container',
  17. 	                type: 'line',
  18. 	                marginRight: 130,
  19. 	                marginBottom: 25
  20. 	            },
  21. 	            title: {
  22. 	                text: 'Rekordy temperatur dla m. Choszczno',
  23. 	                x: -20 //center
  24. 	            },
  25. 	            subtitle: {
  26. 	                text: '',
  27. 	                x: -20
  28. 	            },
  29. 	            xAxis: {
  30. 	                categories: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień']
  31. 	            },
  32. 	            yAxis: {
  33. 	                title: {
  34. 	                    text: 'Temperatura'
  35. 	                },
  36. 	                plotLines: [{
  37. 	                    value: 0,
  38. 	                    width: 1,
  39. 	                    color: '#808080'
  40. 	                }]
  41. 	            },
  42. 	            tooltip: {
  43. 	                formatter: function() {
  44. 	                        return '<b>'+ this.series.name +'</b><br/>'+
  45. 	                        this.x +': '+ this.y;
  46. 	                }
  47. 	            },
  48. 	            legend: {
  49. 	                layout: 'vertical',
  50. 	                align: 'right',
  51. 	                verticalAlign: 'top',
  52. 	                x: -10,
  53. 	                y: 100,
  54. 	                borderWidth: 0
  55. 	            },
  56. 	            series: json
  57. 	        });
  58. 	    });
  59.  
  60.     });
  61.  
  62. });
  63. 		</script>
  64. 	</head>
  65. 	<body>
  66.   <script src="http://code.highcharts.com/highcharts.js"></script>
  67.   <script src="http://code.highcharts.com/modules/exporting.js"></script>
  68.  
  69. <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  70.  
  71. 	</body>
  72. </html>
[HTML] pobierz, plaintext

Strona z wykresem
http://brzanek.webd.pl/PHP-Fusion-9.00/inf...kordy_infusion/
Z góry dziękuję za pomoc
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.