Permalink
Browse files

refactoring and allow overview to reset zoom on main plot

  • Loading branch information...
1 parent e749e26 commit 968adca9f5c323de880cd75a872cd918ec463801 @leto committed May 31, 2009
Showing with 35 additions and 32 deletions.
  1. +1 −0 css/layout.css
  2. +31 −31 js/hypatia_plot.js
  3. +3 −1 tmpl/index.tmpl
View
@@ -6,6 +6,7 @@ body {
#container {
position:relative;
+ height:600px;
}
#hypatia_logo {
position:relative;
View
@@ -1,6 +1,4 @@
$( function() {
- $("#container").tabs({ fx: { opacity: 'toggle' } });
- var currentOptions;
var calcOptions = {
layout : $.calculator.scientificLayout,
PI : true,
@@ -10,21 +8,20 @@ $( function() {
buttonImageOnly : true,
buttonImage : '/hypatia/img/calculator.png'
};
- $('input#lower').calculator( calcOptions );
- $('input#upper').calculator( calcOptions );
var startData = sampleFunction( -2*Math.PI , 2*Math.PI, 300, function (x) { return Math.sin(x*x) }, 'sin(x^2)' );
var options = {
- crosshair: { mode: "xy", color: "#ff0000" },
+ crosshair: { color: "#ff0000" },
legend: { show: true },
lines: { show: true },
points: { show: false },
xaxis: { ticks: 5 },
- yaxis: { ticks: 5, base: 0 },
- selection: { mode: "xy" },
+ yaxis: { min: -5, max: 5, ticks: 5, base: 0 },
+ selection: { show:true, mode: "xy" },
grid: { hoverable: true, clickable: true , color: "#999"}
};
+ var currentOptions = options;
var overviewOptions = {
legend: { show: true, container: $("#overviewLegend") },
@@ -33,11 +30,15 @@ $( function() {
xaxis: { ticks: 4 },
yaxis: { ticks: 4, base: 0, tickDecimals: 2 },
grid: { color: "#999" },
- selection: { mode: "xy" }
+ selection: { show:true, mode: "xy" }
};
var previousPoint = null;
+ $("#container").tabs({ fx: { opacity: 'toggle' } });
+ $('input#lower').calculator( calcOptions );
+ $('input#upper').calculator( calcOptions );
+
$("#plot1").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
@@ -62,13 +63,16 @@ $( function() {
}
});
- $("#plot1").bind("plotclick", function (event, pos, item) {
- if (item) {
- $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
- plot.highlight(item.series, item.datapoint);
- }
+ $("#plot1").bind("plotclick", function (event, pos, item) {
+ if (item) {
+ $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
+ plot.highlight(item.series, item.datapoint);
+ }
});
+ $("#overview").bind("plotselected", function (event, ranges) {
+ plot.setSelection(ranges);
+ });
@@ -86,32 +90,24 @@ $( function() {
url: url,
error: ajaxError,
success: function(json){
- $("input#y").val( json.values[0] );
- $("#previousValues").prepend( '<li>' + $("select#function").val()
- + '(' + $("input#x").val() + ')'
- + ' = ' + $("input#y").val() + '</li>'
- );
- debug('converting data, start='+ json.start + ', end=' + json.end );
-
var d = [ ];
var step = parseFloat( (json.end - json.start)/json.points );
- debug('step='+step);
for ( var i = parseFloat(json.start); i < json.end; i += step ) {
d.push( [ i, json.values.shift() ] );
}
- debug('plotting');
$.plot($("#previous"), startData, overviewOptions);
startData = [ { label : $("select#function").val() , data : d } ];
if ($("#togglePoints:checked").length > 0) {
- $.plot($("#plot1"), startData, $.extend(true, {}, options, {
- points: { show: true },
- }));
+ currentOptions = $.extend(true, {}, currentOptions, {
+ points: { show: true },
+ });
+ $.plot($("#plot1"), startData, currentOptions);
} else {
- $.plot($("#plot1"), startData, options);
+ $.plot($("#plot1"), startData, currentOptions);
}
$.plot($("#overview"),startData, overviewOptions);
@@ -134,7 +130,7 @@ $( function() {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
// do the zooming
- currentOptions = $.extend(true, {}, options, {
+ currentOptions = $.extend(true, {}, currentOptions, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
});
@@ -145,14 +141,18 @@ $( function() {
});
$("input#resetZoom").click(function() {
- plot = $.plot($("#plot1"), startData, options );
+ currentOptions = $.extend(true, {}, currentOptions, {
+ xaxis: { min: $("input#lower").val(), max: $("input#upper").val() },
+ yaxis: { min: $("input#lower").val(), max: $("input#upper").val() }
+ });
+ plot = $.plot($("#plot1"), startData, currentOptions);
});
$("input#togglePoints").click(function() {
var toggled = $("#togglePoints:checked").length > 0;
- $.plot($("#plot1"), startData,
- $.extend(true, {}, currentOptions, {
+ currentOptions = $.extend(true, {}, currentOptions, {
points: { show: toggled },
- }));
+ });
+ $.plot($("#plot1"), startData, currentOptions );
});
View
@@ -25,7 +25,7 @@
<script type="text/javascript" src="js/hypatia.js"></script>
<script type="text/javascript" src="js/hypatia_plot.js"></script>
<body bgcolor="white">
-<table border="0" width="100%">
+<table border="0" width="100%" height="100%">
<tr>
<td width="250px">
@@ -54,6 +54,8 @@ Overview
</div>
<div id="tab-3">
Hypatia is a JavaScript Computer Algebra System.
+ <p>
+ It use jQuery, jQuery UI, the calculator jQuery plugin and Flot for graphing.
</div>
</div>

0 comments on commit 968adca

Please sign in to comment.