Addeventlistener () Not Working With Pure Javascript Fusion Chart.

[venkatc]

Hi Support.

 

 

We are using Pure Javascript fusion charts to display the charts. We have 2 functionalists

 

1. Display :We are displaying total 6 charts in my web browser with navigation tabs(2 charts in one tab, 2 charts in 2nd tab......). This is working fine with pure javascript.

 

2. Export : Here we need to export all the 6 charts at a time when user clicks download button(Irrespective of tabs).

 

 

We are able to do 1 and 2 with flash with server side export successfully with FusionCharts.addEventListener() event. When coming into javascript export, FusionCharts("someID").addEventListener () is not working.

 

For 1. To create charts we are using below code.

 

displayChart = function(divId,path,xml,width,height){

FusionCharts.setCurrentRenderer('JavaScript');

var chiefExecutiveChart1111 = new FusionCharts(path, "ChartId"+ Math.floor(Math.random() * (new Date()).getTime() + 1), width,height,'False', 'False', 'True');

chiefExecutiveChart1111.setXMLData(xml.join(""));

chiefExecutiveChart1111.render(divId);

 

};

 

For 2 : displayExportChart = function(divId,path,xml,width,height, chartIdName, f){

FusionCharts.setCurrentRenderer('JavaScript');

var chiefExecutiveChart = new FusionCharts(path, chartIdName + suffix, width, height,'False', 'False', 'True');

chiefExecutiveChart.setXMLData(xml.join(""));

chiefExecutiveChart.render(divId);

FusionCharts(chartIdName + suffix).addEventListener ("FC_Rendered" , myChartListener );

 

};

 

myChartListener = function(eventObject, argumentsObject) {

 

//Do some thing.

}

 

 

In step 2 I am adding addEventListener() event. If I comment code (For 1--displayChart() method ), the addEventListener() is working. But it is working only one time. If user clicks one more export the event is not working.

 

 

Please advice. How can I solve this problem.

 

Thanks.

[Guest Sashibhusan]

Hi,

 

Please find the response to your queries inline, below:

 

We are able to do 1 and 2 with flash with server side export successfully with FusionCharts.addEventListener() event. When coming into javascript export, FusionCharts("someID").addEventListener () is not working.

>>Please note that FusionCharts does not have the feature of "Batch Exporting of multiple charts as image/PDF to server for JavaScript Charts" as of now.

 

So, if you try exporting by invoking "addEventListener();" and commenting the code (For 1--displayChart() method ), the " addEventListener()" is called as static method and registers the global events of all the charts present in a page.

 

Hence, will be invoked only once.

 

For more information on "Exporting Pure JavaScript Charts", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?exporting-image/ECPureJS.html

 

Hope I am able to clarify myself.

[venkatc]

Hi,

 

Please find the response to your queries inline, below:

 

We are able to do 1 and 2 with flash with server side export successfully with FusionCharts.addEventListener() event. When coming into javascript export, FusionCharts("someID").addEventListener () is not working.

>>Please note that FusionCharts does not have the feature of "Batch Exporting of multiple charts as image/PDF to server for JavaScript Charts" as of now.

 

So, if you try exporting by invoking "addEventListener();" and commenting the code (For 1--displayChart() method ), the " addEventListener()" is called as static method and registers the global events of all the charts present in a page.

 

Hence, will be invoked only once.

 

For more information on "Exporting Pure JavaScript Charts", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?exporting-image/ECPureJS.html

 

Hope I am able to clarify myself.

 

 

Hi Sashibhusan,

 

 

Thanks, for your support.

 

If possible please provide the sample code with below feature with integration of high chart php api to export the charts in linux.

 

 

1. Display 3 or 4 charts on the browser(column 2d, scatter, combi2dy and pie2d chart) with pure javascript.

 

2. Once chart rendering is completed, I want to export the each chart using "addEventListener(DrawComplete)" event, it will use high chart php api to export charts(I want to use local high chart configuration in linux).

 

3. Once all charts export are completed, My control should be in the same html page(No redirecting to php.index file).

 

4. I want to save the images in custom folder.

 

5. Add one button "Export charts". If user clicks the button, I want to export images with different chart names(If user clicks that button 5 times, i want to download 5 set of fusion chart images with different names.)

 

 

We tried above 5 steps with local configuration of high chart php in local. We are facing lot of problems with that. We are unable to solve the issue. But above 5 step we are able to do in flash with out any issue.

 

 

--- Do we need to buy any high chart php api to export the charts properly with out any issues. Please advice.

 

 

My email address are [email protected] or [email protected] or [email protected]

 

Please help us.

[venkatc]

Hi Sashibhusan,

 

 

Thanks, for your support.

 

If possible please provide the sample code with below feature with integration of high chart php api to export the charts in linux.

 

 

1. Display 3 or 4 charts on the browser(column 2d, scatter, combi2dy and pie2d chart) with pure javascript.

 

2. Once chart rendering is completed, I want to export the each chart using "addEventListener(DrawComplete)" event, it will use high chart php api to export charts(I want to use local high chart configuration in linux).

 

3. Once all charts export are completed, My control should be in the same html page(No redirecting to php.index file).

 

4. I want to save the images in custom folder.

 

5. Add one button "Export charts". If user clicks the button, I want to export images with different chart names(If user clicks that button 5 times, i want to download 5 set of fusion chart images with different names.)

 

 

We tried above 5 steps with local configuration of high chart php in local. We are facing lot of problems with that. We are unable to solve the issue. But above 5 step we are able to do in flash with out any issue.

 

 

--- Do we need to buy any high chart php api to export the charts properly with out any issues. Please advice.

 

 

My email address are [email protected] or [email protected] or [email protected]

 

Please help us.

 

 

 

Hi

 

 

Is there any update on above questions.

[Guest Sashibhusan]

Hi,

 

With regard to your query, please note that FusionCharts pure JavaScript charts can be exported either

 

a. By sending the chart data to the external server (high chart server), where you need active Internet connection to export

 

b. Or else setting up your own server using "Batik" library.

 

But, in either way multiple charts (3 to 4 charts) can not be exported at once (Batch Export), as of now.

 

So, all your steps from 3 to 5 can be achieved (except step 1 and step2), by implementing Batik Library and for each chart, you need to place separate buttons for initiating export process.

 

Also, please note that for exporting FusionCharts pure JavaScript charts, no need to buy high chart API and need not require any change for "exporting in Linux" except the below change in Batik implementation steps.

 

>>Create a directory called temp in the same directory as index.php. If you have Linux or Unix servers, chmod this new directory to 777.

 

For more information on "Exporting Pure JavaScript Charts", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?exporting-image/ECPureJS.html

 

Hope I am able to clarify myself.

[venkatc]

Thanks for your suport.

 

We are using latest version of highchart.js(Which are provided by fusion chart.)

 

We are configuring the local server in linux with batik to export the svg file to image.

 

We are getting below problems

------------------------------------

1. We are unable to create svg(target file-$svg) file into /temp/tempName.svg file.

 

if (!file_put_contents("temp/$tempName.svg", $svg)) {

die("Couldn't create temporary file. Check that the directory permissions for

the /temp directory are set to 777.");

}

2. After that we are getting "Error while converting SVG" in index.php file.

 

3. If we copy any sample file(6ddf9b3933a1c2610019a61e98e681a2.svg) to temp directory and execute the below cmd manually we are getting image(6ddf9b3933a1c2610019a61e98e681a2.jpg) in temp directory with few exceptions.

 

cmd -- java -jar batik-rasterizer.jar -m image/jpeg -d temp/6ddf9b3933a1c2610019a61e98e681a2.jpg -w 300 temp/6ddf9b3933a1c2610019a61e98e681a2.svg (Linux)

 

Exceptions

 

***** CSSEngine: exception....

org.w3c.dom.DOMException: file:/var/www/html/export/temp/6ddf9b3933a1c2610019a61e98e681a2.svg:

The attribute "visibility" represents an invalid CSS value ("").

Original message:

Unexpected token: 0 (see LexicalUnits).

at org.apache.batik.css.engine.CSSEngine.getCascadedStyleMap(CSSEngine.java:784)

at org.apache.batik.css.engine.CSSEngine.getComputedStyle(CSSEngine.java:876)

at org.apache.batik.bridge.CSSUtilities.getComputedStyle(CSSUtilities.java:82)

at org.apache.batik.bridge.CSSUtilities.convertDisplay(CSSUtilities.java:564)

at org.apache.batik.bridge.GVTBuilder.buildGraphicsNode(GVTBuilder.java:206)

at org.apache.batik.bridge.GVTBuilder.buildComposite(GVTBuilder.java:171)

at org.apache.batik.bridge.GVTBuilder.buildGraphicsNode(GVTBuilder.java:219)

at org.apache.batik.bridge.GVTBuilder.buildComposite(GVTBuilder.java:171)

at org.apache.batik.bridge.GVTBuilder.build(GVTBuilder.java:82)

at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(SVGAbstractTranscoder.java:208)

at org.apache.batik.transcoder.image.ImageTranscoder.transcode(ImageTranscoder.java:92)

at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(XMLAbstractTranscoder.java:142)

at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(SVGAbstractTranscoder.java:156)

at org.apache.batik.apps.rasterizer.SVGConverter.transcode(SVGConverter.java:1001)

at org.apache.batik.apps.rasterizer.SVGConverter.execute(SVGConverter.java:717)

at org.apache.batik.apps.rasterizer.Main.execute(Main.java:938)

at org.apache.batik.apps.rasterizer.Main.main(Main.java:992)

ERROR: null

Enclosed Exception:

file:/var/www/html/export/temp/6ddf9b3933a1c2610019a61e98e681a2.svg:

The attribute "visibility" represents an invalid CSS value ("").

Original message:

Unexpected token: 0 (see LexicalUnits).

 

***** CSSEngine: exception property.syntax.error:org.w3c.css.sac.CSSParseException: Unexpected token: 0 (see LexicalUnits).

 

 

4. We have 777 permissions to temp folder.

 

Why we are unable to create svg file in temp directory before converting into images dynamically. Do we need, any GNU License for copy the svg file to temp folder. Please advice.

Provide me the clear steps document to configure the local server in linux 64-bit and java version "1.6.0_27".

[FusionCharts Support]

Hi Venkat,

 

Are you using Internet Explorer? If so, can you please try once using some other browser like Firefox and Chrome?

 

Also, can you please check if you have the latest FusionCharts JavaScript class files? The latest release of FusionCharts XT is 3.2.2 Service Release 4 (released on 6 August 2012) which contains a number of fixes.

[venkatc]

Thanks for support.

 

We downloaded latest vesrion of fusioncharts tried it but no luck.

 

I think the problem with setup the local server with batik in linux.

 

If Possible can you please share some documents or any same project.

 

my mail : [email protected]

 

**We are able to download using in windows with few issues.**

 

 

Please help us it is very urgent.

[FusionCharts Support]

Hi,

 

The issue regarding "The attribute "visibility" represents an invalid CSS value ("")." has already been fixed in the latest release as I mentioned - FusionCharts XT is 3.2.2 Service Release 4 (released on 6 August 2012).

 

However, if you are still facing issues, can you please send us the SVG data that is getting posted to the index.php?

 

You can easily do this by doing a var_dump