Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX][JavaScript][PHP]Wykres jqplot z jquery ajax i baza danych
smiesznylolek
post
Post #1





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

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

Próbuję zrobić wykres (uczę się), który będzie pobierany z bazy danych z użyciem ajaxa jquery oraz sam wykres chce stworzyć za pomocą jqplot. Baza danych nazywa się "wykresy", a tabela "opady" i mam takie kolumny - Id, miesiąc(styczeń,luty itd), oraz opady(ilość opadów). Chcę zrobić wykres w którym na jednej osi będą miesiące a na drugiej opady. Dane pobieram z bazy i chcę je przesłać do pliku gdzie ma być stworzony wykres.

I tu napotykam na pierwszy problem, nie do końca mi wychodzi przesłanie danych za pomocą json'a. Nie wychodzi mi do końca przesłanie wartości z tabeli "miesiac" i "opady" równocześnie, nie wiem co źle robię...
zapewne gdzieś tu leży mój błąd
[PHP] pobierz, plaintext 
  1. while ($row = mysql_fetch_array($result, MYSQL_NUM))  {                    
  2.     array_push($miesiac, $row[0]);
  3.     array_push($ilosc, $row[1]);
  4. }
  5.  
  6. echo  json_encode($ilosc);
[PHP] pobierz, plaintext

teraz jest to napisane typowo pod ilość opadów ale próbowałem w json_encode wpisywać ($miesiac, $ilosc) oraz ($row) ale nic nie dawalo..

Próbowałem więc się skupić na stworzeniu samego wykresu wykorzystując tylko "opady", 
[HTML] pobierz, plaintext 
  1.  success: function(omg)          
  2.       {
  3.  
  4.       // var miesiac = omg;
  5.  
  6.        var opad =  omg;
  7.       $('#output').html("<b>opad: </b>"+opad");
[HTML] pobierz, plaintext


I na stronie wyświetla mi się poprawnie: opad: 12,15,32,20,50,62,45,34,74,63,23,10

ale potem próbuję "wsadzić" to w wykres
[HTML] pobierz, plaintext 
  1. var plot2 = $.jqplot ('chart1', [[opad]], {
[HTML] pobierz, plaintext

i pojawia mi się na nim zaznaczone tylko "12"... A jak przekopiuje 12,15,32,20,50,62,45,34,74,63,23,10 i wkleje w miejsce [[opad]], wykres się rysuje elegancko.

Bardzo bym prosił o pomoc/wyjaśnienie tych dwóch sytuacji, co źle robię. Poniżej wklejam cały kod:
index.php
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
  7.   <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
  8.   <link rel="stylesheet" type="text/css" href="js/jquery.jqplot.css" />
  9.  
  10.     </head>
  11.     <body>
  12.    <h3>Output: </h3>
  13.   <script id="source" language="javascript" type="text/javascript">
  14.   $(function () 
  15.   {
  16.     $.ajax({                                      
  17.       url: 'db.php',                            
  18.       data: "",                                                     
  19.       dataType: 'json',               
  20.       success: function(dane)          
  21.       {       
  22.  
  23.        var opad =  dane;
  24.       $('#output').html("<b>opad: </b>"+opad+"<b>");
  25.   // var miesiac = dane; 
  26.  //   $('#output').html("<b>miesiac: </b>"+miesiac+"<b> opad: </b>"+opad+ "<br/>"); //Set output element html
  27.  
  28.     var plot2 = $.jqplot ('chart1', [[opad]], 
  29.  
  30.  title: 'wykres',  
  31.       axesDefaults: {
  32.         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
  33.       },
  34.       axes: {
  35.  
  36.         xaxis: {
  37.           label: "miesiac",
  38.           pad: 0
  39.         },
  40.         yaxis: {
  41.           label: "opady"
  42.         }
  43.       }
  44.     });
  45.  
  46.  
  47.     } 
  48.     });
  49. }); 
  50.   </script>
  51.         <div id="output"></div>
  52.         <div id="chart1"></div>
  53.     </body>
  54. </html>
[PHP] pobierz, plaintext



db.php
[PHP] pobierz, plaintext 
  1. <?php 
  2.   $host = "localhost";
  3.   $user = "root";
  4.   $pass = "";
  5.  
  6.   $databaseName = "wykres";
  7.   $tableName = "opady";
  8.  
  9.   $con = mysql_connect($host,$user,$pass);
  10.   $dbs = mysql_select_db($databaseName, $con);
  11.  
  12.   $result = mysql_query("SELECT miesiac, ilosc FROM $tableName");          
  13. $miesiac = array();
  14. $ilosc = array();
  15. $tab = array();
  16. while ($row = mysql_fetch_array($result, MYSQL_NUM))  {                    
  17.     array_push($miesiac, $row[0]);
  18.     array_push($ilosc, $row[1]);
  19. }
  20.  
  21. echo  json_encode($ilosc);
  22.  
[PHP] pobierz, plaintext


nikt nie jest w stanie pomóc?
Jeśli chodzi o rysowanie wykresu z zawartości tab "opad", to w tym 
[HTML] pobierz, plaintext 
  1. var plot2 = $.jqplot ('chart1', [[opad]], {
[HTML] pobierz, plaintext

wystarczyło usunąć jeden nawias kwadratowy i działa. Ale teraz w jaki sposób przesłać ilość opadów i miesiące ajaxem i następnie wyświetlić to na wykresie?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
smiesznylolek
post
Post #2





Grupa: Zarejestrowani
Postów: 62
Pomógł: 0
Dołączył: 27.12.2011

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

dzięki wielkie, udało mi się. Dla potomnych

[PHP] pobierz, plaintext 
  1. while ($row = mysql_fetch_array($result, MYSQL_NUM))  {                       
  2.     array_push($miesiac, $row[0]);
  3.     array_push($ilosc, $row[1]);
  4.     //array_push($tab, $row);
  5.  }
  6.  
  7. echo  json_encode(array('ilosc' => $ilosc, 'miesiac'=>$miesiac));
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. success: function(data)          
  2.       {
  3.  
  4.      var ile =data['ilosc'];
  5.      var mies = data['miesiac'];          
  6.  
  7.  
  8.      // $('#output').html("<b>opad: </b>"+ile+"<b>");
  9.         $('#output').html("<b>miesiac: </b>"+mies+"<b> opad: </b>"+ile+ "<br/>");
[PHP] pobierz, plaintext


Wynik, taki jaki oczekiwałem:

miesiac: styczen,luty,marzec,kwiecien,maj,czerwiec,lipiec,sierpien,wrzesien,pazdziernik,l
istopad,grudzien opad: 12,15,32,20,50,62,45,34,74,63,23,10

Dzieki jeszcze raz!:)

@Turson
Usunąłem go ponieważ chciałem napisać tego, bo wszystko jednak było ok, tylko ja sobie źle pobrałem indeksy przez co myślałem że coś nie gra.

Testowałem teraz Twój kod @Turson ale niestety nie działa, a w netbeansie w logu pojawia mi się
"Uncaught SyntaxError: Unexpected token o "

Ten post edytował smiesznylolek 11.03.2014, 17:29:48
Go to the top of the page
+Quote Post

Posty w temacie
- smiesznylolek   [AJAX][JavaScript][PHP]Wykres jqplot z jquery ajax i baza danych   9.03.2014, 13:55:02
- - nospor   Nie: echo json_encode($ilosc); a: echo json...   10.03.2014, 11:51:22
- - Turson   [JAVASCRIPT] pobierz, plaintext success: function...   11.03.2014, 17:21:24
- - smiesznylolek   dzięki wielkie, udało mi się. Dla potomnych [PHP]...   11.03.2014, 17:23:47
- - nospor   CytatTestowałem teraz Twój kod @Turson ale niestet...   11.03.2014, 18:43:11
- - smiesznylolek   już prawie wszystko mi działa tylko została ostatn...   11.03.2014, 19:16:59
- - nospor   Musisz uzyc petlo FOR, przeleciec po miesiacach i ...   12.03.2014, 07:38:02
- - smiesznylolek   tablice LINE? Tylko nie do końca wiem jak zrobić t...   12.03.2014, 15:53:42
- - nospor   Przy zalozeniu ze danych miesiac i ilosc jest taka...   13.03.2014, 16:12:53
- - smiesznylolek   dzięki wielkie stary, działa!!!:)   16.03.2014, 11:40:23

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

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 17.10.2025 - 11:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn