Postanowiłem sprawdzić 8 skryptów (oprócz Google Charts) do wykresów, aby sprawdzić, jakie są ich możliwości konfigurowania, prezentacji oraz prostoty wdrożenia. Oto one:
Na końcu artykułu znajduje się tabelka z podsumowaniem możliwości poszczególnych usług.
Ta metoda jest jedyną w zestawieniu, która umożliwia wygenerowanie wykresu jako obrazek - bez konieczności skryptów po stronie naszego serwera (co jest całkiem przydatne, kiedy mamy np. darmowy hosting bez wsparcia dla bibliotek graficznych). Zasadniczo jedyną wadą tego typu obrazków jest brak interakcji - co jest oczywiste w przypadku obrazka. Oprócz dużej liczby dostępnych wykresów, możliwości konfiguracji - możliwe jest także stworzenie "nietypowych" reprezentacji danych - np. jako kod QR.
Zalety:
- duża ilość wykresów
- spore możliwości w dostosowywaniu wyglądu wykresu (kolory, widoczne osie, legenda, linie pomocnicze)
- "nietypowe" formy prezentacji danych - kod QR
- prosta instalacja
- doskonała dokumentacja
Wady:
- brak interakcji (obrazek)
- zamknięty kod
- konieczność połączenia z internetem
- brak gradientu przy wykresie liniowym wypełnionym
Przykład
<img src="http://chart.apis.google.com/chart?cht=lc&chs=530x250&chd=t:[dane]&chds=110.8925247,238.8690948&chxr=1,110.8925247,238.8690948 &chco=45F1FF&chxt=x,y&chxs=0,cccccc|1,cccccc&chf=c,lg,90,777777,0,222222,1|bg,s,000000&chm=B,444444,0,0,0|o,45F1FF,0,-1,3.5|h,666666,0,::.2,0.5,-1|V,666666,0,::4,0.5,-1" />
Jak się tam dostać:
Jeżeli brak interakcji w Google Charts bardzo przeszkadza - wówczas Google przygotował rozszerzoną wersję nazwaną Visualization API. W zależności od typów wykresów zastosowano tutaj technologię JavaScript lub Flash. Oprócz standardowych wykresów jak kołowy, liniowy czy słupkowy możemy znaleźć także możliwość prezentowania danych na mapie, czy w postaci liczników (samochodowych). Dodatkowo w katalogu z różnymi modelami prezentacji znajdują się także produkty firm trzecich - które mogą być równie ciekawe. Niestety w testowanym Area Chart podobnie jak w Line Chart możliwości dopasowania do naszych potrzeb (chociażby poprzez ustawienie koloru tła) są bardzo małe. Dodatkowo w przypadku wygenerowania wykresu z dużej ilości danych podpis pod współrzędną x jest nieczytelny.
Zalety:
- duża ilość wykresów (interaktywnych)
- stosunkowo łatwa instalacja
- rozszerzenia ze strony firm trzecich
- doskonała dokumentacja
Wady:
- w niektórych domyślnych wykresach małe możliwości konfiguracji
- zamknięty kod
- konieczność połączenia z internetem (dostęp do Google API)
- brak możliwości jakiegokolwiek gradientu
- brak możliwości zdefiniowania koloru wykresu
- brak możliwości zdefiniowania wielkości czcionki na współrzędnej x
Przykład
function drawVisualization() {
var d1 =[.. dane ..];
var data = new google.visualization.DataTable();
data.addColumn('string', 'wysokość');
data.addColumn('number', 'wysokość');
data.addRows(d1.length);
for (var i = 0; i < d1.length; ++i) {
if (i%4 == 0)
data.setCell(i, 0, i+'');
data.setCell(i, 1, d1[i]);
}
// Create and draw the visualization.
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Przekrój Wrocław - Trzebnica',
titleColor:'#ccc',
isStacked: false,
width: 530,
height: 300,
fontSize:12,
legendTextColor:'#ccc',
pointSize:3,
backgroundColor: '#222',
colors: ['#aaa'],
hAxis: {textColor: '#ccc'},
vAxis: {textColor: '#ccc', baseline: 100}
});
}
google.setOnLoadCallback(drawVisualization);
Jak tam się dostać?
Flot jest pluginem do jQuery, który umożliwia rysowanie podstawowych wykresów - liniowy, słupkowy, punktowy, jednocześnie udostępniając wszystkie potrzebne interakcje jak zbliżanie, określanie przedziału, interakcję z punktami, interakcję z liniami funkcji, dynamiczne ładowanie danych przy użyciu AJAX'a. Przy okazji bardzo ładnie wygląda i sprawnie działa. Dodatkową zaletą jest licencja MIT i stosunkowo dobrze skomentowany kod. Dokumentacja w postaci pliku tekstowego pozostawia trochę do życzenia, aczkolwiek zawsze można się uczyć z przykładów ;)
Zalety:
- ładny wygląd
- otwarty kod
- zintegrowane podstawowe interakcje
- możliwość dodawania pluginów
- całkiem płynne działanie pod IE
Wady:
- średni poziom dokumentacji
- większość rzeczy (tooltipy i inne) do dorobienia samemu w jQuery i canvas'ie (ale do niektórych zastosowań są dołączone przykłady)
$(function () {
var d1 = [.. dane ..];
var d2 = [];
for (var i = 0; i < d1.length; i ++)
d2.push([i, d1[i]]);
$.plot($("#placeholder"), [
{ label: "wysokość", data: d2, color:'#33f0ff'}
], {
series: {
lines: { show: true , fill: true, fillColor: "rgba(255, 255, 255, 0.2)"},
points: { show: true, radius: 1}
},
xaxis: {
ticks: 10
},
yaxis: {
ticks: 10
},
grid: {
backgroundColor: { colors: ["#777", "#222"] },
color: '#bbb'
},
legend: {
backgroundColor: '#232323',
color: '#ddd',
labelBoxBorderColor: '#ddd'
}
});
});
Jak tam się dostać?
Kolejny plugin do jQuery do wykresów - podobny w działaniu do poprzedniego, jednak nieco większy (po skompresowaniu 68kB w porównaniu do "surowego" Flot 32kB). Tym razem jednak został dodany bogaty dział dokumentacji, gdzie możemy znaleźć, że praktycznie wszystko jest do ustawienia. Dodatkowe pluginy wiążą się także z innymi możliwościami wyświetlania (tzw. renderer'y). Domyślny wygląd jest także całkiem ładny, ale w przeciwieństwie do Flot'a nie można wrzucić gradientu w tło. Aby zobaczyć jakie możliwości ma ten plugin polecam przeglądnąć przykłady.
Zalety:
- wygląd
- możliwości konfiguracji
- dokumentacja
- otwarty kod (GPL/MIT)
- niezłe działanie w IE
- zaimplementowane niektóre bardziej zaawansowane akcje (np. sprawdzanie wartości wykresu w dowolnym miejscu - jak w przykładzie)
Wady:
- pewne rzeczy jak tooltipy dla punktów nieco niedopracowane (akcje na zdarzeniach mouseover i mouseout czasami się zapętlają)
- brak możliwości ustawienia gradientu w tle
$(function () {
var d1 = [.. dane ..];
$.jqplot('placeholder', [d1], {
title: 'Przekrój Wrocław - Trzebnica',
legend:{show:true, location:'nw', textColor:'#ffffff', background:'#000000'},
series:[{label:'wysokość'}],
seriesDefaults: {
fillAndStroke:true,
fill:true,
color:'#45f1ff',
fillAlpha:0.8,
showMarker: true,
markerOptions: {size: 5}
},
grid: {background: '#333'},
axes:{yaxis:{autoscale:true,min:80}, xaxis:{min:1,max:80,autoscale:true}},
cursor: {
showVerticalLine:true,
showHorizontalLine:false,
showCursorLegend:true,
showTooltip: false,
zoom:true
}
});
});
Jak się tam dostać:
Bardzo mały skrypt, który umożliwia tworzenie ładnych wykresów. Bazuje on na biblioteki Raphaël do grafiki (w sumie nie wiem, który ma większe możliwości bo znów do gRaphaël brak jakiejkolwiek dokumentacji oprócz przykładów i kodu źródłowego - także bez komentarzy). Generalnie posiada wbudowane wykresy - kołowy, słupkowy, liniowy oraz dodatkowe jak "kropkowy" gdzie, każdej wartości odpowiada wielkość kropki (średnica). Generuje wykresy w SVG lub VML, więc nie wymaga dodatkowych bibliotek do IE.
Zalety:
- waga
- jak już wiemy jak (z przykładu), w miarę prosta instalacja
- nie wymaga dodatkowych bibliotek do IE
- ciekawie zrobiona obsługa animacji (animate)
Wady:
- brak dokumentacji - konieczność analizy kodu źródłowego oraz dokumentacji Raphaëla
- brak siatki w tle (na wykresie)
- brak możliwości definicji wielkości punktów na wykresie liniowym
- dziwna metoda ustawiania parametrów wyglądu - już po wygenerowaniu wykresu
Przykład (na jsFiddle)
var r = Raphael("holder");
r.g.txtattr.font = "18px Arial";
r.g.txtattr.fill = "#ccc";
var d1 = [.. dane ..];
var d2 = new Array();
for (var i=1;i<d1.length+1;i++)
d2.push(i);
r.g.text(280, 10, "Przekrój Wrocław - Trzebnica");
r.g.txtattr.font = "12px Arial";
var a = r.g.linechart(20, 20, 530, 220, d2, d1, {shade: true, axis: "0 0 1 1", gutter:10});
a.lines[0].attr({"stroke": '#33f0ff'})
a.shades[0].attr({"fill": '90-#222-#aaa', opacity:0.5});
a.axis[0].attr({"stroke": '#aaa'});
a.axis[1].attr({"stroke": '#aaa'});
Jak tam się dostać:
Biblioteka Protovis udostępnia niektóre całkiem ciekawe metody prezentacji danych. Oprócz tradycyjnych wykresów linowych, kołowych, słupkowych - dostępne są także wykresy przedstawiane na kole, mapy ciepła i inne. Wszystko wygląda całkiem porządnie - gdzieniegdzie nawet są dodane zdarzenia do obsługi myszki - jednak wszystko jest zrobione na SVG. Więc jeżeli IE naszych użytkowników nie ma wtyczki z SVG to niestety do nich nie dotrzemy. Ale podobno od wersji 9 IE ma mieć już obsługę SVG... Ze względu na duże możliwości i uniwersalność biblioteki niektóre rzeczy takie jak np. linie współrzędnych, też trzeba robić manualnie.
Zalety:
- wsparcie nietypowych wykresów
- duża ilość przykładów
- dobra dokumentacja
Wady:
- tylko w SVG (brak wsparcia dla IE)
- duża uniwersalność niesie ze sobą konieczność definiowania nawet układu współrzędnych
Przykład (na jsFiddle)
var d1 = [.. dane ..];
var data = pv.range(0, d1.length, 1).map(function(x) {
return {x: x, y: d1[x]};
});
var w = 500,
h = 200,
x = pv.Scale.linear(data, function(d) d.x).range(0, w),
y = pv.Scale.linear(100, 250).range(0, h);
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.fillStyle("rgba(255,255,255,0.3)")
.top(5);
vis.add(pv.Rule)
.data(y.ticks(5))
.bottom(y)
.visible(1)
.strokeStyle(function(d) d ? "#666" : "#000")
.anchor("left").add(pv.Label)
.text(y.tickFormat).textStyle('#ccc');
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d)
.left(x)
.bottom(-5)
.strokeStyle(function(d) d ? "#666" : "#000")
.anchor("bottom").add(pv.Label)
.text(x.tickFormat).textStyle('#ccc');
vis.add(pv.Area)
.data(data)
.bottom(1)
.left(function(d) x(d.x))
.height(function(d) y(d.y))
.fillStyle("rgba(255,255,255,0.5)")
.anchor("top").add(pv.Line)
.lineWidth(3).strokeStyle("rgba(69, 241, 255,0.8)");
vis.render();
Jak się tam dostać:
Kolejna mała biblioteka (68 kB z exCanvasem dla IE) - mała interakcja (tylko tooltip'y), natomiast całkiem ładny wygląd. Co prawda dokumentacja jest - ale lista wykresów niekoniecznie mówi, co się kryje za tymi nazwami. Ze względu na małą interakcję działa bardzo ładnie na IE. Można w prosty sposób wprowadzić gradient w tło. Problemem jest natomiast połączenie kilku wykresów - dlatego nie możemy jednocześnie mieć wykresu liniowego oraz zaznaczonego obszaru pod nim. Inną wadą jest brak automatycznego podpisu współrzędnej x i brak pionowych linii (w tym współrzędnej).
Zalety:
- stosunkowo mały
- ładny wygląd
Wady:
- średnia jakość dokumentacji
- mało interakcji
- brak pionowych linii i brak automatycznego opisu współrzędnej x
Przykład (na jsFiddle)
var d1 = [.. dane ..];
var g = new Bluff.Line('example', '530x300');
g.labels = {};
for (var i=0; i<d1.length/4;i++) {
g.labels[i*4] = i*4;
}
g.title = 'Przekrój Wrocław - Trzebnica';
g.tooltips = true;
g.set_theme({
colors: ['#33f0ff'],
marker_color: '#33f0ff',
font_color: '#ccc',
background_colors: ["#777", "#222"]
});
g.data("Wysokość", d1);
g.draw();
Jak się tam dostać:
Ostatnia sprawdzana przeze mnie biblioteka do wykresów - wzorowana m.in. na bibliotece flot (wyżej opisanej). Niestety poza bardzo ładną dokumentacją, "piaskownicą" czyli miejscem gdzie możemy online potestować różne ustawienia - działa wolniej - co szczególnie widać w zaznaczaniu zakresu na wykresie. Kolejnym minusem jest wymaganie frameworka Prototype - który do najmniejszych i najwydajniejszych nie należy.
Zalety:
- dokumentacja
- niezły wygląd
Wady:
- w przykładach - 'click event handling' - okazuje się, że jeśli są dwie wartości dla jednego x'a to kolejność połączenia z punktami przed i po tym x jest losowa (czyli klikając i dodając punkt gdzie indziej przeskakują nam połączenia)
- stosunkowo wolny
- wymaga frameworka prototype
var d1 = [.. dane ..];
var d2 = [];
for (var i=0;i<d1.length;i++) {
d2.push([i, d1[i]]);
}
new Proto.Chart($('areachart'),
[
{data: d2, label: "Wysokość"}
],
{
xaxis: {min: 0, max: d1.length-1, tickSize: 10},
lines: {show: true, fill: true}, colors:['rgb(69,250,255)'],
grid: {color:'#ccc', tickColor:'#666', backgroundColor: '#333'}
});
Jak się tam dostać:
A oto mapa, która pokazuje, który kawałek terenu został wykorzystany w przykładach:
Brak komentarzy:
Prześlij komentarz