Fusioncharts & Nodejs

[jasonfill]

Hello,

 

I am trying to setup a NodeJs server to run FusionCharts on. The overall goal of this is to emulate this type of setup where High Charts is used: http://blog.davidpadbury.com/2010/10/03/using-nodejs-to-render-js-charts-on-server/. We have the need to create batch reports and so forth via a cron process, in which case there is no actual browser - thus no chart can be rendered. We are planning to setup this NodeJs server to act as a type of adapter (via web service we will create) that will create the charts, convert to images and pass back the URL of the image.

 

I have this working well, except for the all important part...the chart is not rendering nor am I getting any errors. When I look to see what is in the div where the chart should be all I see is:

 

<span id="myChartId" style=""><small style="display: inline-block; *zoom: 1; *display: inline; width: 100%; font-family: Verdana; font-size: 10px; color: #666666; text-align: center; padding-top: 145px;">Loading chart. Please wait</small></span>

 

So I know calling the myChart.render('container'); function is working b/c that gets created...but the next step of actually rendering the chart is not happening. Does anyone have any ideas of what is happening under the hood between this loading message and actually displaying the chart?

 

Thanks,

 

Jason

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum!

 

Please note that FusionCharts XT features a completely new FusionCharts JavaScript class. FusionCharts JavaScript class now consists of four main files: FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js. These four files are present in Download Pack > Charts folder. You would only need to include FusionCharts.js in your web page (however, do not forget to copy the rest of files to your web application). The rest of the JavaScript files would be automatically loaded on-demand by FusionCharts.js.

 

Also note that JavaScript charts use AJAX to load data from the URL data sources. Some browsers does not allow AJAX data loading to function when running from local file system (using file:/// protocol). Hence, when you run the JavaScript charts from local file system and you are using Data URL method (setXMLUrl, setJSONUrl, setDataURL or similar functions) to provide data to charts where physical xml or json files are involved, this error occurs.

 

To over-come this situation you would need to render the JavaScript charts using Data String method.

 

For more details, please read: http://docs.fusioncharts.com/charts/?FirstChart/UsingPureJS.html

 

Hope this helps.

[jasonfill]

Angshu,

 

Thank you for your reply those tips are very helpful. A few follow up questions:

 

1. If the data was not loading properly, shouldn't the FC_DataLoadError function be thrown?
2. Does the loading HTML get added to the page even in the HC files and jquery is not loaded? I am thinking maybe those files are not being loaded into NodeJs properly. The HTML that is written out initially is: <span id="myChartId" style=""><small style="display: inline-block; *zoom: 1; *display: inline; width: 100%; font-family: Verdana; font-size: 10px; color: #666666; text-align: center; padding-top: 145px;">Loading chart. Please wait</small></span>
3. Is it possible to include the HC files directly, or will that break something?

None of the error functions are being called so it is hard to tell what is breaking. In addition the FC_Rendered function is not being called so we of course know the chart is not rendering.

 

I am going to continue to try a few different things.

 

Thanks!

Hi,

 

Welcome to FusionCharts Forum!

 

Please note that FusionCharts XT features a completely new FusionCharts JavaScript class. FusionCharts JavaScript class now consists of four main files: FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js. These four files are present in Download Pack > Charts folder. You would only need to include FusionCharts.js in your web page (however, do not forget to copy the rest of files to your web application). The rest of the JavaScript files would be automatically loaded on-demand by FusionCharts.js.

 

Also note that JavaScript charts use AJAX to load data from the URL data sources. Some browsers does not allow AJAX data loading to function when running from local file system (using file:/// protocol). Hence, when you run the JavaScript charts from local file system and you are using Data URL method (setXMLUrl, setJSONUrl, setDataURL or similar functions) to provide data to charts where physical xml or json files are involved, this error occurs.

 

To over-come this situation you would need to render the JavaScript charts using Data String method.

 

For more details, please read: http://docs.fusionch...singPureJS.html

 

Hope this helps.

[jasonfill]

I have a bit more information to provide here.

 

A snippet of the code I am using is below. But I put all the callback-events in place to see where the process was stopping. When I run my script the only thing that gets logged is "+++ DataUpdated", which means that the Data updated function is the only thing being called, so whatever happens after that appears to not be working. Could this be due to the HC files not loading properly? What is happening under the hood that might be preventing this process from proceeding on?

 

           var $container	= $('<div id="container">Chart Loads Here</div>');
           var FusionCharts = window.FusionCharts;


           $container.appendTo(document.body);


           //FusionCharts.debugMode.enabled( function() { console.log(arguments); } , 'verbose');

           FusionCharts.setCurrentRenderer('javascript');            

           /* Rendering Process */            

    		FusionCharts.addEventListener("Initialize", function() { 
               console.log(' Initialize');
           });


    		FusionCharts.addEventListener("DataLoadRequested", function() { 
               console.log('+ DataLoadRequested');
           });

        	FusionCharts.addEventListener("DataLoadRequestComplete", function() { 
               console.log('++ DataLoadRequestComplete');
           });

           FusionCharts.addEventListener("DataUpdated", function() { 
               console.log('+++ DataUpDated');
           });

           FusionCharts.addEventListener("Loaded", function() { 
               console.log('++++++ Loaded');
           });         	

           FusionCharts.addEventListener("DataLoaded", function() { 
               console.log('+++++++++ DataLoaded');
           });            

           FusionCharts.addEventListener("Rendered", function() { 
               console.log('++++++++++++ Rendered');
           });            

           FusionCharts.addEventListener("DrawComplete", function() { 
               console.log('+++++++++++++++ DrawComplete');
           });            

           /* Error Process */

           FusionCharts.addEventListener("DataLoadRequestCancelled", function() { 
               console.log('--- DataLoadRequestCancelled');
           });            

           FusionCharts.addEventListener("DataLoadCancelled", function() { 
               console.log('------ DataLoadCancelled');
           });            

           FusionCharts.addEventListener("NoDataToDisplay", function() { 
               console.log('--------- NoDataToDisplay');
           });            

           FusionCharts.addEventListener("DataLoadError", function() { 
               console.log('------------ DataLoadError');
           });            

           FusionCharts.addEventListener("DataXMLInvalid", function() { 
               console.log('--------------- DataXMLInvalid');
           });

           var myChart = new FusionCharts( 'http://jason/FusionCharts_Evaluation/Charts/Column3D.swf', "myChartId", "400", "300", "0", "1" );

           myChart.setXMLData('<chart caption="Sales Summary" animation="0" subCaption="For the year 2010" numberPrefix="{:content:}quot; sformatNumberScale="1" sNumberPrefix="{:content:}quot; syncAxisLimits="1" rotateValues="1" showSum="0"><set label="Quarter 1" value="232400"/><set label="Quarter 2" value="339800"/><set label="Quarter 3" value="411900"/><set label="Quarter 4" value="398400"/><categories><category label="Quarter 1"/><category label="Quarter 2"/><category label="Quarter 3"/><category label="Quarter 4"/></categories><dataset seriesName="Products"><set value="232400"/><set value="232400"/><set value="339800"/><set value="411900"/><set value="398400"/><dataset seriesName="Product A"><set value="232400"/><set value="232400"/><set value="339800"/><set value="411900"/><set value="398400"/></dataset><dataset seriesName="Product B"><set value="232400"/><set value="232400"/><set value="339800"/><set value="411900"/><set value="398400"/></dataset></dataset><dataset seriesName="Services" renderAs="line" parentYAxis="S" showValues="1" valuePosition="BELOW"><set value="147400"/><set value="189100"/><set value="219800"/><set value="289100"/><set value="209800"/><dataset seriesName="All Services" renderAs="line" parentYAxis="S"><set value="214400"/><set value="214100"/><set value="284800"/><set value="323100"/><set value="324800"/></dataset></dataset><lineset seriesName="Target Profitability" valuePosition="BELOW"><set value="104400"/><set value="104100"/><set value="144800"/><set value="213100"/><set value="214800"/></lineset></chart>');


           myChart.render("container");

[rouven]

I have exactly the same problem here. Have you found any solution?

 

THX

[jasonfill]

Rouven,

 

I was unable to get this working with node. It really does not make sense that none of the error functions were even being called. We spent several hours of time trying to get this to work and then abandoned the idea and decided to use wkhtmltoimage which is working ok to convert the charts to images & PDFs. We are actually using wkhtmltopdf to embed the charts and such into pdfs and it is working very well and actually faster than converting the charts to images and then generating the pdfs.

 

Hope that helps.

[Guest Sumedh]