[jQuery] Re: jquery flot - integers only on x and/or y axis
this is my latest working concept... although I don't think it's
optimized at all, and I'm really hacking to get my concept across
http://www.monkeypuzzle.net/testfiles/jquery/flot/flot-test-11.htm
the favorites button should really load the data into the inputs, but
I don't yet understand how to go that direction. Also, the bars graph
doesn't work, probably because I need to set up the x-axis better.
Struggling to learn better javascript, so if you have any thoughts I'd
love to hear them!
On Sep 3, 11:03 am, faizal iqbaal [EMAIL PROTECTED] wrote:
cool...let me have the code as well i'll also learn a new approach or is it
the same url
On Wed, Sep 3, 2008 at 1:30 PM, rolfsf [EMAIL PROTECTED] wrote:
Yes - thanks Faizal. At least it pointed out the error I was making.
I'm not (currently) using $.extend, but I did separate the data set
options from the other chart options, and put them in a variable. Now
I'm trying to add a select that will allow the user to switch chart
styles - point, line, bar
On Sep 2, 10:19 pm, faizal iqbaal [EMAIL PROTECTED] wrote:
did it work for ya
On Tue, Sep 2, 2008 at 5:31 PM, faizal iqbaal [EMAIL PROTECTED]
wrote:
//modiefd ur file copy the code and run it
/**/
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
#graphHolder {
border: none;
padding: 0px;
margin: 10px;
height: 200px;
width: 400px;
font-family: tahoma;
font-size: 11px;
}
#curveData {
margin: 10px;
}
/style
title/title
script language=JavaScript type=text/javascript
src=jquery.js/script
script language=JavaScript type=text/javascript
src=jquery.flot.js/script
!--[if IE]script language=javascript
type=text/javascript
src=../version/scripts/flot/excanvas.js/script![endif]--
script type=text/javascript
$().ready(function(){
$.plot($(#graphHolder),[]);
$('#curveData input').change(function() {
var d1 = [];
$('#curveData tbody tr').each(function() {
tr = $(this);
pair = [];
tr.find('input.qty').val()
tr.find('input.price').val() pair.push( tr.find('input.qty').val(),
tr.find('input.price').val() ) d1.push( pair );
});
var chartOptions={
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
} ;
/*
$.plot($(#graphHolder), [
{
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
}
]);
*/
$.plot($(#graphHolder), [{ data: d1,
color:#bb}],$.extend(true, {}, chartOptions, {yaxis: { min: 0
}}));
});
});
/script
/head
body
table cellpadding=0 cellspacing=0 id=curveData
thead
tr
th#/th
thQuantity/th
thPrice/th
/tr
/thead
tbody
tr
td1/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td2/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td3/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td4/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td5/td
[jQuery] Re: jquery flot - integers only on x and/or y axis
did it work for ya
On Tue, Sep 2, 2008 at 5:31 PM, faizal iqbaal [EMAIL PROTECTED]wrote:
//modiefd ur file copy the code and run it
/**/
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
#graphHolder {
border: none;
padding: 0px;
margin: 10px;
height: 200px;
width: 400px;
font-family: tahoma;
font-size: 11px;
}
#curveData {
margin: 10px;
}
/style
title/title
script language=JavaScript type=text/javascript
src=jquery.js/script
script language=JavaScript type=text/javascript
src=jquery.flot.js/script
!--[if IE]script language=javascript type=text/javascript
src=../version/scripts/flot/excanvas.js/script![endif]--
script type=text/javascript
$().ready(function(){
$.plot($(#graphHolder),[]);
$('#curveData input').change(function() {
var d1 = [];
$('#curveData tbody tr').each(function() {
tr = $(this);
pair = [];
tr.find('input.qty').val()
tr.find('input.price').val() pair.push( tr.find('input.qty').val(),
tr.find('input.price').val() ) d1.push( pair );
});
var chartOptions={
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
} ;
/*
$.plot($(#graphHolder), [
{
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
}
]);
*/
$.plot($(#graphHolder), [{ data: d1,
color:#bb}],$.extend(true, {}, chartOptions, {yaxis: { min: 0 }}));
});
});
/script
/head
body
table cellpadding=0 cellspacing=0 id=curveData
thead
tr
th#/th
thQuantity/th
thPrice/th
/tr
/thead
tbody
tr
td1/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td2/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td3/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td4/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td5/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td6/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td7/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td8/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td9/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td10/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td11/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
/tbody
/table
[jQuery] Re: jquery flot - integers only on x and/or y axis
Yes - thanks Faizal. At least it pointed out the error I was making.
I'm not (currently) using $.extend, but I did separate the data set
options from the other chart options, and put them in a variable. Now
I'm trying to add a select that will allow the user to switch chart
styles - point, line, bar
On Sep 2, 10:19 pm, faizal iqbaal [EMAIL PROTECTED] wrote:
did it work for ya
On Tue, Sep 2, 2008 at 5:31 PM, faizal iqbaal [EMAIL PROTECTED]wrote:
//modiefd ur file copy the code and run it
/**/
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
#graphHolder {
border: none;
padding: 0px;
margin: 10px;
height: 200px;
width: 400px;
font-family: tahoma;
font-size: 11px;
}
#curveData {
margin: 10px;
}
/style
title/title
script language=JavaScript type=text/javascript
src=jquery.js/script
script language=JavaScript type=text/javascript
src=jquery.flot.js/script
!--[if IE]script language=javascript type=text/javascript
src=../version/scripts/flot/excanvas.js/script![endif]--
script type=text/javascript
$().ready(function(){
$.plot($(#graphHolder),[]);
$('#curveData input').change(function() {
var d1 = [];
$('#curveData tbody tr').each(function() {
tr = $(this);
pair = [];
tr.find('input.qty').val()
tr.find('input.price').val() pair.push( tr.find('input.qty').val(),
tr.find('input.price').val() ) d1.push( pair );
});
var chartOptions={
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
} ;
/*
$.plot($(#graphHolder), [
{
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
}
]);
*/
$.plot($(#graphHolder), [{ data: d1,
color:#bb}],$.extend(true, {}, chartOptions, {yaxis: { min: 0 }}));
});
});
/script
/head
body
table cellpadding=0 cellspacing=0 id=curveData
thead
tr
th#/th
thQuantity/th
thPrice/th
/tr
/thead
tbody
tr
td1/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td2/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td3/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td4/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td5/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td6/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td7/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td8/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td9/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
[jQuery] Re: jquery flot - integers only on x and/or y axis
cool...let me have the code as well i'll also learn a new approach or is it
the same url
On Wed, Sep 3, 2008 at 1:30 PM, rolfsf [EMAIL PROTECTED] wrote:
Yes - thanks Faizal. At least it pointed out the error I was making.
I'm not (currently) using $.extend, but I did separate the data set
options from the other chart options, and put them in a variable. Now
I'm trying to add a select that will allow the user to switch chart
styles - point, line, bar
On Sep 2, 10:19 pm, faizal iqbaal [EMAIL PROTECTED] wrote:
did it work for ya
On Tue, Sep 2, 2008 at 5:31 PM, faizal iqbaal [EMAIL PROTECTED]
wrote:
//modiefd ur file copy the code and run it
/**/
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
#graphHolder {
border: none;
padding: 0px;
margin: 10px;
height: 200px;
width: 400px;
font-family: tahoma;
font-size: 11px;
}
#curveData {
margin: 10px;
}
/style
title/title
script language=JavaScript type=text/javascript
src=jquery.js/script
script language=JavaScript type=text/javascript
src=jquery.flot.js/script
!--[if IE]script language=javascript
type=text/javascript
src=../version/scripts/flot/excanvas.js/script![endif]--
script type=text/javascript
$().ready(function(){
$.plot($(#graphHolder),[]);
$('#curveData input').change(function() {
var d1 = [];
$('#curveData tbody tr').each(function() {
tr = $(this);
pair = [];
tr.find('input.qty').val()
tr.find('input.price').val() pair.push( tr.find('input.qty').val(),
tr.find('input.price').val() ) d1.push( pair );
});
var chartOptions={
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
} ;
/*
$.plot($(#graphHolder), [
{
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
}
]);
*/
$.plot($(#graphHolder), [{ data: d1,
color:#bb}],$.extend(true, {}, chartOptions, {yaxis: { min: 0
}}));
});
});
/script
/head
body
table cellpadding=0 cellspacing=0 id=curveData
thead
tr
th#/th
thQuantity/th
thPrice/th
/tr
/thead
tbody
tr
td1/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td2/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td3/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td4/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td5/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td6/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td7/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td8/td
[jQuery] Re: jquery flot - integers only on x and/or y axis
use this --
plot=$.plot($(#spectrumModalGraph), [{ data: velFFTData,
color:#60AAD5}],$.extend(true, {}, spectrumChartOptions, {xaxis: { min:
spectrumFFTZoomArea.x1, max: spectrumFFTZoomArea.x2 },yaxis: { min:
spectrumFFTZoomArea.y1, max: spectrumFFTZoomArea.y2*1.5 }}));
i am using spectrumFFTZoomArea.x1, and spectrumFFTZoomArea.x2 with
valuesto set the min max of the graph
for tickmarks u can use tick formatter
xaxis, yaxis: {
mode: null or time
*min: null or number
max: null or number*
autoscaleMargin: null or number
ticks: null or number or ticks array or (fn: range - ticks array)
tickSize: number or array
minTickSize: number or array
* tickFormatter: (fn: number, object - string) or string*
tickDecimals: null or number
}
hope this helps
On Tue, Sep 2, 2008 at 2:35 PM, rolfsf [EMAIL PROTECTED] wrote:
I've got this test page built using jquery flot to render a graph as
price/quantity pairs are input
I'm using the following jquery:
$().ready(function(){
$.plot($(#graphHolder),[]);
$('#curveData input').change(function() {
var d1 = [];
$('#curveData tbody
tr').each(function() {
tr = $(this);
pair = [];
tr.find('input.qty').val()
tr.find('input.price').val()
pair.push( tr.find('input.qty').val(), tr.find('input.price').val() )
d1.push( pair );
});
$.plot($(#graphHolder), [
{
color: #bb,
data: d1,
points: { show: true
},
lines: { show: true,
fill: true, fillColor: rgba(255, 000,
000, 0.2) }
}
]);
});
});
Does anyone know if it's possible to limit the x and y axis tickmarks
to integers?
And how do I make the x and y axis always start from 0, regardless of
where the first data point is?
Thanks!
--
Thanks Regards
Faizal
(001)919 889 1980
when nothing works , prayer does.
[jQuery] Re: jquery flot - integers only on x and/or y axis
Thanks Faizal I tried setting the x and y axis with the min option, but it doesn't seem to work... perhaps I've got some syntax wrong http://monkeypuzzle.net/testfiles/jquery/flot/flot-test-3.htm
[jQuery] Re: jquery flot - integers only on x and/or y axis
//modiefd ur file copy the code and run it
/**/
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
#graphHolder {
border: none;
padding: 0px;
margin: 10px;
height: 200px;
width: 400px;
font-family: tahoma;
font-size: 11px;
}
#curveData {
margin: 10px;
}
/style
title/title
script language=JavaScript type=text/javascript
src=jquery.js/script
script language=JavaScript type=text/javascript
src=jquery.flot.js/script
!--[if IE]script language=javascript type=text/javascript
src=../version/scripts/flot/excanvas.js/script![endif]--
script type=text/javascript
$().ready(function(){
$.plot($(#graphHolder),[]);
$('#curveData input').change(function() {
var d1 = [];
$('#curveData tbody tr').each(function() {
tr = $(this);
pair = [];
tr.find('input.qty').val()
tr.find('input.price').val() pair.push( tr.find('input.qty').val(),
tr.find('input.price').val() ) d1.push( pair );
});
var chartOptions={
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
} ;
/*
$.plot($(#graphHolder), [
{
yaxis: { min:0 },
color: #bb,
data: d1,
points: { show: true },
lines: { show: true, fill: true, fillColor:
rgba(255, 000, 000, 0.2) }
}
]);
*/
$.plot($(#graphHolder), [{ data: d1,
color:#bb}],$.extend(true, {}, chartOptions, {yaxis: { min: 0 }}));
});
});
/script
/head
body
table cellpadding=0 cellspacing=0 id=curveData
thead
tr
th#/th
thQuantity/th
thPrice/th
/tr
/thead
tbody
tr
td1/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td2/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td3/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td4/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td5/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td6/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td7/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td8/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td9/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td10/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
tr
td11/td
tdinput type=text class=qty
size=8/input/td
tdinput type=text class=price
size=8/input/td
/tr
/tbody
/table
!--button id=plotPlot Graph/button--
div id=graphHolder width=300px height=300px/div
/body
/html
/**/
On Tue, Sep 2, 2008 at 4:49 PM, rolfsf [EMAIL PROTECTED] wrote:
Thanks Faizal
I tried setting the x and
