Export of chart with timeline adds extra gab and dates at wrong place

ActiveTickets

created 2 years ago (modified 2 years ago)

When show a graph with a horizontal time line in the web dashboard every thing looks fine. When you export the chart there is an extra gab added at the beginning and the end of the chart. Due tot to this extra gab the first date-time which is shown is often not the real first date time in the data. This is very confusing and the chart becomes unreadable when a barchart is used.

Steps to reproduce:

Open the dashboard demo. The dashboard is filtered to display only janurary. This is the link:

Web Dashboard - ASP.NET MVC Dashboard Demo | DevExpress

This looks fine.

Now export the graph. And it will look like this:

Notice the extra gab en the wrong placed first date.

The exported graph will look even more strange when you change it to a stacked bar chart.

After you changed it to a stacked bar chart it will look like this in the dashboard

When you export it it looks like this:

Now the x axis of the chart has become completely unreadable. (The user can not see that the first bar is on 1/6 and the last bar is at 1/27)

What I would expect is that the x axis and the bars are displayed the same way as it is shown in the web dashboard.

Thanks in advantage,

Tijmen

Clipboard-File-1.png Clipboard-File-2.png Clipboard-File-3.png Clipboard-File-4.png

Answers approved by DevExpress Support

Yaroslav (DevExpress Support)

created 2 years ago

Hi Tijmen,

What I would expect is that the x axis and the bars are displayed the same way as it is shown in the web dashboard.

The Dashboard export process runs on the server, not on the client. Many dashboard items are responsive. So, they look different on screens with different resolution and scaling.

Moreover, inside a browser, customization capabilities with HTML/CSS/JS are almost endless. This is why it is impossible to guarantee the exact match between what you see in the browser and what's rendered on the server. In other words, it's not a print screen of your browser tab (if you need it, you can save the page as PDF).

Thus, you can customize certain behavior if it doesn't meet your requirements.

On the client, the Dashboard's Chart item uses the DevExtreme-based dxChart widget to render content. You can use the corresponding DevExtreme API to customize the widget's rendering/behavior:

JavaScript
function onItemWidgetOptionsPrepared(args) {
  if (args.dashboardItem instanceof DevExpress.Dashboard.Model.ChartItem) {
      args.options....
  }
}

On the server, customize the exported document by handling the CustomExport event (see: Custom Export). During export, the chart item is represented by the XRChart reporting component.

Both components are available as standalone products, and they offer a very extensive set of available configuration properties. In the help topics I mentioned in the previous passage, you can see these available properties.

I hope this clarifies the situation. If you have further questions or require any assistance with the dashboard customization, feel free to update this ticket. I'll be happy to follow up.

Regards,
Yaroslav

Comments (1)

ActiveTickets 2 years ago

Thank you for your answer. I can imagine that customized javascript charts do not can not always be correctly exported correctly. However this is a standard chart it is even it is included in the demo as show case. As end user I would expected that the standard features which are not customized work correctly out of the box. And this is not the case.

I will try to fix it the way you have described because I think that the quickest route to fix this. But I hope that you can communicate the above argument to the developers.

Tijmen

Export of chart with timeline adds extra gab and dates at wrong place

Answers approved by DevExpress Support

Recently viewed tickets