Rysowanie wykresów w jquery. Opcje

[linx]

Witam,
potrzebuje (najlepiej) przy pomocy jakiejś bibiloteki na stronie wyrysować wykres z oscyloskopu.
Biblioteka musi mieć możliwość:
- wykonywania zoom + i zoom- najlepiej przy pomocy scrola.
- mieć możliwość wstawiania punktów(belek) do obliczania odległości w osi X i osi Y.

Obecnie wykorzystuje jqPlot ale niema/lub nie umiem załączyć belek do pomiaru.

Obecnie wygląda to tak:
http://linx.vipserv.org/view.php?id=cbcfba...a385323d8750b97
Zoom działa tylko na przybliżenie, ale nie wiem jak włączyć w nim tzw. belki pomiarowe.

Proszę o pomoc, jest możliwość płatnej pomocy.
Pozdrawiam.

[markuz]

http://www.highcharts.com/ - najlepsza biblioteka do wykresów jaka istnieje.

[tzm]

to bardzo osobista opinia, mozesz ja poprzec jakimis informacjami? sam stoje przed wyborem czegos pod angulara

[markuz]

- Bardzo dużo typów wykresów
- Dobra dokumentacja
- Biblioteka cały czas rozwijana od 5 lat
- Elastyczność (dużo opcji do zmiany, eventów itp.)

Nie używałem jej w połączeniu z Angularem - ale myślę, że to nie będzie stanowiło większego problemu.

[solificati]

Pytanie czy potrzebujesz biblioteki do wykresów czy do wizualizacji. d3.js daje lepszą kontrolę i fajny deklaratywny interface. Oczywiście nie jest to takie łatwe jak

[JAVASCRIPT] pobierz, plaintext 
$div.highcharts({series: data})
[JAVASCRIPT] pobierz, plaintext 

ale przynajmniej można coś spokojnie dopisać. W highcharts jak czegoś nie ma w api to ciężka robota człowieka czeka.

[linx]

No dobra jednak, uparłem się na jqplot, i w sumie powoli idę do przodu.
Jednak napotkałem pewien problem, mianowicie potrzebuje odczytać ze skali wartość minimalną i maksymalną (wartości te zmieniają się w zależności od wielkości zooma).
O ile ze skalą y jest łatwo

[HTML] pobierz, plaintext 
<div class="jqplot-axis jqplot-yaxis" style="position: absolute; height: 600px; width: 16px; left: 0px; top: 0px;">
<div class="jqplot-yaxis-tick" style="position: absolute; top: 559px;">-1.6</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 525.25px;">-1.4</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 491.5px;">-1.2</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 457.75px;">-1.0</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 424px;">-0.8</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 390.25px;">-0.6</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 356.5px;">-0.4</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 322.75px;">-0.2</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 289px;">0.0</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 255.25px;">0.2</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 221.5px;">0.4</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 187.75px;">0.6</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 154px;">0.8</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 120.25px;">1.0</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 86.4999999999999px;">1.2</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 52.75px;">1.4</div>
<div class="jqplot-yaxis-tick" style="position: absolute; top: 19px;">1.6</div>
</div>
[HTML] pobierz, plaintext 

To już gorzej jest ze skalą x

[HTML] pobierz, plaintext 
<div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 1200px; height: 26px; left: 0px; bottom: 0px;">
<canvas width="13" height="16" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 16.75px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 87.8928571428571px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 171.035714285714px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 254.178571428571px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 337.321428571429px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 420.464285714286px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 503.607142857143px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 586.75px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 669.892857142857px;"></canvas>
<canvas width="25" height="23" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 753.035714285714px;"></canvas>
<canvas width="31" height="26" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 830.178571428571px;"></canvas>
<canvas width="31" height="26" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 913.321428571429px;"></canvas>
<canvas width="31" height="26" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 996.464285714286px;"></canvas>
<canvas width="31" height="26" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 1079.60714285714px;"></canvas>
<canvas width="31" height="26" class="jqplot-xaxis-tick" style="text-align: left; position: absolute; left: 1162.75px;"></canvas>
</div>
[HTML] pobierz, plaintext 

Link do strony
http://linx.vipserv.org/view.php?id=cbcfba...a385323d8750b97
Czy macie jakiś na to pomysł?


No dobra z tym problemem też już sobie poradziłem.

Czy któryś z szanownych kolegów wie jak przekazać nową zmienną do funkcji

[HTML] pobierz, plaintext 
$( "#slider-poziom" ).slider({
      	range: true,
	  	min: min_xaxis,//0,
	  	max: max_xaxis,//1399,
	  	step: 0.000001,
	  	values: [min_xaxis, max_xaxis],//[ 0, 1399 ],
	  	slide: function( event, ui ) {
	        //$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
 
			//var val = parseFloat($(this).val());
			plot1.plugins.canvasOverlay.get("line1").options.x = (ui.values[ 0 ]);
			plot1.plugins.canvasOverlay.get("line2").options.x = (ui.values[ 1 ]);
			plot1.replot(); 
			$("td.max_xaxis").html(ui.values[ 1 ]);
			$("td.min_xaxis").html(ui.values[ 0 ]);
			val = ui.values[ 1 ] - ui.values[ 0 ];
			val = (val.toFixed(6));
			val = parseFloat(val);
			$("td.max_xaxis-min_xaxis").html(val);
		}
    });
[HTML] pobierz, plaintext 

Mianowicie w trakcie ładowania strony ustawiane są zmienne max_xaxis i min_xaxis,
jednak te zmienne w trakcie korzystania ze strony zmieniają swoje wartości w zależności od ustawionego zoom'u- bez przeładowywania strony.
Jak mogę na nowo ustawić te zmienne, bez przeładowywania strony.

Pozdrawiam.

[tzm]

Mianowicie w trakcie ładowania strony ustawiane są zmienne max_xaxis i min_xaxis,
jednak te zmienne w trakcie korzystania ze strony zmieniają swoje wartości w zależności od ustawionego zoom'u- bez przeładowywania strony.
Jak mogę na nowo ustawić te zmienne, bez przeładowywania strony.

Z tego co rozumiem... to zmienne są przy zoomie ustawiane bez przeładowania strony, i Ty chcesz je na nowo przypisać bez przeładowania strony? Taki mindfuck i albo ja nie rozumiem bo jest 8 rano albo Ty źle wytłumaczyłeś co chcesz zrobić. JS ogólnie działa bez przeładowania więc jak kolwiek to zrobisz, będzie dobrze.