Javascript Chart Export pdf

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

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

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);
       }
   });
}

Kind regards,

Chris