mightyenigma

Members
  • Content count

    22
  • Joined

  • Last visited

Posts posted by mightyenigma


  1. Hi,

     

    Is you application running from a Web server and the URL to the ExportHandler lies in the same domain?

     

    Yes, they are in the same domain.

     

    I solved the problem by removing the Javascript command to set the charts' container div's CSS to have position: fixed.

    I seems that this causes the Flash object to be erased temporarily and then re-instated after the container div has been moved to the fixed-position space in the browser window.

    So to have the fixed position (thereby allowing the chart to scan the bitmap for export no matter where the user scrolls to) AND actually export, I had to load all the charts,

    position them, wait for 1000ms, and THEN call exportChart() on all of the charts. That way works great.


  2. Here is the same sample with the delay added:

     

    for (var chartId in FusionCharts.items){
    var curChart = getChartFromId(chartId);
    if (curChart.hasRendered()){
            window.setTimeout(function(){
    	curChart.exportChart();
      }, 5000);
    }	
    }
    

     

    Why do you suppose the SWF objects need this delay before calling their Javascript exportCharts() hook will do anything? Maybe they javascript and html are done rendering and being defined before the SWF objects finish loading?


  3. Correction:

     

    I just put console.log() calls immediately before and after the failing exportChart() call. Both console.logs execute successfully. However, the chart does not start the bitmap scanning process to create the image file. It will in other browsers, just not in Chrome.

    Do I need to insert a small delay before calling exportChart to have it scan the image out to a file in Chrome?


  4. Thank you for the slick example.

     

    Unfortunately I miscommunicated what I need.

     

    My code successfully clones an exportable flash chart, after starting with a HTML/JS/SVG chart on the page.

    That's what I want.

     

    But the part that isn't working (only in Google Chrome, no other browsers have this problem) is when the method exportChart() is called by my script.

     

    When the code hits that point (and I've debugged step by step to ensure this is the spot it fails at), then the javascript simply halts with no error.

    It's as if the exportChart method doesn't exist on the clone.

     

    The strange thing is that I can trigger this exportChart() method from the Google Chrome console. Why won't it let my script see the method, but it lets it see all other methods (except for maybe hasRendered or isActive?)

    All other browsers can see these methods on the JS objects that correspond to the flash charts on the page.

     

     

     

    Aaron McC

     

     

    Hi,

     

    I have sent the demo project to your email id.

     

    Hope this helps!


  5. If you need different sizes for different screens, you can test browser window viewport size and add size params before rendering chart,

    depending on the process you're using to bring charts onto the page.

     

    I am using percentages to support different size screens. it's odd that it works sometimes but not others, thank you for your help

     

     


  6. I wonder if it's trying to use hex or RGBA color style in CSS to do this...

    If it's not a flash chart, it might be. In that case, not surprising if it uses CSS.

    If it uses CSS then it can't do alpha in IE without the filter: Alpha style rule.

    Just speculation, but maybe that's a place to start.

     

     

     

    Hello,

     

     

    I have set my charts to render with a transparent background by adding

    chart_$chartId.setTransparent(true);

    to the renderChart function in FusionCharts.php .

     

    In my chart XML, I set bgAlpha to 50 and set the bgColor to FFFFFF, and it renders fabulously in all browsers except Internet Explorer. I have attached a screenshot showing the display in Firefox 7 and the messed up display in IE9 (IE8 compatibility mode behaves the same way). I've also attached the XML file and page where I render the chart.

     

    In words, IE doesn't actually accept the transparency of the chart, and instead treats bgAlpha 100 as white and 0 as black, and only scales the bgColor along that axis.

     

    Please advise if there is a workaround to make Internet Explorer deal with bgAlpha.

     

    *edited for clarity


  7. Thank you for testing it on your system. I must be doing something in my javascript that is preventing the export() function call somehow. Perhaps the inclusion of another Javascript library is interfering. At least I know that it should be working in chrome, even on a cloned Flash chart. That helps narrow down the problem a bit.

     

    I would like to receive your demo at [email protected]

     

    By comparing our code I may be able to find the flaw in mine.


  8. Hi,

     

    Please share the sample code to test from our end.

     

    If possible, please share a live URL using which we can replicate the issue.

     

    Thank you. I included doneSavingChart() just so the rest would make more sense. During the problem though, since no exports happen, the callback doneSavingChart never happens either.

    There is a lot that goes into all this across multiple files, so for you to be able to test it I'd have to put quite some time into developing a reduced test case.

    I hope you can ascertain some flaw that is Chrome-specific by just reviewing the code. I would like to include the chart HTML but it contains company information that I probably don't have permission to divulge.

    I'm sorry that's not very helpful. If reviewing the code gives nothing significant to pursue as a possible solution, I'll see what else I can arrange for you.

     

    Keep in mind it's specifically a Chrome issue. Testing in Firefox, IE, and Safari this problem does not occur. Have not tested in Opera yet.

     

     

    
    //callback for when a chart finishes saving to server disk. This was set up in dashboard_body.php
    function doneSavingChart(objRtn){
    		var domID = objRtn.DOMId;
    		var fileName = objRtn.fileName;
    
    		//window.setTimeout(function(){
    			numChartsSaved++;
    			var fileNameContainerId = 'chartFileName---' + domID;
    			$('#' + fileNameContainerId).text(fileName);
    			var chartDiv = $('#' + domID).closest('.frame').find('div');
    			//$(chartDiv).css({left:'', top:'', bottom:'0', right:'0'});
    			//busyChart = null;//clear it here to start another chart exporting when the current one is finished.
    
    			if (numChartsSaved < numChartsToSave){
    			return;
    			}else{
    			window.clearInterval(exportProcessTimer);
    			var dataObj = new Object();
    			dataObj.sectionLabel = $('#menu li.current').text().replace(trimPattern, '');
    			dataObj.dateRange = fetchDateRange();
    			dataObj.chartData = fetchChartData();
    
    			postReport(dataObj);
    			}
    		//}, 500);//small delay to make sure the picture has finished saving.
    }
    
    
    //timed polling function to take next action in report/export process:
    function exportCharts(){
    
    		busyChart = null;//clear busyChart here if you want it to start another export every time the exportcharts timer fires. clear it in doneSavingChart to start another one every time a chart completely finishes exporting.
    		//I am putting this delay in between calling somechart.exportChart() because I have observed it prevents blank image exports (otherwise file handle getting yanked before it can write? It was not designed for bath exporting after all).
    
    		if (numFlashChartsMade < numChartsToSave){
    			//$('.ui-jqgrid-titlebar-close').click();//open them back up. Probably not important for FusionChart export, but this way I can see everything non-chart that we'll be putting in the PDF.
    
    			for (var chartId in FusionCharts.items){
    			var curChart = getChartFromId(chartId);
    
    			if (curChart.hasGeneratedExportCharts || curChart.isExportChart){
    
    				continue;//don't generate exportable charts from already-exportable charts. That's an exponentially growing recursion right there!'
    			}	
    			curChart.hasGeneratedExportCharts = true;
    
    			var myFrame = $('#' + chartId + 'Div').closest('.frame');
    			var frameName = $(myFrame).attr('id').split('_')[0];
    
    			//this is for the existing chart on the page, IF it has export => true:
    			if ($(myFrame).hasClass('exportChart')) {
    				$(myFrame).removeClass('exportChart');//shouldn't need to do that with the hasGeneratedExportCharts member in place.
    
    				var newChartParams = curChart.clone({renderer: 'flash', id: chartId, width: 240, height: 177}, true);//true makes it just return the params
    				curChart.dispose();//get rid of JS chart so it doesn't cause a DOM id conflict when we create flash version of chart
    				var myClone = new FusionCharts(newChartParams);//create flash version so we can export to server.
    				numFlashChartsMade++;
    				myClone.setChartAttribute('animation', 0);//keep it from exporting the unfinished animation frames instead of the finished plot, by disabling animation on this flash version of it.
    				myClone.render();
    
    				getChartFromId(chartId).isExportChart = true;//new chart should have same id as old one; we set it so in newChartParams.
    
    				var origChartDiv = $('#' + chartId + 'Div');//which section of the page do these charts belong to?
    				$(origChartDiv).css({width: '240px', height: '177px'});//A forum post stated that percent-unit chart div container dimensions can adversely affect rendering, so I give specific pixel dimensions here.
    				var exportedChartFileName = document.createElement('span');
    				$(exportedChartFileName).addClass('chartFileName');
    				$(exportedChartFileName).attr('id', 'chartFileName---' + chartId);
    				$(exportedChartFileName).css('display','none');
    				$(origChartDiv).append(exportedChartFileName);
    			}
    
    			//This is for the action stubs in marketing.php that have export => true:
    			//Those that have that flag set will have a function to call in exportReportFunctions array.
    			//createExportCharts is the callback for the ajax in those functions.
    			if ('undefined' !== typeof(exportReportFunctions[frameName])){
    				for (var i = 0; i < exportReportFunctions[frameName].length; i++){
    				if('undefined' !== typeof(exportReportFunctions[frameName][i])){
    					exportReportFunctions[frameName][i](chartId);
    				}
    				}
    			}
    
    			}
    		}else if (numChartsToSave > 0){
    
    			for (var chartId in FusionCharts.items){ //not using cloneCharts array here because it doesn't contain the needed mappings, but I do believe it contains our cloned charts....
    			var curChart = getChartFromId(chartId);
    
    			if ( null == busyChart && curChart.hasRendered && curChart.hasRendered() && !curChart.exportHasBeenCalled && curChart.isExportChart){
    				busyChart = curChart;//let's just do one at a time. pixels must be in the viewport for export to succeed, apparently (except in firefox. We can do them all at once in Firefox).
    
    				curChart.scrollIntoView();//even the fixed position won't always bring chart into view. Safari doesn't even treat it like it exists until viewport has touched it. So we scroll to make sure it has to be acknowledged and rendered.
    
    				var myTop	= ($(window).height() - 177)*0.5;
    				var myLeft	= ($(window).width() - 240)*0.5; 
    
    				$(curChart).closest('.frame').css({border:'2px solid black', position:'fixed', top:''+myTop+'px', left:''+myLeft+'px', width:'240px', height:'177px', 'z-index':'1000'});//A forum post stated that percent-unit chart div container dimensions can adversely affect rendering, so I give specific pixel dimensions here.
    				curChart.exportChart({exportFormat: 'PNG'});//doneSavingChart callback will redirect when all charts have finished.
    				curChart.exportHasBeenCalled = true;//so the call doesn't get repeated next time the process polling timer fires.
    
    			}
    			}
    		}else{///no charts to save. Get datagrids at least.
    			//this code is repeated in doneSavingChart()
    			window.clearInterval(exportProcessTimer);
    			var dataObj = new Object();
    			dataObj.sectionLabel = $('#menu li.current').text().replace(trimPattern, '');
    			dataObj.dateRange = fetchDateRange();
    			dataObj.chartData = fetchChartData();
    
    			postReport(dataObj);
    		}
    }
    
    function printOutCharts(){
    
    		numChartsSaved = 0;
    		numFlashChartsMade = 0;
    
    		//Add the number of charts which are already on the page and which are flagged as 'exportChart'.
    		$('.exportChart').each(function(){
    			numChartsToSave++;
    		});
    
    		exportProcessTimer = window.setInterval(exportCharts, 1500);
    
    		if ($('#modal-mask').length == 0){
    			var mask = document.createElement('div');
    			$(mask).attr('id', 'modal-mask').css({width:'100%', height:'100%', position:'fixed', top:'0px', left:'0px', background:'rgba(255,255,255,0.77)', filter:'Alpha(Opacity=77)', 'z-index':500});
    			$(document.body).append(mask);
    		}
    }
    


  9. All browsers except Chrome will execute the call to someChartObject.exportChart();

     

    There is no error, it just does nothing at that line of code and continues on with the rest of the script perfectly.

     

     

    Maybe it's getting a different object than the other browsers, an object that doesn't have that method?

     

    I get the charts in a loop: for (chartId in FusionCharts.items)

    and inside the loop: var curChart = getChartFromId(chartId);

    and then inside the loop I call: curChart.exportChart();

     

    Every line of code executes except for that one. It's as if it's commented out.

     

    P.S. Maybe it's executing and just deciding to do nothing?


  10. I have 8 charts on my page, and need to export all of them to server-side image files.

    The charts all successfully render and export, but when I go to the export folder, most of the images are blank, even though they weren't during the bitmap capture process on the browser.

     

    This is very helpful, and the approach I have taken.

    However, once all the charts have exported, only 1 or 2 of them actually have any pixel data in them. The rest are blank.

     

    I have verified that all the charts show up correctly on the page all at once (I am using the position:fixed style on the flash charts I create when the user clicks a button to trigger this exporting).

    I have even laid them out side by side from top to bottom so the entire chart is exposed, but still only one or two of the eight charts will saved correctly after rendering.

    I have made them very small to speed up capture time (240X177).

     

    I made the page wait 1500ms before navigating away to the PDF it's generating, to make sure the charts had fully saved before leaving the page.

     

    This is not a problem in FireFox, only in IE and Chrome. IE more consistently than Chrome.

     

    The only way I've been able to get non-blank captured image files on all browsers is to force it to export only one chart at a time, which takes a very long time, especially with larger charts.

     

    It's currently using JPGs, if that's important. I wonder if the compression time causes a race condition? I'll try another format and see if that helps, but I think it's something else.