Send Report API functionality doesn't work with external graphics

Bug Report
1

Hello good morning, I am contacting you to report a problem when sending screenshots of a dashboard using Chart.js.

My dashboard, as you can see below, is made up of three test charts contained in three Custom HTML blocks where the corresponding code goes. The first of them, formed by a red line, as soon as it has finished loading, it becomes a static image. The other two have the Chart.js functionalities (the mouse is placed on a point and loads the data dynamically).

image
image1444Ă—856 58.8 KB

As I said in a previous post, I make a query to the losant API using “Send Report”.

Dashboard Actions | Losant Documentation

The problem is that, when I execute this action, the PDF that arrives to my email with the Dashboard capture looks like this:

image
image1465Ă—927 22.5 KB

The blocks where the graphs should be placed are empty. It seems that what the Send Report action does is an instant dashboard capture without waiting for the javascript of my HTML blocks to be executed, preventing the loading of the charts in Chart.js.

For this particular project it is not essential to use charts in Chart.js, but it is essential to show the specific data of each point in a chart. My problem is that the charts offered by Losant are not configurable, they don’t allow to modify aspects like the one I’m talking about, to show each data in each point, so using them is not an option either.

I would like firstly to report this problem, and secondly to see if there is any option to correct it, otherwise I will have to look for a workaround to be able to take screenshots of a dashboard.

Greetings.

2

We’ve tested the report generation with other third-party libraries, such as Google Charts and Vega, and found that the charts did generate correctly. I do not know if we’ve tried Chart.js; I will look into this further and get back to you. There may be an option that must be passed in to the Chart.js instantiator to enable print-friendly generation.

3

This took some messing around with Chart.js but I got to the bottom of the issue. There are two things you need to do …

  1. Disable animations in your chart
  2. Call the chart’s resize() method with the block’s width and height prior to printing

Below is a simple example illustrating how you can do both. Note that we are storing blockWidth and blockHeight as global variables, setting their values off of the DashboardBlock.resize event. We are also calling the chart’s resize and manually setting the width and height from those values in the beforeprint event.

Custom Head Content:

<meta charset="UTF-8">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  body {
    margin: 0; padding: 0;
  }
</style>
<script>
  const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};

const config = {
  type: 'line',
  data,
  options: {
    animation: false
  }
};

let myChart;
let blockWidth, blockHeight;

document.addEventListener('DOMContentLoaded', () => {
  myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
  myChart.resize(blockWidth, blockHeight);
});

DashboardBlock.on('resize', ({ size: { width, height } }) => {
  blockWidth = width;
  blockHeight = height;
});

window.addEventListener('beforeprint', () => {
  myChart && myChart.resize(blockWidth, blockHeight);
});
</script>

Custom Body Content:

<div>
  <canvas id="myChart"></canvas>
</div>
1 Like
4

Hi Dylan, thank you very much for your quick response. Thanks also for investigating if there was a solution, as I thought the problem would be in Losant and not in the code related to Chart.js.

I will soon try to do what you said in your post.

Best regards.