Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Dwie skale osi Y + wykresy przerywane
Forum PHP.pl > Forum > Przedszkole
d0m1n1k_
Witam,
próbuję przygotować szablon wykresów pod dane z MySQL.
Podstawowe założenia to:
  • Dwa typy rysowania: Area (dla avg) i Line (dla individual)
  • Dane będą pobierane z MySQL
  • Oś Y będzie posiadać dwie skale: Dla cen i dla przebiegów
  • Wykresy muszą działać również wtedy kiedy nie będzie ciągłości danych (np. ceny dodane dnia A, a przebiegi dnia cool.gif


I przy ostatnich dwóch parametrach mam duży problem. Skleciłem taki szablonik.
Po pierwsze osie Y nie stosują się do moich warunków.
Po drugie - i to znacznie gorsze - nigdzie nie znalazłem rozwiązania jak mogę tworzyć wykresy kiedy dane nie są ciągłe.
Mówię tu o choćby takiej sytuacji:

  1. ['Okres', 'Przebieg', 'Przebieg Avg', 'Cena', 'Cena Avg'],
  2. ['2004-05', 165000, 150000, 15500, 16000],
  3. ['2005-06', 185000, *, 14599, 15500],
  4. ['2006-07', 187500, 188167, 14500, 15000],
  5. ['2007-08', 190000, 200000, *, 14500],
  6. ['2008-09', *, 250000, 10000, 12500],
  7. ['2010-10', *, *, *, 10000]


gdzie * oznacza brak danej wartości

Bardzo proszę o pomoc.
Z JS jestem na bakier, a jak widać z GoogleCharts również.
Za każdą pomoc z góry dziękuję.
Pyton_000
Ad.2
Jeśli chodzi Ci o to żeby była dziura to wstawiasz null. Jeśli chcesz żeby tej dziury nie było to dodatkowo w opcje wstawiasz: interpolateNulls: true,

Ad. 1
https://jsfiddle.net/vg5tfbrc/1/
d0m1n1k_
Bardzo ładnie wygląda ten układ który poprawiłeś.
A powiedz mi czy jest możliwość zastąpienie AreaChart stylem Stepped Area Chart?
Pyton_000
zamień area -> steppedArea
d0m1n1k_
I wszystko pięknie. Jeszcze jeśli mogę spytać w ramach bonusa, jak można umieścić dwa różne wykresy na jednej stronie?
Pyton_000
Tak samo jak 1 smile.gif Dodajesz kolejny div i oddzielną deklarację i tyle.
d0m1n1k_
Wszystko co mi podpowiedziałeś się sprawdziło i działa pięknie, ale mam problem z estetyką oraz faktem, że pobieram wszystko do tablicy, nie będącego sortowane.

Tak wygląda tablica:

  1. array(8) {
  2. [0]=>
  3. array(2) {
  4. ["przeb_avg"]=>
  5. string(6) "268337"
  6. ["data"]=>
  7. string(10) "2016-01-06"
  8. }
  9. [1]=>
  10. array(2) {
  11. ["przeb_avg"]=>
  12. string(6) "225924"
  13. ["data"]=>
  14. string(10) "2016-01-23"
  15. }
  16. [2]=>
  17. array(2) {
  18. ["przeb_ind"]=>
  19. string(6) "255000"
  20. ["data"]=>
  21. string(10) "2015-11-13"
  22. }
  23. [3]=>
  24. array(2) {
  25. ["przeb_ind"]=>
  26. string(6) "265000"
  27. ["data"]=>
  28. string(10) "2016-01-19"
  29. }
  30. [4]=>
  31. array(2) {
  32. ["cena_avg"]=>
  33. string(4) "8574"
  34. ["data"]=>
  35. string(10) "2016-01-06"
  36. }
  37. [5]=>
  38. array(2) {
  39. ["cena_avg"]=>
  40. string(4) "9740"
  41. ["data"]=>
  42. string(10) "2016-01-23"
  43. }
  44. [6]=>
  45. array(2) {
  46. ["cena_ind"]=>
  47. string(5) "11900"
  48. ["data"]=>
  49. string(10) "2015-11-13"
  50. }
  51. [7]=>
  52. array(2) {
  53. ["cena_ind"]=>
  54. string(5) "10900"
  55. ["data"]=>
  56. string(10) "2015-11-15"
  57. }
  58. }


a tak wygląda kod końcowy tego wykresu.

Co mogę zrobić aby samo segregowało daty i wszystko wyglądało płynnie?
Pyton_000
Hehe ja tak patrzę że się zaraz nauczę całego ich api smile.gif

poniżej data dodaj:

data.sort({column: 0})
d0m1n1k_
To nie ma za co ;-)
Ale tak na poważnie, to data.sort działa.
Ale jeśli mogę jeszcze zapytać... co zrobić aby takie same daty scalało a nie tylko sortowało.

I druga rzecz - gdzie jest manual googlo-apiego? Tutaj?

A no i druga zagwozdka. Jak mogę wybrane kolumny (np. cena avg) przeciągnąć od początku do końca jeśli są gdzieś po środku?
Chodzi mi o to, że gdy przykładowo ceny średnie były przesłane w styczniu, a ceny indywidualnych egzemplarzy w lutym, to aby area się nakładał do końca wykresu z ostatniego dostępnego pola.

A tak na marginesie - to duże piwo Ci się należy za pomoc :-)
Pyton_000
Co do scalania to albo musisz sobie w skrypcie który Ci to zwraca zrobić albo w JS bezpośrednio.

Tak. Link który podałeś.

Tutaj też trzeba zadziałać już czymś (albo JS albo skrypt wypluwający)
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.