chart width

[Kelly]

I've been pulling my hair out of this problem. Regardless of what I
do, the chart width is ALWAYS 300px.
How do I change the chart width!?? I've changed the class in the css
- no go. :(
ugh.

[AcadiaSolutions]

I think you need to adjust the Div that it gets displayed in, the
chart just uses 100% of that.

[Kelly]

No, tried that too.
I found the bug(?) -- but not sure if it's jqplot or jquery?

My target div is hidden initially. When the user clicks the 'view'
button, I toggle the visibility of the div.
For some reason, if the div is hidden, jqplot ALWAYS draws a 300px
wide chart. :(
But if I set the target div to always be visible, the div is set to
the correct width (900px).

Any ideas? I need to have the charts wider......



On Oct 9, 4:57 pm, AcadiaSolutions <mkin...@acadiasolutions.com>
wrote:

[AcadiaSolutions]

I may be stating the obvious, and making an assumption, but can you
run a function that resizes the div and makes it visible first, then
run another function that adds the chart? Will that work (you may
have tried this, if so, sorry can't think of another option right
now).

> > > ugh.- Hide quoted text -
>
> - Show quoted text -

[Kelly]

Thanks - I have not gone that far into the quicksand yet. I was hoping
for a logical, simple solution that actually uses a "Width"
attribute. :)
Why can't we just have a "chartwidth" attribute? I just can't
understand why something so simple is so hard with this chart. :/


On Oct 9, 5:11 pm, AcadiaSolutions <mkin...@acadiasolutions.com>

[John L. Cheng]

This sounds like an area for improvement. Can you submit a bug so
Chris
can work on it?

I've had a similar problem in my project: A display with two tabs, on
one
tab, the data is displayed in a table, on a second tab, the data is
displayed
as jqPlot.

It seems that the code has trouble figuring out the position and size
of the
canvas when the <div> container that is supposed to hold it is not
visible
when the page loads.

So what I had to do is use JS to set the width and height when the
page
loads (but before the chart is drawn):

$j('#plotarea').width('760px').height('400px');

[Chris Leonello]

There was a suggestion to implement a default width/height that could
be set by the user. Something like $.jqplot.config.defaultWidth and
$.jqplot.config.defaultHeight. I could also see passing a width/
height into the plot with the options. This would give per chart
control. Or, if I read this right, using a custom attribute on the
chart div like "chartWidth".

I've already implemented the $.jqplot.config object and am using it to
allow users to enable/disable plugins globally. I can easily add it
there and probably will. I think the per plot customization is also
important, so I can see adding something to the options argument which
overrides the config.

I'm not sure I like looking at custom attributes on the html tags. I
can see this would be useful to the more design oriented user working
on the html side. Does anyone feel strongly about having a custom
html attribute?

I've gotten around this when using jQuery UI tabs and the plot was on
an initially hidden tab. I created the plot before creating the
tabs. Since everything was done in a $(document).ready() call,
nothing was actually drawn on the screen until the whole process was
complete and the plot appeared fine when it was revealed.

--
Chris Leonello

[Kelly]

I can't really share the link because it's on a secure/private/
corporate site, but the scenario is easily reproducable:

Consider a report page with a table of data, 20 columns wide with a
variety of data.
At the bottom of the table, I have a toggle link "Show/Hide Charts".
Clicking the toggle will make the div appear that has the included
jgplot. Obviously, my issue is that the width of the chart is ALWAYS
300px wide because of this bug. I need to be able to set the width of
the div or charge and have it appear that way. Nothing more, nothing
less. I also have a strong need to be able to set different widths
for different charts. Some charts are hornizontal bar charts with a
ton of data, that need to be 900px wide....while other pie charts can
only be 250px wide. I'm shocked this isn't the first feature built
into jgplot. :(

As for how the parameter is passed, I really don't care, as long as I
can pass the width/height of EACH chart (per chart). I know exactly
the dimensions I want them to be, I just need to be able to pass the
value and the plot actually use the value! :/

As for drawing this at document ready time, I can't easily do that,
because the header is already drawn by the time this code gets
executed.

[Chris Leonello]

> less. I also have a strong need to be able to set different widths
> for different charts.

Then having it in the config object alone is not enough. I'll make an
option for it as well.

> 300px wide because of this bug.

I know it doesn't make you any happier, but, technically it's not a bug.

> ... I'm shocked this isn't the first feature built
> into jgplot. :(

Didn't mean to shock anyone ;-)

Thanks for the input. As I mentioned, I had the luxury of being able
to work around this pretty easily b/c of the structure of my apps. I
see your use case is different and you must have more flexibility.

I'll get this into the trunk as soon as I can.

--
Chris Leonello

[John L. Cheng]

On Oct 10, 11:33 am, Chris Leonello <chris.leone...@gmail.com> wrote:
> I'm not sure I like looking at custom attributes on the html tags.  I  
> can see this would be useful to the more design oriented user working  
> on the html side.  Does anyone feel strongly about having a custom  
> html attribute?

My expectation would be that the size of the chart will be equal to
the height and width css settings on a div element, rather than
passing them in via JavaScript. I'd like to hear about pros & cons of
other ideas, e.g., use Javascript height and width parameters, if not
specified, then fall css height and width settings div element.

[Chris Leonello]

> the height and width css settings on a div element

If you mean the height and width as specified in a style sheet or
style tag, this may not work. For a hidden element, I think the
height/width returned through javascript is undefined no matter if it
is specified in the element itself or in a style tag or stylesheet.

Using a custom attribute is probably as close as we can get to
specifying it in the html/css.

--
Chris Leonello

[John L. Cheng]

On Oct 12, 12:03 pm, Chris Leonello <chris.leone...@gmail.com> wrote:
> > the height and width css settings on a div element
>
> If you mean the height and width as specified in a style sheet or
> style tag, this may not work.  For a hidden element, I think the
> height/width returned through javascript is undefined no matter if it
> is specified in the element itself or in a style tag or stylesheet.
>
> Using a custom attribute is probably as close as we can get to
> specifying it in the html/css.

I am thinking something like this. Note how that the offsetWidth/
offsetHieght tells you the size of the div element.

<html>
<head><title>test</title>
<script>
function doTest() {
var msg = 'width: ' + document.getElementById('foo').offsetWidth +
'px, height: ' + document.getElementById('foo').offsetHeight + 'px';
document.getElementById('text').innerHTML = msg;
}
</script>
</head>
<body onload="doTest()">
<div id="foo" style="width:10em; height:100px; background-color:
#f00;"></div>
<div id="text" style="position:absolute; top:150px;"></div>
</body>
</html>

[mgc8]

On Oct 14, 7:33 pm, "John L. Cheng" <johnlich...@gmail.com> wrote:
> I am thinking something like this. Note how that the offsetWidth/
> offsetHieght tells you the size of the div element.

(...)

Just add "display: none" to the "foo" style and watch those values
turn to 0. The browser has no way of giving you a size from a div that
does not "exist" on the actual page. You'd need to first show it, then
compute the width/height, which results in an ugly flash. The only way
to solve this is to have the option of supplying information as JS
parameters. For div's that are not hidden, the correct sizes will be
applied anyway from the css so it doesn't matter.

[John L. Cheng]

On Oct 17, 4:59 am, mgc8 <mihs...@gmail.com> wrote:
> On Oct 14, 7:33 pm, "John L. Cheng" <johnlich...@gmail.com> wrote:> I am thinking something like this. Note how that the offsetWidth/
> > offsetHieght tells you the size of the div element.
>
> (...)
>
> Just add "display: none" to the "foo" style and watch those values
> turn to 0.

Good catch! Then my vote would be specifying the height and width via
Javascript parameters rather than using custom attributes. Trying to
use offsetWidth/height might still be a useful way to specify the size
of a "hidden" chart, assuming the developer is creating an application
where charts are drawn on hidden div layers (visibility: hidden) and
shown dynamically via Javascript toggles.

[Chris Leonello]

> ... Note how that the offsetWidth/

> offsetHieght tells you the size of the div element.

Except if the div has "display:none", offsetWidth/offsetHeight return 0.

I am in process of implementing all 3 options: config setting, custom
html attributes and js option to plot object. The custom attributes
would be of the form "data-height" and "data-width" to conform to the
html5 standard which finally allows custom attributes.

--
Chris Leonello

[Chris Leonello]

Oops, got lost in the threading of my messages. Didn't mean to
restate the answer to that 7 day old offsetHeight/offsetWidth issue.

In any event, I am implementing the stated enhancements.

--
Chris Leonello

[John L. Cheng]

> I've already implemented the $.jqplot.config object and am using it to  
> allow users to enable/disable plugins globally.  I can easily add it  
> there and probably will.  I think the per plot customization is also  
> important, so I can see adding something to the options argument which  
> overrides the config.
>

Chris,I just noticed this today, in the latest code, there is support
for setting width and height now!

[Chris Leonello]

Yep. I put that into the 0.9.5 release. You can now use a custom
html attribute, properties on the option object, or a $.jqplot.config
setting to specify the height and width.

I should have replied back to this thread after the release. It must
have gotten lost in my inbox.

--
Chris Leonello

[John L. Cheng]

On Nov 5, 5:43 pm, Chris Leonello <chris.leone...@gmail.com> wrote:
> Yep.  I put that into the 0.9.5 release.  You can now use a custom  
> html attribute, properties on the option object, or a $.jqplot.config  
> setting to specify the height and width.
>
> I should have replied back to this thread after the release.  It must  
> have gotten lost in my inbox.
>
> --
> Chris Leonello
>

Its great addition. Thanks again for getting this feature in so
quickly. I am going to use it now in my project where I am trying to
render into a hidden div, then use the "fade" effect to bring the
rendered charts into view.