Zaawansowana biblioteka do wykresów

0

Poszukuję biblioteki do wykresów z takimi wymaganiami, czy ktoś jest w stanie coś konkretnego polecić i miał z tym styczność?
1) Głównie wykresy liniowe (to nie problem)
2) responsywność
3) przewijanie wykresu w prawo i lewo (żadnej biblioteki z ta funkcją nie znalazłem)
4) 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.

0

Jak prezentacja jakichkolwiek danych to tylko D3.js.

0

Wygląda ciekawie;) Responsywnie pod bootstrapem nie będzie problemu?

0

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.

0

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ę).

1

Przykład tego co chcesz uzyskać: http://bl.ocks.org/benjchristensen/2657838

0

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"]]]
0

Obsłuży dowolne dane, które powiesz mu jak sparsować.

0

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ć?

0

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0