Positioning Back Or Export Buttons In Drill Down Charts

[sbatta]

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?

[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 !

[mightyenigma]

If you are using JS/HTML5 charts, rather than Flash charts, you can manipulate the button/dropdown element using Javascript DOM manipulation methods.

[Guest Sashibhusan]

[mightyenigma]

I'm curious to know which solution you chose

[FusionCharts Support]

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.

[FusionCharts Support]

and...

 

you can check an implementation of the same from http://igcomm.com/show/hacks/js/export-button-position/

[Cory]

Hello,  I am unable to get this code to work, could you upload a working sample of this code?

[Swarnam]

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.

[Cory]

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?

[Swarnam]

 

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.

[Cory]

Ok I will update and try this out thank you...

[Cory]

it worked. thank you very much

[Swarnam]

[PatricioGarrido_Chile]

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 February 7, 2017 by PatricioGarrido_Chile

[Ayan Bhadury]

Hi,

 

Yes the attribute "toolbarHalign" is working at our end. Please upgrade your FusionCharts to the latest version if you are facing problem.

 

For further reference please check this sample fiddle link  http://jsfiddle.net/ayanbhaduryfc/km6fzvtz/1/

[PatricioGarrido_Chile]

Gracias, recién leo tu comentario.

 

 

Muchas gracias!

 

 

actualizaré.

[Srividya]

Hi,

I installed Fusion Chart version @3.13.3 which is the latest available version in npm.

The attribute "toolbarHalign" is not working for my code.

[Akash Biswas]

Hi,

 

It is working fine at our end using the version 3.13.3. Please refer to the sample fiddle : https://jsfiddle.net/vfecusq4/

If you are still facing the same issue, kindly provide a scaled down sample replicating the issue, so that we can check at our end and investigate.

 

Thanks,

Akash.