Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Wykresy bootstrap i php
Cliassi
post 11.02.2014, 16:51:15
Post #1





Grupa: Zarejestrowani
Postów: 142
Pomógł: 0
Dołączył: 29.04.2012

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


Witam,

Korzystając z wykresów bootstrap chciałbym wyświetlić wykresy w pętli o różnych wartościach.

Kod jaki jest potrzebny do wygenerowania wykresu:
  1. <div id="pie-chart" class="chart-placeholder">
  2.  
  3. </div>


A tutaj wypełnianie wykresu

  1. <script type="text/javascript">
  2.  
  3.  
  4. /* Pie chart starts */
  5.  
  6. $(function () {
  7.  
  8. var data = [];
  9. var series = 2;
  10. for( var i = 0; i<series; i++)
  11. {
  12. data[i] = { label: "Koszt "+(i+1), data: Math.floor(Math.random()*10)+1 }
  13. }
  14.  
  15. $.plot($("#pie-chart"), data,
  16. {
  17. series: {
  18. pie: {
  19. show: true,
  20. radius: 1,
  21. label: {
  22. show: true,
  23. radius: 3/4,
  24. formatter: function(label, series){
  25. return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
  26. },
  27. background: { opacity: 0 }
  28. }
  29. }
  30. },
  31. grid: {hoverable: true},
  32. legend: {
  33. show: false
  34. },
  35. colors: ["#C0C0C0","#82bf00"]
  36. });
  37.  
  38. /* Pie chart ends */
  39.  
  40. });
  41.  
  42.  
  43. </script>


chciałbym aby dane nie losowały się z JavaScriptu tylko były podawane w pętli . Macie pomysł jak to zrobić ?
Go to the top of the page
+Quote Post
adeptofvoltron
post 11.02.2014, 18:24:27
Post #2





Grupa: Zarejestrowani
Postów: 51
Pomógł: 2
Dołączył: 4.09.2013

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


po pierwsze to chyba zły dział na taki temat.

Jesli chcesz w pętli dane podać polecam:
http://pl1.php.net/manual/en/control-structures.foreach.php
Go to the top of the page
+Quote Post
Cliassi
post 11.02.2014, 19:07:10
Post #3





Grupa: Zarejestrowani
Postów: 142
Pomógł: 0
Dołączył: 29.04.2012

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


ale nie wiem co podać (na jakiej zasadzie budowane są wykresy) a nie jaką pętlę zastosować.
Go to the top of the page
+Quote Post
gitbejbe
post 11.02.2014, 22:05:57
Post #4





Grupa: Zarejestrowani
Postów: 516
Pomógł: 63
Dołączył: 27.08.2012

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


Cytat
Korzystając z wykresów bootstrap chciałbym wyświetlić wykresy w pętli o różnych wartościach.

co chciałbyś ?!
Cytat
chciałbym aby dane nie losowały się z JavaScriptu tylko były podawane w pętli . Macie pomysł jak to zrobić ?


a to co to jest ?
  1. var data = [];
  2. var series = 2;
  3. for( var i = 0; i<series; i++)
  4. {
  5. data[i] = { label: "Koszt "+(i+1), data: Math.floor(Math.random()*10)+1 }
  6. }

dane są przecież tworzone w pętli ?

strzelam, ze chcesz wrzucić swoje własne dane - np z php'a i nie wiesz jak to zrobić. Najprościej to po pierwsze: wyświetlasz sobie console.log(data) sprowadzasz jak wygląda struktura danych. Jeśli dane chcesz wklepac z js'a to nie ma tutaj żadnej filozofii. Jeśli z php to tak samo, z tym, że muszisz dane (z bazy, z palca, z kosmosu) zapisać w php'owskich tablicach i na koniec przekonwertować do formatu json (json_encode($jakies_tam_dane_w_php)).
Jeśli jednak nie chodzi o to, to problem na 100% leży w tym że sam nie rozumiesz tego czego chcesz - na co dowód mamy w Twoich wypowiedziach.

EDIT:
wykres tworzony jest na podsatwie punktów osi x,y. Czyli dla każdego pakietu danych musisz podać wartosc [osi_y(wartosc),osi_x(czas-timestamp lub wartosc)]. 'label' jest nazwą danej serii - widnieje na legendzie. najczęściej taki pakiet danych mozna zapisać w taki sposób:
series {
label: 'nazwa_serii',
data : [[0, 3], [4, 8], [8, 5], [9, 13]]
}

Ten post edytował gitbejbe 11.02.2014, 22:18:49
Go to the top of the page
+Quote Post
Cliassi
post 13.02.2014, 15:07:23
Post #5





Grupa: Zarejestrowani
Postów: 142
Pomógł: 0
Dołączył: 29.04.2012

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


@gitbejbe tak chodzi o wrzucenie danych z php a dokładnie z bazy danych. Problem jest taki, że przy 1 wykresie to działa a przy wielu nie wiem jak odwoływać się do nazw divów(bo muszą być inne). nie da się tych parametrów podawać jak 'parametr' diva np. w procentach ile ma zająć ?
Go to the top of the page
+Quote Post
gitbejbe
post 13.02.2014, 22:32:46
Post #6





Grupa: Zarejestrowani
Postów: 516
Pomógł: 63
Dołączył: 27.08.2012

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


Cytat
Problem jest taki, że przy 1 wykresie to działa a przy wielu nie wiem jak odwoływać się do nazw divów(bo muszą być inne)

bez różnicy jest ile wykresów sobie wstawisz, bo każdy deklarujesz dla konkretnego div'a

  1. <div id="id_diva_nr1"></div>
  2. <div id="id_diva_nr2"></div>

  1. var dane_dla_wykresu = [[11,22],[12,23],[15,43]...[123,231] itd];
  2. var dane_dla_wykresu2 = [[31,24],[72,23],[85,42]...[183,211] itd];
  3.  
  4. //wykres 1
  5. $.plot($("#id_diva_nr1"), dane_dla_wykresu,
  6. {
  7. //jakies opcje
  8. });
  9. //wykres 2
  10. $.plot($("#id_diva_nr2"), dane_dla_wykresu2,
  11. {
  12. //jakies opcje
  13. });


Cytat
nie da się tych parametrów podawać jak 'parametr' diva np. w procentach ile ma zająć ?

Tutaj nie czaje o co Ci chodzi.

Napisz jakiego gotowca używasz, łatwiej będzie pomóc. Ja od siebie polecam hightchart lub flot js
Go to the top of the page
+Quote Post
Cliassi
post 13.02.2014, 23:31:05
Post #7





Grupa: Zarejestrowani
Postów: 142
Pomógł: 0
Dołączył: 29.04.2012

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


chodzi o to aby generować wykres w ten sposób:

  1. <div id="pie-chart" class="chart-placeholder" wartosc1="20" wartosc2="80">
  2.  
  3. </div>

oczywiscie suma wartości musiałaby być 100.
Go to the top of the page
+Quote Post
gitbejbe
post 16.02.2014, 12:49:38
Post #8





Grupa: Zarejestrowani
Postów: 516
Pomógł: 63
Dołączył: 27.08.2012

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


Cytat
<div id="pie-chart" class="chart-placeholder" wartosc1="20" wartosc2="80">

niby jak to ma działać ? po za tym, kazda wartosc składa sie z dwóch punktów, X i Y.

masz: http://www.highcharts.com/demo/
popatrz sobie na przykłady wykresów - kod do podglądu masz pod każdym wykresem w buttonie " Edit in jsFiddle"
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 13.07.2025 - 11:58