Sign in to follow this  
IDForums

How to zoom Sparkline to Line Chart

Recommended Posts

Hi,

 

 

 

I have a sparkline graph and a small magnifying glass icon beside it. When user clicks on the magnifying glass, it should open a new window with proper Line Chart showing more details. Can somebody suggest me how to provide this feature? Basically I want to implement lightbox feature.

 

 

 

Thanks,

 

Mona.

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Madhumita

Hi Mona,

If you are comfortable with JQuery-plugin(link:http://jquery.com/) then please check our FusionCharts Free gallery (link:http://www.fusioncharts.com/free/gallery/) where we have used similar lightbox feature. You can take the appropriate tips from this link.

 

Please keep us updated on your progress.

Share this post


Link to post
Share on other sites

Hello Madhumita,

 

 

 

In order to use jQuery lightbox plugin, besides a bunch of steps the code to be included in HTML is as follows right?

 

< a href="image1.jpg">< img src="thumb_image1.jpg" width="72" height="72" alt="" />< /a>

 

For me to use this code, href should point to some jpg file but my application needs to open a Line chart. How should I achieve this?

 

 

 

Looking forward for your reply.

 

 

 

Thanks,

 

Mona.

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi Mona,

We have send you a sample as an attachment of a sparkline graph and a ZOOM icon beside it. When you click on the icon, it will open a new window with proper Line Chart showing more details implementing lightbox feature.

Please have look to it. Hope this helps. :)

 

 

 

lightboxexample.zip

Share this post


Link to post
Share on other sites

Thanks for your help. This works perfect!

 

Why is that the moment I change the file extension from HTML to JSP, I get this error? "FusionCharts cannot be resolved to a type" on this line - var myChart1 = new FusionCharts("SparkLine.swf", "myChart1Id", "300", "125", "0", "0");

 

I posted this error earlier also in this forum. Am I doing something wrong?

Share this post


Link to post
Share on other sites

Hi,

 

 

 

The attached example works perfectly. I am unable to find a way to increase the size of the pop up window without a scroll bar. Can you direct me to the attribute which corresponds to this? I tried changing some values in css file but could not get the appropriate attribute.

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi,

Could you please try it by specifying the width and the height of the pop-up window in the "link" attribute.

Also, to disable the scroll function please set the scrollbar functionality to 'no'.

Example:- <set .. value='235' link="P- detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=noShowDetails.asp3FMonth3DJan" />

Please take look into the link below:-

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

Hope this helps. :)

Share this post


Link to post
Share on other sites

Hi,

 

 

 

Is there anyway that I can resize my light box based on the size of FusionChart? resize option in lytebox.js does not seem to work for some reason.

 

 

 

this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions

 

 

 

Thanks,

 

Mona

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

The auto resize functionality will not work here properly.

You have to explicitely set the size for each lightbox for each chart.

Edited by Guest

Share this post


Link to post
Share on other sites

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
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:

Please feel free to share your thoughts with us at:

Thank you and have a good day.
:)

Share this post


Link to post
Share on other sites
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/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this