Pulling charts dynamically into an overlay

[sissi]

Hi all

 

 

 

The company I work for has just purchased the pro version of FusionCharts and we love it :-)

 

 

 

However, there is one issue: We'd like to provide a zoom view for each chart so you can look at it in more detail.

 

 

 

What is the best approach to do this?

 

 

 

As at the moment we've build this with jQuery's "Shadowbox" plugin which works fine in FF....but in IE we get an "Error in loading data" message.

 

 

 

Here is what we did:

 

 

 

1. Rendering the graphs in "Javascript" mode as this is the nicest way: $FC->renderChart();

 

 

 

2. Adding all the charts to the page but hiding the zoom view charts with CSS (display:none)

 

 

 

3. Triggering the Shadowbox onclick and once that overlay is loaded adding the HTML into it with $(this).find('div.zoom-view').html();

 

 

 

FF likes it and displays the chart, IE doesn't.....

 

 

 

Thanks for any hints!

 

Sissi

[Guest Basundhara Ghosal]

Hi Sissi,

Welcome to FusionCharts forum.

Thanks for your appreciation.

However, there is one issue: We'd like to provide a zoom view for each chart so you can look at it in more detail.

Could you please try using the Drill-down functionality for the same.

FusionCharts can be easily and extensively used to create drill-down charts. All the charts in FusionCharts v3 suite support drill down for data elements i.e., in each chart type, the data plot of that chart (columns in Column Charts, Pie slices in Pie Charts etc.) can act as hotspots for the chart. Using the drill down functionality provided by FusionCharts, you can easily produce charts that enact "drill down" or "zoom in (data)" capabilities.

In FusionCharts v3, you can define the following types of link for the data plot:

• Simple links that open in the same page
• Simple links that open in a new page
• Links that open in a specified frame
• Links that open in a new pop-up window
• Existing JavaScript functions (on the same page) to be invoked as links

For further details please refer to the links below :-

Ref.- http://www.fusioncharts.com/docs?/DrillDown/Simple.html

http://www.fusioncharts.com/docs?/DrillDown/Frames.html

http://www.fusioncharts.com/docs?/DrillDown/PopUps.html

http://www.fusioncharts.com/docs?/DrillDown/ClickURL.html

http://www.fusioncharts.com/docs?/DrillDown/JavaScript.html

Hope this helps.

[sissi]

Hey Basundhara

 

 

 

Thanks for your reply though this is not what I need....

 

 

 

as you can see on the screenshot I attached the zoom-link is outside the chart:

 

 

 

 

 

 

so what needs to happen is: you click on "zoom", an overlay or pop-up opens and shows a bigger version of the chart.

 

 

 

Thanks

 

Sissi

[Guest Basundhara Ghosal]

Hi,

I am afraid, as of now FusionCharts does not support the 'ZOOM' functionality.

[sissi]

Hi Basundhara

 

 

 

Well if you think about it it's not merely a zoom functionaliy. It's more opening a chart (however this chart looks like does not matter) on-click and displaying it in e.g. an overlay div (without using frames or other nasty ways of achieving this)

 

 

 

The whole think works if you render the chart as plain HTML ($FC->renderChart(true) but it does not work when you want to render the chart with the nicer, unobtrusive Javascript method ($FC->renderChart()

 

 

 

Cheers

 

Sissi

[Guest Basundhara Ghosal]

Hi,

Could you please refer to the sample that we are sending you as an attachment?

Please revert to me in case you wish to apply some other logic other than the one that we have applied in our sample.

Hope this helps.

zooming.zip

[sissi]

Hmmm this is a bit strange........

 

 

 

I've taken your zooming.zip and changed Pie3D.html a bit to simulate my problem (see attached).

 

 

 

When you click on the link i've added ("Click here for a bigger version....") you get an overlay displaying a bigger version of the chart.

 

 

 

In this example it works fine in Firefox AND Internet Explorer, in both browsers you get the bigger chart in the overlay.

 

 

 

Now I wonder: Why do I get the "Error in Loading data" message in IE when I look at the implementation I've done on the project website I am working on at the moment? It's implemented in the same way as my example attached but does not work in IE.

 

 

 

Cheers

 

Sissi

Pie3D.zip

[Guest Basundhara Ghosal]

Hi,

Could you please send us the sample code that you are using for the same as an attachment?

Awaiting your reply.

[sissi]

Hey Basundhara

 

 

 

I've finally managed to replicate the issue/error, please unzip the files attached!

 

 

 

Please explain to me why clicking on the link "Zoom (copy first then show)" the zoomed version of the chart displays fine in Firefox but NOT in IE.....in IE I get "Error in loading Data"

 

 

 

Thanks

 

Sissi

zooming.zip

Edited June 17, 2010 by Guest

[Sanjukta]

Hello,

We are very excited to announce the release of FusionCharts v3.2 that leverages Flash and JavaScript (HTML5) to create stunning charts. It introduces the new zoom charts, Pareto & Marimekko charts and works with both XML and JSON data.

It now works on iPads and iPhones as well. Please visit

http://www.fusioncharts.com/ipad/

to find out what's new.

Furthermore, with this release, we have changed our licensing policies and pricing for our core products - FusionCharts, FusionWidgets, FusionMaps & PowerCharts. More details at:

http://www.fusioncharts.com/license/

Please feel free to share your thoughts with us at:

[email protected]

Thank you and have a good day.

[Guest Angie]

Dear User,

 

We are delighted to announce that PowerCharts is now ready for your iPads and iPhones too. We have just released PowerCharts v3.2. Starting v3.2, PowerCharts has HighCharts embedded within it, and offers both Flash and JavaScript (HTML5) charting . The Flash charts are displayed on a majority of devices and the JavaScript charts on devices that do not support Flash, all of it without writing a line of code.

 

Automatic rendering of JavaScript charts on devices (like iPad and iPhone) where Flash player is not supported.

 

5 new chart types:

 

Heat Map Chart

 

Box and Whisker Chart

 

Step Line Chart

 

Error Line Chart

 

Error Scatter Chart

 

 

* Support for JSON data format.

 

* Support for LinkedCharts, where a single data source controls multiple charts.

 

* Interactive legends in charts allow selective showing/hiding of data series.

 

* Legends now support icons for each data series.

 

* Better management of labels on charts.

 

* Labels now have an auto rendering mode to prevent them from overlapping, the chart selects the best display mode depending on the length of the labels and the width of the chart.

 

* Long labels are truncated, with ellipses appended to the truncated end of each label, and a tooltip bearing the completed label text is displayed when the user hovers over a truncated label.

 

* Support for line breaks and wrapping in all text elements including: caption, sub caption, X-axis title, Y-axis title, Labels and tooltips.

 

* In Line charts, data values can now be positioned either above or below the dataplots. Automatic positioning of data values is also supported.

 

* In Step-line charts dataplots can be joined using vertical lines.

 

* Custom alignment of caption and sub caption using STYLES.

 

* Advanced print management using JavaScript.

 

* Additional options for efficient event handling using JavaScript.

 

* Support for dynamic update of chart properties using JavaScript(barring select scatter and drag charts).

 

* Charts now support % based sizes along with dynamic resizing (barring select scatter and drag charts).

 

 

Learn more about everything new in PowerCharts v3.2 at : http:/ www.fusioncharts.com/PowerCharts/

 

We would love to hear from you at: http://www.fusioncharts.com/contact/