sbatta

Positioning Back Or Export Buttons In Drill Down Charts

Recommended Posts

I have a 3-level drilldown bar javascript chart that has export button to the top right but the moment I'm on level 2/3 the back button overlays the export button.

I see 'Back' overlayButton has no attributes to set it's position - http://docs.fusioncharts.com/charts/?guide-for-web-developers/fusioncharts-asp-class/FirstChart.html

Does export button have a way to position so this overlay doesn't occur?

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hey,

 

FusionCharts JavaScript charts does not support any attributes to customize the "Export Button", to change the position, as of now.

 

But, as a work around, you can hide this button on the chart using "exportShowMenuItem='0' " and export the chart using JavaScript API similar to FusionCharts Flash Charts.

 

For more information on "Exporting Charts as PDF or Images > JavaScript Reference > Initiating from JavaScript", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?exporting-image/javascript-ref/ECJavaScript.html

 

Hope this helps !

Share this post


Link to post
Share on other sites

Hi,

 

Let me share with you a raw way of shifting the Export Button to the top-left corner of the chart with 10px margin. Let's consider that your chart's DOMID is "myFirst":

 

Your additional code will be (make sure to execute this after the chart has been rendered. You can track when the chart has been rendered through the "rendered" event)

 

var myFirst_Export_SVG_Paths = $(FusionCharts("myFirst").ref).find("svg *").slice(-3);

 

$(myFirst_Export_SVG_Paths[0]).attr({transform:"translate(10,10)"});

$(myFirst_Export_SVG_Paths[1]).attr({transform:"translate(10,10)"});

$(myFirst_Export_SVG_Paths[2]).attr({x:10});

 

[edit] This only happens when there is only Export Button on the chart and print button is not.

[edit+] And works only in Browsers supporting SVG (i.e., will not work in Internet Explorer 6/7/8) - Internet Explorer 9, Firefox, Chrome, Safari.

Share this post


Link to post
Share on other sites

Hi,

 

To replace the above code, we have added a new attribute "toobarHAlign" to avoid overlapping.

 

Can you try adding "toobarHAlign"=left' " in the chart XML code? This would help us to put the export button on left and avoid overlapping.

 

Ref. Code:

<chart toobarHAlign='left'....>

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

 

To replace the above code, we have added a new attribute "toobarHAlign" to avoid overlapping.

 

Can you try adding "toobarHAlign"=left' " in the chart XML code? This would help us to put the export button on left and avoid overlapping.

 

Ref. Code:

<chart toobarHAlign='left'....>

 

Hope this helps.

hello,

I have tried this and it does not work for me, would it be possible to get a sample code?

Share this post


Link to post
Share on other sites
 

Hey,

 

This attribute works with latest version of FusionCharts Suite v3.4

 

 
<chart caption='Monthly' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0' exportEnabled='1' toolbarHalign='left'>
   <set label='Jan' value='420000' />
   <set label='Feb' value='910000' />
......
</chart> 

Hope this helps.

Capture.PNG

Share this post


Link to post
Share on other sites

hi, it's my first post, i from chile and my english it´s not very good.

 

my coment is:

 

this chang not working in my charts.

 

my code is:

 @version 3.11.0

 

"chart": {
                            "caption": "ATENCIONES MÉDICAS 2012",
                            "subcaption": "Atenciónes: Primarias, Especialidad y Urgencias",
                             "yAxisName": "Cantidad de Atenciones Médicas",
                          "numberPrefix": "",
                             "rotatevalues": "1",
                            "numbersuffix": "",
                            "yAxisMaxValue": "1320000",
                            "formatNumberScale": "0",
                              "decimalSeparator": ",",
                              "thousandSeparator": ".",
                              "exportEnabled": "1",
                              "toolbarHalign": "left",
                          "plotToolText": "<div>At. Médicas : <b>$datavalue</b></div>",
                            "theme": "ocean"   
                        },
 
help me pliss.
Edited by PatricioGarrido_Chile

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