Jaki jest najlepszy sposób programowej wizualizacji mapy drogowej w Internecie?

Question

Mamy listę rezultatów w bazie danych całej szeregu projektów z punktami danych:

• Projektu
• Funkcja
• Dostawa Data

Chciałem dowiedzieć się najlepszy sposób wizualizacji tego w Internecie w pewnym widoku osi czasu. Czy ktoś może zaproponować dobre sposoby na zrobienie tego? I

Idealnie chciałbym móc kliknąć element, który można następnie przejść do strony ze szczegółami, na której opisujemy każdy opis projektu itp.

Answer 1

Cóż, wygląda na to, że oglądasz mapę Gantta, ale jeśli chcesz tylko oznaczyć datę ukończenia, to powinna zadziałać linia czasu.

Google Visualization API

pierwsze będę spojrzeć na Google Visualization API. W szczególności: annotated timeline visualization.Jest to bardzo podobne do osi czasu używanej na Google finance website. Przy użyciu tego widoku każdy projekt może być poziomą linią w całym widoku, z odpowiednimi kamieniami milowymi oznaczonymi dla każdego projektu. Zwróć uwagę, że znaczniki są interaktywne. Ponieważ to wszystko jest JavaScriptem, możesz także mieć sterowanie krzyżowe, więc kliknięcie czegoś na osi czasu może na przykład zmienić inną wizualizację na tej samej stronie.

Możesz wypróbować różne konfiguracje wszystkich wizualizacji dostępnych za pomocą Google Code Playground. Powinno to zapewnić łatwy sposób sprawdzenia, czy ten (lub inny) spełniałby twoje wymagania.

Zrobiłem kilka eksperymentów z placem zabaw. Wypróbuj poniższy kod, jeśli chcesz. Możesz go skopiować/wkleić do edytora kodów zabaw.

function drawVisualization() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Project'); 
    data.addColumn('string', 'title1'); 
    data.addColumn('string', 'text1'); 
    data.addColumn('number', 'Project'); 
    data.addColumn('string', 'title2'); 
    data.addColumn('string', 'text2'); 
    data.addRows(7); 
    data.setValue(0, 0, new Date(2008, 1 ,1)); 
    data.setValue(0, 1, 1); 
    data.setValue(0, 2, 'P1:MS1'); 
    data.setValue(0, 3, 'Project begins'); 
    data.setValue(1, 0, new Date(2008, 1 ,2)); 
    data.setValue(1, 1, 1); 
    data.setValue(1, 4, 2); 
    data.setValue(1, 5, 'P2:MS1'); 
    data.setValue(1, 6, 'Project begins'); 
    data.setValue(2, 0, new Date(2008, 1 ,3)); 
    data.setValue(2, 1, 1); 
    data.setValue(2, 4, 2); 
    data.setValue(3, 0, new Date(2008, 1 ,4)); 
    data.setValue(3, 1, 1); 
    data.setValue(3, 4, 2); 
    data.setValue(3, 5, 'P2:MS2'); 
    data.setValue(3, 6, 'Completed development'); 
    data.setValue(4, 0, new Date(2008, 1 ,5)); 
    data.setValue(4, 1, 1); 
    data.setValue(4, 2, 'P1:MS2'); 
    data.setValue(4, 3, 'Completed testing'); 
    data.setValue(4, 4, 2); 
    data.setValue(5, 0, new Date(2008, 1 ,6)); 
    data.setValue(5, 1, 1); 
    data.setValue(5, 4, 2); 
    data.setValue(6, 0, new Date(2008, 1 ,7)); 
    data.setValue(6, 4, 2); 

    var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
    document.getElementById('visualization')); 
    annotatedtimeline.draw(data, { 
          'displayAnnotations': true, 
          'displayExactValues': true, 
          'displayRangeSelector' : false, 
          'displayZoomButtons': false, 
          'legendPosition': 'newRow', 
          'max': 3, 
          'min': 0, 
          'scaleType': 'allfixed', 
          'thickness': 2, 
          }); 
} 

Google Charts API

Inną opcją byłoby użyć Google Charts API wygenerować wykres Gantta. Jest to nieco bardziej skomplikowane, ponieważ nie ma wizualizacji dla tego po wyjęciu z pudełka. Jednak za pomocą poziomego wykresu słupkowego możliwe byłoby zakręcenie własnego. This article zabierze Cię przez kolejne kroki wymagane do wykresu Gantta, który wygląda mniej więcej tak:

Interesującym punktem jest to, że wykres Gantta powyżej jest generowana dynamicznie za pośrednictwem interfejsu API wykresów przy użyciu adresu URL. Kliknij na poniższy adres URL:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Dobrze myślę ów całkiem cool.

FusionWidgets v3

Jako ostatni sugestii można spojrzeć na FusionWidgets, który ma bardzo rozbudowane możliwości wizualizacji. Wszystkie ich widżety są oparte na pamięci flash. Jest wymieniony na końcu, ponieważ nie jest otwarty i nie jest bezpłatny. Nie używałem tego osobiście, w przeciwieństwie do powyższych dwóch, ale przykłady wyglądają świetnie.

Mam nadzieję, że te sugestie pomogą.

Answer 2

Użyj widgetu internetowego. Jest bezpłatny i open source.

alt text http://img24.imageshack.us/img24/1838/captureky.png

Edit: można grać z kontrolą z Google Doc Spreedsheet jeśli nie jesteś pewien do nurkowania w jeszcze http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA

Answer 3

Czy próbowałeś Daypilot kontroli? Dostępna jest darmowa wersja, którą możesz wypróbować.

Answer 4

Oto niektóre narzędzia, które mogą być dobre dla tego rodzaju zadania:

Flash

• Flare
  • Something like this mógł pracować. Możesz umieścić oś czasu na osi X. Być może możesz grupować projekty pionowo według funkcji.
  • This could be a good visualization, jeśli chcesz pokazać liczbę osób zużywaną przez każdy projekt.
  • There is a timeline view in the demo

JavaScript

• Protovis - Biblioteka ta jest podobna do wyrównania, ale dla JavaScript
  • Look at this visualization
• ProcessingJS - Ta biblioteka ma potencjał jako ogólna biblioteka wizualizacji.