Javascript Chart Export pdf

Jens Moddelmog shared this problem 10 months ago
Resolved

Hi there,

I have two questions:

1. export javascript charts to pdf seems now possible in Versjon 9.4. I tried this with a simple Chart from the "Highchart library". As you can see in the screenshot, in Webview everything works fine, but not the export. In pdf, the chart appears extremly shrinked. What is the problem. Maybe your pdf engine loose / cannot find the width/height of the chart or...????


2. Is there a way to listen, if a user klicks the pdf export button and to listen, if the pdf is finished?


Greetings

Jens

Comments (3)

photo
1

Hi Jens,

Do you notice a difference when trying to export the chart as a PDF in the report level vs on the dashboard?

Although I don't know of a way to listen to see when the PDF is finished, I do have a file for you which can be imported and contains some code for Javascript Charts. It delays their execution so it has some additional time to render. If you create a chart with this additional code it might help your issue.

Let me know how it goes.

Kind regards,

Chris

photo
1

HI Chris,

no, i do not notice a difference btween dashboard and report. In both cases the same problem. I will check out your file. I cannot import it yet, because I get en error, that no connection to the database is possible. We do have installed the ski team example on the server.

Is ist possible, that you send me the plain js part ?

Merci

photo
1

Hi Jens,

There's two reports with JSCharts in the export file. Here's the code itself:

//generateChart is a required function which will be called to generate your Javascript chart
generateChart = function(options) {
   
   let timeoutTime = 5000;
   let block = true;
   
   if(block) {
       //When exporting to PDF Yellowfin has no way of knowing when a chart has finished rendering, as it 
       //may render asynchronously - using blockRenderComplete() will tell Yellowfin to wait for the renderComplete()
       //function call. 
       options.blockRenderComplete();
   }
   
   
   var $chartDrawDiv = $(options.divSelector);
    
    setTimeout(() => {
       $chartDrawDiv.text("Hello World");
       if(block) {
           //Once the chart has finished rendering, call the renderComplete function.
           options.renderComplete();
       }
    }, timeoutTime);
};
//generateChart is a required function which will be called to generate your Javascript chart
generateChart = function(options) {

   // This will trigger a breakpoint in your browser debugger so you can debug your javascript
   debugger;

   // This is the div you draw your chart into
   var $chartDrawDiv = $(options.divSelector);

   // To stop scrollbars in any portlets regardless of your javascript, use this css class
   $chartDrawDiv.addClass('jsChartNoOverflow');

   // This gets the height and width from the dataset. Use these when creating your chart so that
   // it will fit the dashboard, canvas and storyboard correctly
   var height = options.dataset.chart_information.height;
   var width = options.dataset.chart_information.width;

   // Convert the raw data JSON to the format required for the chart if required.
   var processedData = processData(options.dataset.data);

   // Do the actual drawing of the chart into $chartDiv.
   doDrawing(processedData, $chartDrawDiv, height, width, options.errorCallback);
},

processData = function(dataset) {

   // Data is in the dataset in a column based format, where each column has an array of data
   // eg. dataset.column_name[0].raw_data, dataset.column_name[0].formatted_data

},

doDrawing = function(data, $chartDiv, height, width, errorFunction) {

   // Use require to load the javascript libraries you need

   // Libraries we ship with and their location:
   // js/chartingLibraries/c3/c3
   // js/chartingLibraries/chartjs/Chart
   // js/chartingLibraries/d3_3.5.17/d3_3.5.17
   require(['js/chartingLibraries/d3/d3'], function(d3) {

       try {

           // Your chart draw code here

       } catch(err){
           errorFunction(err);
       }
   });
}
With regards to the import, it should work if you select custom import, then import everything but the datasource and then match the content to your existing source.

Kind regards,

Chris