Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wykresy animowane + dane ze zmiennej php + json[inne][PHP][JavaScript]
Nidan23
post
Post #1





Grupa: Zarejestrowani
Postów: 101
Pomógł: 2
Dołączył: 26.04.2019

Ostrzeżenie: (10%)
X----


Otóż sprawa ma się następująco, poszukuję biblioteki bądź poradnika jak tworzyć wykresy animowane (czyli jak najadę na kolumnę/kropkę to wyświetli mi dokładną wartość, choć tyle). Wiem, wiem w internetach jest sporo takich niby rozwiązań, próbowałem korzystać z CanvasJS.com, jednak albo robiłem błąd w pętli, albo nie da rady, bo wyświetlał się tylko ostatni członek klanu a nie każdy. Poniżej wklejam kod:

  1. <?php
  2. $clantag = "#28LJOYOLQ";
  3.  
  4. $clanurl = "https://api.clashofclans.com/v1/clans/" . urlencode($clantag);
  5.  
  6. $ch = curl_init($clanurl);
  7.  
  8. $headr = array();
  9. $headr[] = "Accept: application/json";
  10. $headr[] = "Authorization: Bearer ".$token;
  11.  
  12. curl_setopt($ch, CURLOPT_HTTPHEADER, $headr);
  13. curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
  14. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  15. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  16.  
  17. $res = curl_exec($ch);
  18. $data = json_decode($res, true);
  19. curl_close($ch);
  20.  
  21. if (isset($data["reason"])) {
  22. $errormsg = true;
  23. }
  24.  
  25. $members = $data["memberList"];
  26.  
  27. foreach($members as $member) {
  28.  
  29. $dataPoints = array(
  30.  
  31. array("label"=> $member["name"], "y"=> $member["donations"]),
  32.  
  33. );
  34. ?>

  1. window.onload = function () {
  2.  
  3. var chart = new CanvasJS.Chart("chartContainer", {
  4. animationEnabled: true,
  5. exportEnabled: true,
  6. theme: "light2", // "light1", "light2", "dark1", "dark2"
  7. title:{
  8. text: "Donaty"
  9. },
  10. data: [{
  11. type: "column", //change type to bar, line, area, pie, etc
  12. //indexLabel: "{y}", //Shows y value on all Data Points
  13. indexLabelFontColor: "#5A5757",
  14. indexLabelPlacement: "outside",
  15. dataPoints: <?php echo json_encode($members); ?>
  16. }]
  17. });
  18. chart.render();
  19.  
  20. }


+ wywołanie wykresu ze skryptem z ich biblioteki

  1. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  2. <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>


Więc jak mówiłem, wykres wyświetla tylko jedną osobę a nie wszystkie, co jest kłopotem, a że dane są cały czas aktualizowane, to prowadzanie stałych danych mija się z celem.



PS. Prawdopodobnie nie umiem używać google'a, więc nie krzyczcie jak jednak znajdziecie coś co może zadziałać.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
gitbejbe
post
Post #2





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

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


Cytat
+ zmienna $member działa poprawnie i masz wszystko opisane w 1 fragmencie kodu elegancko.

nie pytałem czy działa tylko co zawiera. wklej wynik var_dump($member);

Cytat
Jestem skreślony, bo się pytam? Szkoda, bo spędziłem na szukaniu 6 godzin i bez potrzeby staram się nie pisać postów...

własnie, bo spędziłeś 6 godzin na szukaniu, zamiast samemu ogarniać temat metodą prób i błędów, starać się dopasować gotowy kod do swoich potrzeb. To co wkleiłeś to nawet nie jest próba rozwiązania problemu.

Ja na swoją wiedzę ciężko pracowałem, podobnie jak inni na tym forum. Nie raz pomagałem i dalej pomagam, jest jednak zasadnicza różnica pomiędzy pomocą a pisaniem gotowców - bo tego oczkujesz i tutaj jest u mnie skreślony.

Cytat
Jeśli masz pomysł na bezpośrednie podpięcie się pod wykres, bez php z tymi danymi powyżej, które działają i są wyświetlane w formie tabelki, ale stwierdziłem, że pora pójść dalej, pora na ładniejsze przedstawienie danych, to chętnie posłucham i zastosuje.


Pobierasz dane z zewnętrznego serwisu który udosepnia api. Jeśli nie zapisujesz gdzieś dalej tych danych, nie potrzebujesz php'a. Dane możesz pobrać ajax'em i obrobić w Js (np tak jak w funkcji updateData w linku z przykładem).

Przeanalizuj przykład pod adresem który Ci podałem w poprzednim poście. Sprawdz co robi funkcja addData. Używaj konsoli w przeglądarce, sprawdzaj zmienne, wyciągaj wnioski i kombinuj. Widzę że nie ogarniasz, ale uwierz mi że to mega prosty skrypt do napisania w parę minut. Cały kod w tym przykładzie wymaga tylko drobnych poprawek i masz rozwiązanie którego szukasz. Jak już to ogarniesz, to na koniec przemyśl kwestie samego pobierania danych - aby nie robić tego zbyt często. Sprawdź czy dostawca api nie narzuca jakiś limitów połączeń na dobę/godzinę. Poprostu nie spamuj ich serwerów bo Cię zablokują.

Ten post edytował gitbejbe 16.05.2019, 19:17:28
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 10.10.2025 - 07:14