Display chart

[Les]

Hello,

Is it possible to use fancybox to display a dynamically generated
chart?

Let me show you what I'm talking about :)

Go here:

http://omnipotent.net/jquery.sparkline/

You will see a large number of sparklines (i.e. small inline charts)
on this page.

I'd like to be able to click any sparkline and then display a larger
chart inside a fancybox.

The larger chart would be generated dynamically based on the initial
data used to display the sparkline.

Is this possible? How would I do it?

Thx

[Janis]

I think you can easily add these charts to hidden element and use
fancybox to reveal them. But use 1.3.0 RC2 or wait for final release
because current version clones elements but next releases will move
them to fancybox wrapper when displaying.

Janis

Janis

[Les]

Than you! This is going to work for me.

I have a follow up question :)

If I use elastic transition In or Out... how can make the box appear
to originate from the clicked element?

Then, when I close the box, I'd like the box to collapse on the
clicked element.

Currently, the box originates somewhere in the middle of the page.

See an example of what I'm talking about.

Go here:

http://highcharts.com/demo/

Click "View Options". You will see that the dialog originates from
the clicked element.

[Janis]

Try passing
'orig' : this
if you are using 1.3 RC2

[Les]

Here's my code. I'm evaluating it from the console.

$.fancybox({
autoDimensions: false,
orig: "#jqgh_sm_week_ending_tw",
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
href : '#chart',
title : '13 Week Trend actual vs goal'
}, {
frameWidth : 430,
frameHeight : 330
});

I tried using 'this', but it did not help.

I see the chart displayed, which is nice, but it originates from the
center of the page.

I'd like the animation to originate from this element:
#jqgh_sm_week_ending_tw.

Please help.

[Janis]

oh, I forgot, your have to pass jQuery object, like, $(this) or $
("#jqgh_sm_week_ending_tw")

[Les]

Nope, this doesn't work.

I created a test where you can see the problem.

Go here: http://fancybox.net/dev/130/

Run this script in Firebug's console:

$.fancybox({
autoDimensions: false,
orig: $("#search-what"),

'transitionIn' : 'elastic',
'transitionOut' : 'elastic',

href : '#biude',
title : 'Test'
}, {

frameWidth : 430,
frameHeight : 330
});

I was expecting the animation to start (or originate) from the "Search
Google" button, but it starts elsewhere on the page.

Also, I'd like the animation to end above the "Search Google" button
when the fancybox is closed.

[Les]

Janis, hi!

Did you have a chance to check this issue?

If 'orig' is not specified, I'd like the animation to originate from
the point on the page exactly where I clicked.

I think having this feature working correctly would some polish to an
already capable library.

Thx,
Les

[Les]

FYI: Version: 1.3.0 works for me. My problem is solved.