Poszukuję biblioteki do wykresów z takimi wymaganiami, czy ktoś jest w stanie coś konkretnego polecić i miał z tym styczność?
Jak prezentacja jakichkolwiek danych to tylko D3.js.
Wygląda ciekawie;) Responsywnie pod bootstrapem nie będzie problemu?
Będzie tak jak zakodujesz. D3 nie jest stricte biblioteką do wykresów, jest biblioteką do przetwarzania danych na ich reprezentację w DOMie. Możesz to zrobić np. generując obrazek SVG i wtedy będzie to tak responsywne jak to ostylujesz.
A no tak, najlepiej na SVG zamienić. Musze jeszcze wymyslić jak przesuwac taki wykres w prawo i lewo (tylko tutaj SVG raczej nie wchodzi w grę).
Przykład tego co chcesz uzyskać: http://bl.ocks.org/benjchristensen/2657838
Odświeżanie jest automatyczne ale najbardziej mi zależy aby była możliwość przesunięcia w tył aby zerknąć na dane historyczne.
I jeszcze mam pytanie czy d3.js obsłuży jsona w takiej postaci?:
[[["2014-11-11 17:00:00","10.1"],["2014-11-11 18:00:00","9.9"],["2014-11-11 19:00:00","10.1"]],
[["2014-11-11 17:00:00","6.8"],["2014-11-11 18:00:00","6.1"],["2014-11-11 19:00:00","5.6"]]]
Obsłuży dowolne dane, które powiesz mu jak sparsować.
Próbuję z tą biblioteką na przykładzie:
$(document).ready(function () {
d3.json('http://nvd3.org/examples/cumulativeLineData.json', function (data) {
nv.addGraph(function () {
var chart = nv.models.cumulativeLineChart()
.x(function (d) { return d[0] })
.y(function (d) { return d[1] / 100 }) //adjusting, 100% is 1.00, not 100 as it is in the data
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
;
chart.xAxis
.tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000])
.tickFormat(function (d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format(',.1%'));
d3.select('#chart svg')
.datum(data)
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
return chart;
});
});
});
Lecz dostaje błąd gdy podpinam link do danych:
XMLHttpRequest cannot load http://nvd3.org/examples/cumulativeLineData.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:61249' is therefore not allowed access.
Jak sobie z tym poradzić?
Nie możesz robić zapytań XHR między witrynami, jeśli na to nie zezwoli witryna odbierająca zapytanie. Musisz pobrać plik, z którym chcesz pracować i pobierać go lokalnie.
Znalazłem coś takiego:
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en
Dostep do pliku juz chyba jest ale wurzuca błąd:
Uncaught ReferenceError: nv is not defined
Rozwiązanie jest takie, żebyś wysyłał request o te dane JSON do własnego serwera. A Twój serwer może je ściągać z zewnątrz jeżeli jest potrzeba.
Możesz podać jakiś przykład jak to zrobić mniej więcej?
// Na własnym serwerze w korzeniu domeny plik cumulativeLineData.php
readfile ('http://nvd3.org/examples/cumulativeLineData.json');
// a kod js:
d3.json('/cumulativeLineData.php', function (data) {
Ale na nv is undefined Ci to nie pomoże. Czym ma być to nv to niestety nie wiem - brak większej ilości kodu oraz informacji skąd pochodzi. Wiem, że ślepe kopiowanie przykładów to zły pomysł.
dzek69 napisał(a):
Ale na
nvis undefined Ci to nie pomoże. Czym ma być tonvto niestety nie wiem - brak większej ilości kodu oraz informacji skąd pochodzi. Wiem, że ślepe kopiowanie przykładów to zły pomysł.
Też mnie to właśnie dziwi. Niby taka wielka biblioteka do wykresów a taka elementarna rzecz nie jest wytłumaczona..:(
Skoro używasz nakładki do wykresów to wypadało by się z nią zapoznać: http://nvd3.org/
dzek69 napisał(a):
// Na własnym serwerze w korzeniu domeny plik cumulativeLineData.php
readfile ('http://nvd3.org/examples/cumulativeLineData.json');
Ok, kopiuje sobie tego jsona do siebie na serwer (takich pliczków będe miał kilka). Możesz mi dokładnie wyjaśnic o co chodzi z "korzeniem domeny". Mam to na zwykłym serwerze (z hostingera). Czyli gdzie dokładnie musze wstawić "readfile" ? (sorki za takie elementarne pytania ale nie moge sie doszukać tego)
chodzi o to, że zalinkowałem w js zaczynając od slasha. czyli jak jesteś na podstronie http://domena.pl/dupa/3.html to taki zapis pobierze od korzenia domeny czyli http://domena.pl/ czyli http://domena.pl/cumulativeLineData.json
aa, rozumiem - myslałem że to jakaś głębsza myśl:) Tylko co w momencie gdy mam ten plik na moim serwerze a aplikację cały czas piszę i testuje na localhoscie (mnie będzie problemu z pobraniem tego pliku?) ?
no to na localhoście też możesz mieć taki plik php
aa, czyli pliki serwerowe podpiąć dopiero w momencie wdrożenia tak, a obecnie w ramach testów i pisania pobierać je sobie u siebie lokalnie?
no a jaką widzisz różnicę czy to leży tu czy tu?
Chodzi mi o to że jeżeli lokalnie bede pobierał ten plik nawet z mojego serwera w sieci to może być :
not Access-Control-Allow-Origin
no tak, nie podawaj domeny przy requestach ajax i ciągnij ze swojej własnej (czyli localhost u Ciebie na kompie)
Sebastiano napisał(a):
Poszukuję biblioteki do wykresów z takimi wymaganiami, czy ktoś jest w stanie coś konkretnego polecić i miał z tym styczność?
- Głównie wykresy liniowe (to nie problem)
- responsywność
- przewijanie wykresu w prawo i lewo (żadnej biblioteki z ta funkcją nie znalazłem)
- dane będą w JSON, lecz wykres ma być generowany poprzez podanie interwału czasowego "od do" (np. wartości temperatury od 2 marca 2012 do 19 grudnia 2012) i tylko te dane muszą być pobrane z danego pliku JSON.
JSXGRaph
Wyszukałem jeszcze highcharts.js - biblioteka jest darmowa dla rozwiązań niekomercyjnych. Czy ktoś korzystał?
Jeszcze raz. Przyjrzałeś się http://jsxgraph.uni-bayreuth.de/wp/ Bo ma i przewijanie i skalowanie i bardzo wiele możliwości. potężna biblioteka