Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP] Problem z prasowaniem daty dla amCharts
Forum PHP.pl > Forum > Przedszkole
krzysiekkurowski
28.07.2013, 23:56:39
Witam, chciałbym zczytać dane z bazy mysql i wyswietlić je używając skryptu amCharts.

Niestety problem w tym ze nie mogę poradzić sobie z prasowaniem daty z mysql i po wczytaniu strony nic się nie pojawia.

Problem dokładnie jest z linijką: 
[HTML] pobierz, plaintext 
  1. year:<?php print ($row['dattim']); ?>,
[HTML] pobierz, plaintext
jak mogę użyć new Date() aby skrypt zaczął działać ?

Proszę o pomoc.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.  
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.         <title>amCharts examples</title>
  7.         <link rel="stylesheet" href="style.css" type="text/css">
  8.         <script src="amcharts/amcharts.js" type="text/javascript"></script>          
  9.         <script type="text/javascript">
  10.             var chart;
  11.             var graph;
  12.  
  13.  
  14.             // months in JS are zero-based, 0 means January 
  15.             var chartData = [
  16. <?php foreach($last24hourValues as $row) { ?>
  17. 		{
  18.            year:<?php print ($row['dattim']); ?>,
  19.             value: <?php print number_format($row['Aussen'], 2); ?>
  20.            }
  21. 		<?php } ?>
  22.  
  23. 			];
  24.  
  25.  
  26.             AmCharts.ready(function () {
  27.                 // SERIAL CHART
  28.                 chart = new AmCharts.AmSerialChart();
  29.                 chart.pathToImages = "amcharts/images/";
  30.                 chart.dataProvider = chartData;
  31.                 chart.marginLeft = 10;
  32.                 chart.categoryField = "year";
  33.                 chart.zoomOutButton = {
  34.                     backgroundColor: '#000000',
  35.                     backgroundAlpha: 0.15
  36.                 };
  37.  
  38.                 // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
  39.                 chart.addListener("dataUpdated", zoomChart);
  40.  
  41.                 // AXES
  42.                 // category
  43.                 var categoryAxis = chart.categoryAxis;
  44.                 categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  45.                 categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
  46.                 categoryAxis.gridAlpha = 0;
  47.  
  48.                 // value
  49.                 var valueAxis = new AmCharts.ValueAxis();
  50.                 valueAxis.axisAlpha = 0;
  51.                 valueAxis.inside = true;
  52.                 chart.addValueAxis(valueAxis);
  53.  
  54.                 // GRAPH                
  55.                 graph = new AmCharts.AmGraph();
  56.                 graph.type = "smoothedLine"; // this line makes the graph smoothed line.
  57.                 graph.lineColor = "#d1655d";
  58.                 graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
  59.                 graph.bullet = "round";
  60.                 graph.bulletSize = 5;
  61.                 graph.lineThickness = 2;
  62.                 graph.valueField = "value";
  63.                 chart.addGraph(graph);
  64.  
  65.                 // CURSOR
  66.                 var chartCursor = new AmCharts.ChartCursor();
  67.                 chartCursor.cursorAlpha = 0;
  68.                 chartCursor.cursorPosition = "mouse";
  69.                 chartCursor.categoryBalloonDateFormat = "YYYY";
  70.                 chart.addChartCursor(chartCursor);
  71.  
  72.                 // SCROLLBAR
  73.                 var chartScrollbar = new AmCharts.ChartScrollbar();
  74.                 chartScrollbar.graph = graph;
  75.                 chartScrollbar.backgroundColor = "#DDDDDD";
  76.                 chartScrollbar.scrollbarHeight = 30;
  77.                 chartScrollbar.selectedBackgroundColor = "#FFFFFF";
  78.                 chart.addChartScrollbar(chartScrollbar);
  79.  
  80.                 // WRITE
  81.                 chart.write("chartdiv");
  82.             });
  83.  
  84.             // this method is called when chart is first inited as we listen for "dataUpdated" event
  85.             function zoomChart() {
  86.                 // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
  87.                 chart.zoomToDates(new Date(2000, 0), new Date(2003, 0));
  88.             }
  89.         </script>
  90.     </head>
  91.  
  92.     <body>
  93.         <div id="chartdiv" style="width:100%; height:400px;"></div>
  94.     </body>
  95.  
  96. </html>
[HTML] pobierz, plaintext
aras785
29.07.2013, 00:14:18
zapodaj caly kod php smile.gif
krzysiekkurowski
29.07.2013, 10:30:07 
[PHP] pobierz, plaintext 
  1. <?php
  2. 	// Make sure you set the database connection on the next line:
  3. 	$mysqli = new mysqli("localhost", "***", "***", "***");
  4.  
  5. 	/* check connection */
  6. 	if ($mysqli->connect_errno) {
  7. 		header("HTTP/1.0 500 Internal Server Error");
  8. 		exit();
  9. 	}
  10.  
  11. 	$lastTemps = getLastTemps($mysqli);
  12. 	$lastAVGTemps = getAVGTemps($mysqli);
  13. 	$last24hourValues = last24hourValues($mysqli);
  14.  
  15. 	$mysqli->close();
  16.  
  17. 	if($_GET['format'] == json) {
  18. 		header('Content-Type: application/json');
  19. 		print json_encode($lastTemps);
  20. 		exit;
  21. 	}
  22.  
  23. 	header('Refresh: 150; url=index1.php');
  24.  
  25. 	function getLastTemps($mysqli) {
  26. 		$stmt = $mysqli->prepare("SELECT Aussen, dattim FROM dlogtab ORDER BY dattim DESC LIMIT 1");
  27. 		$stmt->execute();
  28. 		$stmt->bind_result($res['Aussen'], $res['dattim']);
  29. 		$stmt->fetch();
  30. 		return $res;
  31. 	}
  32.  
  33. 	function getAVGTemps($mysqli) {
  34. 		$stmt = $mysqli->prepare("SELECT AVG(Aussen) FROM dlogtab WHERE dattim >= SYSDATE() - INTERVAL 1 DAY");
  35. 		$stmt->execute();
  36. 		$stmt->bind_result($res['Aussen']);
  37. 		$stmt->fetch();
  38. 		return $res;
  39. 	}
  40.  
  41. 	function last24hourValues($mysqli) {
  42. 		$stmt = $mysqli->prepare("SELECT Aussen, dattim FROM dlogtab WHERE dattim >= SYSDATE() - INTERVAL 1 DAY");
  43. 		$stmt->execute();
  44. 		$stmt->bind_result($res['Aussen'], $res['dattim']);
  45. 		$rows = array();
  46.  
  47. 		$i = 0;
  48. 		while($stmt->fetch()) {
  49. 			$rows[$i] = array();
  50.             foreach($res as $k=>$v)
  51.                 $rows[$i][$k] = $v;
  52.             $i++;
  53. 		}
  54. 		return $rows;
  55. 	}
  56.  
  57. 	function tempParts($temp, $index) {
  58. 		$parts = explode('.', number_format($temp, 1));
  59. 		return $parts[$index];
  60. 	}
  61.  
  62. ?>
  63.  
  64.  
  65. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  66. <html>
  67.  
  68.     <head>
  69.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  70.         <title>amCharts examples</title>
  71.         <link rel="stylesheet" href="style.css" type="text/css">
  72.         <script src="amcharts/amcharts.js" type="text/javascript"></script>          
  73.         <script type="text/javascript">
  74.             var chart;
  75.             var graph;
  76.  
  77.  
  78.             // months in JS are zero-based, 0 means January 
  79.             var chartData = [
  80. <?php foreach($last24hourValues as $row) { ?>
  81. 		{
  82.            year:new Date(<?php print ($row['dattim']); ?>,0),
  83.             value: <?php print number_format($row['Aussen'], 2); ?>
  84.            }
  85. 		<?php } ?>
  86.  
  87. 			];
  88.  
  89.  
  90.             AmCharts.ready(function () {
  91.                 // SERIAL CHART
  92.                 chart = new AmCharts.AmSerialChart();
  93.                 chart.pathToImages = "amcharts/images/";
  94.                 chart.dataProvider = chartData;
  95.                 chart.marginLeft = 10;
  96.                 chart.categoryField = "year";
  97.                 chart.zoomOutButton = {
  98.                     backgroundColor: '#000000',
  99.                     backgroundAlpha: 0.15
  100.                 };
  101.  
  102.                 // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
  103.                 chart.addListener("dataUpdated", zoomChart);
  104.  
  105.                 // AXES
  106.                 // category
  107.                 var categoryAxis = chart.categoryAxis;
  108.                 categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  109.                 categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
  110.                 categoryAxis.gridAlpha = 0;
  111.  
  112.                 // value
  113.                 var valueAxis = new AmCharts.ValueAxis();
  114.                 valueAxis.axisAlpha = 0;
  115.                 valueAxis.inside = true;
  116.                 chart.addValueAxis(valueAxis);
  117.  
  118.                 // GRAPH                
  119.                 graph = new AmCharts.AmGraph();
  120.                 graph.type = "smoothedLine"; // this line makes the graph smoothed line.
  121.                 graph.lineColor = "#d1655d";
  122.                 graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
  123.                 graph.bullet = "round";
  124.                 graph.bulletSize = 5;
  125.                 graph.lineThickness = 2;
  126.                 graph.valueField = "value";
  127.                 chart.addGraph(graph);
  128.  
  129.                 // CURSOR
  130.                 var chartCursor = new AmCharts.ChartCursor();
  131.                 chartCursor.cursorAlpha = 0;
  132.                 chartCursor.cursorPosition = "mouse";
  133.                 chartCursor.categoryBalloonDateFormat = "YYYY";
  134.                 chart.addChartCursor(chartCursor);
  135.  
  136.                 // SCROLLBAR
  137.                 var chartScrollbar = new AmCharts.ChartScrollbar();
  138.                 chartScrollbar.graph = graph;
  139.                 chartScrollbar.backgroundColor = "#DDDDDD";
  140.                 chartScrollbar.scrollbarHeight = 30;
  141.                 chartScrollbar.selectedBackgroundColor = "#FFFFFF";
  142.                 chart.addChartScrollbar(chartScrollbar);
  143.  
  144.                 // WRITE
  145.                 chart.write("chartdiv");
  146.             });
  147.  
  148.             // this method is called when chart is first inited as we listen for "dataUpdated" event
  149.             function zoomChart() {
  150.                 // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
  151.                 chart.zoomToDates(new Date(2000, 0), new Date(2003, 0));
  152.             }
  153.         </script>
  154.     </head>
  155.  
  156.     <body>
  157.         <div id="chartdiv" style="width:100%; height:400px;"></div>
  158.     </body>
  159.  
  160. </html>
[PHP] pobierz, plaintext
buliq
29.07.2013, 10:44:09
Kod
year:new Date("<?php print ($row['dattim']); ?>"),
?
W jakiej formie masz te pole dattim ? Wyciągnij z niego sam rok po stronie php i z głowy
krzysiekkurowski
29.07.2013, 12:12:19
Hej,

W bazie mam jako timestamp czyli (2013-07-29 10:10:10), ja wlasnie chce wczytac dane z do poziomu minut (dane w bazie beda dodawane co 10 minut).

buliq
29.07.2013, 12:47:44
no to dla przykładu

[PHP] pobierz, plaintext 
  1. $year = date("Y", strtotime($row['dattim']));
[PHP] pobierz, plaintext


itd aż do minut, tylko musisz odpowiednio to ustawić w js po tym( jest w dokumentacji, obecnie twój skrypt ustawia tylko lata)
krzysiekkurowski
30.07.2013, 22:46:19
Witam, mogę prosić o przykład, próbuje twoje sugestie ale niestety nie działa.
brzanek
29.10.2017, 19:52:59
Witam sory za odkopanie ale mam podobny problem.
Tak u mnie wygląda plik odpowiedzialny za pobieranie danych z bazy danych mysql
dane.php
[PHP] pobierz, plaintext 
  1. <?php
  2. ini_set( 'display_errors', 'On' ); 
  3. error_reporting( E_ALL );
  4.  
  5. $con=@mysql_connect('localhost','login','haslo');
  6. mysql_select_db("nazwa_bazy_danych", $con);
  7. mysql_query("SET CHARSET utf8");
  8. die(mysql_error());
  9. $result = mysql_query("SELECT htime, htemperature FROM prognoza_godzinowa WHERE hid_miasto =1") or die(mysql_error());
  10. while($row = mysql_fetch_array($result)) {	
  11.    $rows[] = array(
  12.     "htime" =>  date("d.m.Y H:i", $row['htime']),
  13.     "htemperature" => $row[ 'htemperature' ]
  14.   );
  15. }
  16. echo  json_encode( $rows );
[PHP] pobierz, plaintext


A tak wygląda plik wyświetlający wykres
[PHP] pobierz, plaintext 
  1. <!-- Styles -->
  2. <style>
  3. #chartdiv {
  4. 	width	: 100%;
  5. 	height	: 500px;
  6. }
  7.  
  8. </style>
  9.  
  10. <!-- Resources -->
  11. <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  12. <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  13. <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
  14. <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
  15. <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
  16. <!-- Chart code -->
  17. <script>
  18. var chartData = ('http://brzanek.webd.pl/charts2/dane.php');
  19. var chart = AmCharts.makeChart("chartdiv", {
  20.     "type": "serial",
  21.     "theme": "light",
  22.     "marginRight": 40,
  23.     "marginLeft": 40,
  24.     "autoMarginOffset": 20,
  25.     "mouseWheelZoomEnabled":true,
  26.     "dataDateFormat": "YYYY-MM-DD JJ:NN",
  27.     "valueAxes": [{
  28.         "id": "v1",
  29.         "axisAlpha": 0,
  30.         "position": "left",
  31.         "ignoreAxisWidth":true
  32.     }],
  33.     "balloon": {
  34.         "borderThickness": 1,
  35.         "shadowAlpha": 0
  36.     },
  37.     "graphs": [{
  38.         "id": "g1",
  39.         "balloon":{
  40.           "drop":true,
  41.           "adjustBorderColor":false,
  42.           "color":"#ffffff"
  43.         },
  44.         "bullet": "round",
  45.         "bulletBorderAlpha": 1,
  46.         "bulletColor": "#FFFFFF",
  47.         "bulletSize": 5,
  48.         "hideBulletsCount": 50,
  49.         "lineThickness": 2,
  50.         "title": "red line",
  51.         "useLineColorForBulletBorder": true,
  52.         "valueField": "htemperature",
  53.         "balloonText": "<span style='font-size:18px;'>[[htemperature]]</span>"
  54.     }],
  55.     "chartScrollbar": {
  56.         "graph": "g1",
  57.         "oppositeAxis":false,
  58.         "offset":30,
  59.         "scrollbarHeight": 80,
  60.         "backgroundAlpha": 0,
  61.         "selectedBackgroundAlpha": 0.1,
  62.         "selectedBackgroundColor": "#888888",
  63.         "graphFillAlpha": 0,
  64.         "graphLineAlpha": 0.5,
  65.         "selectedGraphFillAlpha": 0,
  66.         "selectedGraphLineAlpha": 1,
  67.         "autoGridCount":true,
  68.         "color":"#AAAAAA"
  69.     },
  70.     "chartCursor": {
  71.         "pan": true,
  72.         "valueLineEnabled": true,
  73.         "valueLineBalloonEnabled": true,
  74.         "cursorAlpha":1,
  75.         "cursorColor":"#258cbb",
  76.         "limitToGraph":"g1",
  77.         "valueLineAlpha":0.2,
  78.         "valueZoomable":true
  79.     },
  80.     "valueScrollbar":{
  81.       "oppositeAxis":false,
  82.       "offset":50,
  83.       "scrollbarHeight":10
  84.     },
  85.     "categoryField": "htime",
  86.     "categoryAxis": {
  87.         "parseDates": true,
  88.         "dashLength": 1,
  89.         "minorGridEnabled": true
  90.     },
  91.     "export": {
  92.         "enabled": true
  93.     },
  94.     "dataProvider": chartData,
  95.  
  96.  
  97. });
  98.  
  99. chart.addListener("rendered", zoomChart);
  100.  
  101. zoomChart();
  102.  
  103. function zoomChart() {
  104.     chart.zoomToIndexes(chart.dataProvider.length - 10, chart.dataProvider.length - 1);
  105. }
  106. </script>
  107.  
  108. <!-- HTML -->
  109. <div id="chartdiv"></div>
[PHP] pobierz, plaintext

Problem w tym, że nic nie pojawia się na wykresie. Kto podpowie dlaczego tak się dzieje.
gitbejbe
29.10.2017, 22:06:05
Przecież widać na pierwszy rzut oka, że Twoim problemem jest brak konsoli w przeglądarce.

Ps. spoko masz syf na hostingu
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.