Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript][PHP]Wykres jqplot z jquery ajax i baza danych
Forum PHP.pl > Forum > Przedszkole
smiesznylolek
9.03.2014, 13:55:02
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?
nospor
10.03.2014, 11:51:22
Nie: echo json_encode($ilosc);
a: echo json_encode(array('ilosc' => $ilosc, 'miesiac'=>$miesiac));
A pozniej w js pobierasz sobie indeks ktory chcesz
Turson
11.03.2014, 17:21:24 
[JAVASCRIPT] pobierz, plaintext 
  1.  success: function(msg)
  2. {
  3. var obj = $.parseJSON(msg);
  4. var ile =obj.ilosc;
  5. var mies = obj.miesiac; 
[JAVASCRIPT] pobierz, plaintext


@smiesznylolek, czemu usunąłeś swój post?
smiesznylolek
11.03.2014, 17:23:47
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 "
nospor
11.03.2014, 18:43:11
Cytat
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 "
Oczywiscie ze nie dziala, bo Turson myslal ze dostajesz tekst a nie gotowy juz obiekt JSON. W przypadku jak masz teraz, gdzie masz od razu obiekt JSON, kod Tursona nie ma racji bytu
smiesznylolek
11.03.2014, 19:16:59
już prawie wszystko mi działa tylko została ostatnia rzecz, żeby wykres wyglądał jak należy. Nie wiem w jaki sposób mam zapisać dane z "mies" i "ile". W żeby na jednej osi były miesiące a na drugiej, przyporządkowane im ilości.

Z tego co patrzyłem na tutki, to ogólnie ten fragment kodu powinien wyglądać tak:
[PHP] pobierz, plaintext 
  1. var line1=[['styczen', 12], ['luty',15], ['marzec',32], ['kwiecien',20],
  2.      ['maj',50], ['czerwiec',62], ['lipiec',45], ['sierpien',34],
  3.       ['wrzesien',74], ['pazdziernik',63], ['listopad',23], ['grudzien',10]];
  4.   var plot1 = $.jqplot('chart1', [line1], {
[PHP] pobierz, plaintext


I właśnie w tym momencie pojawia się pytanie jak zapisać dane z mies i ile, aby były odczytywane w w/w sposób?
nospor
12.03.2014, 07:38:02
Musisz uzyc petlo FOR, przeleciec po miesiacach i wygenerowac swoją tablice LINE
smiesznylolek
12.03.2014, 15:53:42
tablice LINE? Tylko nie do końca wiem jak zrobić taką pętlę aby wynikiem jej był zapis taki jak w przykładzie, w sensie jak dodaj nawiasy kwadratowe i połączyć je jeszcze z ilością opadów. Prosił bym o jakiś mały przykład
nospor
13.03.2014, 16:12:53
Przy zalozeniu ze danych miesiac i ilosc jest taka sama i tak samo są indeksowane:
Kod
var ile =data['ilosc'];
var mies = data['miesiac'];      
var line1=[];
for (var i in ile) {
line1.push([mies[i], ile[i]]);
}
Pisane z palca, nie sprawdzane
smiesznylolek
16.03.2014, 11:40:23
dzięki wielkie stary, działa!!!:)
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.