Export Entire Chart

[jayj]

I have noticed that the export functionality only exports what is visible on the screen (screen shot) as opposed to the entire chart. I first want to ask if there is an update to topics related to this that I have stumbled upon from many years prior - is there a method to allow you to export all data instead of what is visible within the predefined height and width?

If not, I am attempting to bypass this by changing the width and height programmatically before and after the export. The problem I'm running into is that it resizes, but does not export the resized chart. It exports the chart as it was initially. My code is below. Any helps is appreciated.

<button id="export_chart" class="form_btn" title="Click to export the chart to PDF">Export to PDF </button>
<div id="chart-container">FusionCharts will render here</div>

FusionCharts.ready(function () {
	var smoPlan = new FusionCharts({
        type: 'gantt',
        renderAt: 'chart-container',
        width: '1500',
        height: '850', //'850'
        dataFormat: 'json',        
		dataSource: {
            // Chart Configuration
			"chart": {
				"dateformat": "mm/dd/yyyy",
                "caption": "IMT Major Projects",
                "subcaption": title_subcaption,
				//"showTaskStartDate": 1,
                "legendCaption": "Project Status",
				"legendCaptionFontSize": "14",
				"legendCaptionBold": "1",
				"legendItemFontSize": "12",
				"legendIconScale": "1.5",
				"legendAllowDrag": "1",
				"legendBgColor": "#CCCCCC",
				"legendBgAlpha": "20",
				"legendBorderColor": "#666666",
				"legendBorderThickness": "1",
				"legendBorderAlpha": "40",
				"legendShadow": "1",
				"theme": "ocean",
                "canvasBorderAlpha": "40",
				"showBorder": "1",
				"gridbordercolor": "#666666",
        		"gridborderalpha": "20",
				"exportEnabled": "1", 
				"exportMode": "auto",
				"exportFileName": "TestExport"
            }			
    }).render();
	
	function export_chart() {
		smoPlan.resizeTo('1500', '2000');
		smoPlan.exportChart({"exportFormat": "pdf"});
  smoPlan.resizeTo('1500', '850');
	}
	$("#export_chart").on('click', function () 
	{
		export_chart();
	});	
});

 

 

Edited June 19, 2019 by jayj
add code

[Akash Biswas]

Hi,

 

The export feature of FusionCharts is intended to capture the current state of the chart. So, if the chart has scroll enabled, exported image would capture the current visible portion of the chart. This is an intended feature.

Possible work-around : To export the entire chart(that has scroll enabled), programmatically you can use the "resize()" API method to increase the chart width accordingly to avoid scrolling, and then export the entire chart(without scrolling). And then again revert back to the original width using "resize()" API method after exporting.

Please check this sample(scroll column chart) for reference to the implementation : http://jsfiddle.net/rkmbx2h8/1/

 

However, when you are using a Gantt chart with the above suggested work-around, you would need to add few attributes to configure the scroll feature of Gantt chart.

1. Horizontal scrolling of Gantt pane, set "ganttPaneDurationUnit" and "ganttPaneDuration" attributes to null for disabling gantt pane scroll.

2. Vertical scrolling of Gantt pane, set "useVerticalScrolling" attribute to "0" for disabling vertical scroll.

For reference, check the documentation link : https://www.fusioncharts.com/dev/chart-guide/standard-charts/gantt-chart#add-scroll-to-chart

 

Sample Gantt chart : http://jsfiddle.net/ojutx19a/1/

 

Thanks,

Akash.

[jayj]

Thanks for the response. It was very helpful. I was able to almost get the desired result. The only issue I'm running into is the height of the tasks seems to increase beyond reason. I attached a screenshot of the result. Do you have any suggestions? The current height for all tasks is "32%"...

            "tasks":
			//These are the actual bars associated with the projects. Usdes start and target dates of projects
			{ 
				"animation": "1",				
				"processid": "1",
                "id": "1-1",
                "color": "#5AC752",
                "height": "32%",
                "toppadding": "12%",           			      
                 task: tasks	 	
            },

For those looking for the solution to my original question:

	function export_chart() {
		// current chart attributes/values
		var pdu=smoPlan.getChartAttribute("ganttPaneDurationUnit");
		var pd=smoPlan.getChartAttribute("ganttPaneDuration");
		var vs=smoPlan.getChartAttribute("useVerticalScrolling");
		var h=smoPlan.getChartAttribute("height");
		var w=smoPlan.getChartAttribute("width");
		
		smoPlan.setChartAttribute ( "showFullDataTable", "0"); 
		smoPlan.setChartAttribute ( "ganttPaneDurationUnit" , "" ); 
		smoPlan.setChartAttribute ( "ganttPaneDuration" , "" ); 
		smoPlan.setChartAttribute ( "useVerticalScrolling" , "0" ); 
		
		smoPlan.resizeTo('1500', '2000'); // expand chart size
		smoPlan.exportChart({"exportFormat": "pdf"}); // export
		smoPlan.resizeTo(w, h); // restore chart to original size
		smoPlan.setChartAttribute ( "useVerticalScrolling" , vs );
		smoPlan.setChartAttribute ( "ganttPaneDuration" , pd );
		smoPlan.setChartAttribute ( "ganttPaneDurationUnit" , pdu );
	}
	$("#export_major_chart").on('click', function () 
	{
		export_chart();
	});	

 

[Akash Biswas]

Hi,

 

Please replicate the issue in a sample fiddle and provide us so that we can check and get back to you.

Sample Gantt chart : http://jsfiddle.net/ojutx19a/1/

 

Thanks,

Akash.