We added the ability to round border corners for dashboard elements in release 2022.1. In version 2022.2, we have taken a step forward and made it possible to round graphical elements of charts both in dashboards and reports. The principle remains the same - using special properties, you can specify the rounding radius of four corners of a chart graphical element. It allows a thin styling of a chart within your dashboards and reports.

In this article, let’s look closer at rounding in charts.

For which chart rounding is applicable?

Before we start telling you about rounding in reports and dashboards, let’s figure out what types of charts can be rounded.

You may apply rounding to all types of charts in which column graphical elements are used, namely:

  • column;
  • line;
  • clustered column;
  • Pareto charts;
  • Gantt chart;
  • waterfall;
  • range bar;
  • hierarchical chart of the Treemap type.

This applies both to reports and dashboards. Now let's go directly to the issue of how you may implement rounding in your documents and analytical panels.

Rounding in report charts

A chart in a report may have several series. Rounding can be defined in style settings, which are applied to the chart or in the settings of each row. In the style and settings of a row, rounding is defined using the Corner Radius properties group. Please note that if you can’t see rounding settings in the list of properties, you should set the Allow Apply Style property to False. Otherwise, rounding settings will be applied from a chart style for all series.



Rounding in charts in a dashboard

Graphical elements in a chart in a dashboard are rounded only via the settings of an element style. Accordingly, rounding radiuses defined in a style will be applied to all graphical elements of a chart, regardless of their belonging to its series.

Once again, here's the main point:

  • You can round graphical elements both in report and dashboard charts;
  • This feature is available not for all chart types;
  • The rounding of a graphical element is defined using the Corner radius group in a chart style or the properties of a particular row. The last one is relevant only for charts in reports.
Here’s a video about setting rounding of charts which is already available on our YouTube channel.

This way, you can make more fine-tuning of a chart design in your dashboards. If you have any questions, please contact us.
Last time we told you about data connection in the report designer. This time you will know about the Table element and how to create a dashboard with it. But first of all, let’s figure out what the dashboard is and what it is intended for.
The dashboard is an informational panel for visualization and data analytics, usually presented in the form of key performance indicators. The most famous example of a dashboard is car gauges that help you track driving speed, engine temperature, stock and gasoline consumption, and much more. People of various professions use dashboards. For example, Internet marketing specialists use dashboards to track the effectiveness of advertising campaigns, and managers use them to control the workload and plan staff work. This tool is widely used in education, healthcare, finance, and industry.

For example, this dashboard shows key performance indicators of hospital performance. Using it, a manager of a medical institution can track the length of patient stay, average treatment costs, hospital-acquired infections, etc. Stimulsoft report designer contains a range of elements for creating dashboards, and today we will introduce you to one of them.

Table

The table is an interactive data analysis that allows you to display data in the dashboard in columns and rows. You can filter data, sort them, replace values and calculate running totals in it. Data fields and values in the table are customized in the table’s editor.

Table editor

You can customize a selected data field in the table editor: duplicate it, rename or remove it. In addition, you can remove all data fields.

Besides, you can specify various types of values for a selected data field in the table editor and enable or disable the display of selected columns.

Dashboard element Table

The Table editor has other features. For example, when editing data fields in the table you can:

  • show value total;
  • select the function that will be used to calculate the total for the current data field;
  • show hyperlink for values of the current field.


It’s worth noting that the order of fields in the editor from top to bottom displays the sequence of their output in the table element. To change the order of fields output in the table, you should drag a field to the place you want to. At the same time, you can group data in the table.

Grouping data in the table

Let’s imagine, your table contains three data fields: Car model, Producer country, and Number of sales per year. You want to group your data by Producer country field. To do this, you should switch element type from Dimension to Measure for Number of sales per year field. After that, you will get the result you want.

Dashboard element Table

At the same time, you can sort and filter data fields in the table using the header menu.

Header menu

When adding data fields to the table, a header is automatically created for each of them. All headers contain a drop-down menu, in which you will find the settings using which you can sort and filter values of table columns.

Also, you can change the table itself, for example, its size and size of columns in it.
Dashboard element Table

Table size

You should select the element and manually stretch it in width and height to change table size. By default, the Size Mode property is set to the Autosize value, which sets the minimum column width. However, if you set the Fit value, the width of columns will be changed.

In addition to all the listed features of the table, you can also add images to it.

Image in the Table

You can add images to the table both from your data sources and the data obtained by URL. To do this, you should add a data field to the list of the table fields. Important to know!

If a data field contains links to images, they will be displayed in the table as text. To display images in the table, you should select a data field with URL images in the element editor, then apply the Image() function to the expression of this field. It will look like this: Image(DataSource.DataColumn1). However, if your URLs redirect to the images of SVG type, you will need to specify the height and width of the image in the function arguments - Image(DataSource.DataColumn, height, width).
You can read about how to create a dashboard with a table in our documentation.
Next time you will know about the features of the Chart element. If you have any questions regarding the table or creating a dashboard with it, feel free to contact us. We will be glad to help you.
Today, we’re going to tell you about a new chart type – Pictorial Stacked Chart. Before we consider its creation, let’s figure out the concept.

What is a Pictorial Stacked Chart?

It’s called pictographic because it uses pictograms provided in an icon set instead of a graphic element. Stimulsoft reporting tools contain a considerable range of pictograms: from abstract icons to well-known logos. The «stacked» term means that values are analyzed within one graphical element, in this case – a pictogram or an icon. This pictogram is the sum of all values and equals 100 percent in a relative value. All chart values are grouped by their arguments, and each argument is a relative value share in the common sum of all chart values. In other words, the Pictorial Stacked Chart is an analytical chart type that allows you to display a relative value share as a part of a graphical element of a diagram. This chart type is used in reports and dashboards.

Besides, we have made a video about using the pictorial stacked chart in reports and dashboards.



Adding to a report

This chart type is added to a report and any other type. You should select the Pictorial Stacked Chart type from the Pictorial category on the Insert tab or the Toolbox in the report designer. After that, you should place the component in your report. Next, you should specify data columns of values and arguments. You can change a pictogram using the Icon property. Please note that you can add several rows to the chart. However, the icon from the first row will be used for all chart rows.

Adding to a dashboard

To use pictorial stacked charts in dashboards, you should place the Chart element in a dashboard. After, you should specify data columns for values and argument fields, and set the chart type as Pictorial Stacked. The main difference is that an icon for a chart is selected in the element editor, not in the properties panel. Also, this icon will be used for all chart rows.

In general, the process of creating this chart in reports or dashboards is similar to creating charts of other types. You should understand only the algorithm of data analysis and display the result in the chart.

Take a look at some samples of using the pictorial stacked chart in a report and dashboard.


You can find more report and dashboard samples with the pictorial stacked chart in our online storage, having requested «pictorial» in the search field. The Pictorial Stacked Chart is an excellent visualization and data analysis tool, which you can use in your reports and dashboards. If you have any questions, feel free to contact us.
We continue to tell you about new features of Stimulsoft products 2022.2, and today you will learn about the most famous browser Internet Explorer and how our reporting tool works in it.

A bit of history

First of all, let us remind you that Internet Explorer history, or simply IE, dates back to 1995 when it was first presented as an additional Plus! package for Windows 95. Later versions were available as free downloads and were used by many people to access websites on the World Wide Web. Over time, Internet Explorer was integrated as a part of the operating system package, and it was being developed till 2016. The last version was Internet Explorer 11 in the Windows 10 operating system. After, it was replaced by a more modern Microsoft Edge web browser.

The future of Internet Explorer 11

IE11 was supported in Microsoft Teams until the end of November 2020 and Microsoft 365 until mid-August 2021. The end of support for Windows 10 editions that are outside of the Long Term Servicing Channel (LTSC) is scheduled for June 15, 2022. However, Internet Explorer became a component of the operating system long ago. For some corporate versions, for example, Windows Server 2019, the security system updates will be released until at least 2029. You should know that now there are a huge number of devices that use this browser as the only solution. Moreover, Internet Explorer 11 is used by many applications that are impossible or impractical to upgrade.

Windows 11 and IE11

Internet Explorer is not supported as a separate application in the new operating system, Windows 11. However, at least until 2029, Microsoft promises support for IE in Edge. This way, Windows users will be able to work with the once most popular browser in the world for a long time.

Internet Explorer 11 and Stimulsoft products

Now, we are coming to the central part of our article. Stimulsoft company releases various products, including reporting tools, which work in the browser. They include Reports.JS and Dashboards.JS. These reporting and data analytics tools are created in pure JavaScript. The products are not connected to an operating system and can work on any system that supports JavaScript in the browser.

In the 2022.2 release, we have added an ability to compile scripts of a product to ECMAScript 5 (ES5), which works in Internet Explorer 11. You can run the ES5 script builder that is included in the licensed product package with a source code.
You can acquire a product license with a source code here:

What next?

Script compilation instructions for ES5:
  • Download source codes of the product you need, Reports.JS or Dashboards.JS. You can do it in a user's account;
  • Extract the archive and go to the following path: ...\ts\;
  • Invoke the command line in this repository;
  • Run the npm install command to install missing dependencies;
  • Compile scripts for ES5, having run the npm run build_js-es5.

The compiled scripts will be located in the path ...\ts\build\es5\. Next, you can use them in your projects and applications by generating reports and creating dashboards. This way, you can get updates and have a modern, fully functional reporting tool that is fully compatible with Internet Explorer 11.
To show you visually the process of scripts compilation for ES5 in Stimulsoft products, we have made a tutorial video:

If you have any questions about compatibility with Internet Explorer 11, contact us, we are always glad to assist you.
Today’s article will tell you about a new dashboard element, which has been available in Stimulsoft products since the 2022.2 release – Cards. This element allows you to display grouped data as cards. You can display values from data columns in each card, including images, and apply graphical analysis to these values. But, first things first. Firstly, you should understand how cards are formed in the element.

Creating cards

When a new data column is added to the Cards element, its card is created for each unique value from this column. When adding other data columns, their values will be compared with the values from the first data column and added to the corresponding cards. This way, data is grouped from a source and displayed on a particular card. Please, note!

If data columns from various data sources, between which there is no connection and data, and they can be compared with, will be added to the element, cards will be formed both for unique values of the first data column and the second one. If there is a connection between the sources, the values from a column of another data source will be compared with and added to the cards formed by the values of the first data column.
Generally, the number of cards depends on the number of unique values in the data which is defined for the element.

Graphical analysis in cards

Data column type is defined automatically as Measure and Dimension when adding. The analysis function is always applied to the columns of the Measure type but not to Dimension. You can change the data field type at any time. In this case, the same principle as for data fields in the Table element works out. Apart from displaying this in the cards, you can apply various types of graphical analysis to them, for example, Data Bars, Color Scale, Indicator, Bubble. These analysis types allow you to display the relative proportion of a value by various graphical means from the sum of all data column values. In addition, you can create Sparklines according to the values of a data column in a card. It’s a little Clustered Bar or Range Bar. You can enable or disable graphical analysis in the element editor by switching a type for each data field.

Data output order

The values from the data columns in the card are displayed consistently. The data columns placement defines this order in the element editor. First, the card shows the value from the topmost data column in the editor, then from the one below, and so on. Thus, to change the data output order in the card, you should change the data columns order in the element editor. By the way, each value from a data column in a card will be displayed in a new row. However, if you need, you may output values in one row. To do this, you should set the Wrap Line property to False for the data column, after which the values should not be wrapped.


The cards are output in the element consistently. Depending on the element size, its height, and width, the number of cards that can be displayed will be calculated automatically. Filling an element with cards by default starts from left to right, after which it moves to the next line in the component. The cards can be output from top to bottom and then in the next column on the right. This behavior is determined by the value of the Orientation property of the element. Lifehack

Suppose you need to output cards strictly in three columns in a horizontal orientation or, for example, three rows in a vertical direction after in our report and dashboard generator. In that case, you can force the number of columns in the element in the Column Count property. In this case, you should understand that the size of the cards themselves will be calculated in such a way as to fit the required number in a column or line.

Cards design

The element and cards are designed using properties or via the Style. When writing the article, the style provides you access to some element design settings, for example, Back Color, Fore Color, Line Color, and a set of colors for the Color Each mode. All other settings are available in the properties. And in this case, you should clearly distinguish between the settings of the Cards element and the settings of the cards in this element. The fact is that some properties may be repeated in name but be different in purpose. For example, you can define a corner radius for both the element and the cards in that element. All element design settings are placed in the Properties panel, and all card design settings are placed in the Properties panel in a separate group - Cards.


Separately, we would like to remind you about the Color Each mode. In this mode, a card gets its own back color from a certain color collection in the element style or the Series Colors property. The mode is enabled or disabled depending on the value of the Color Each property from the Cards group.
Also, we have prepared a video with a description of work a new functionality for you. Watch this and other video tutorials on our YouTube channel.

This way, the cards as dashboard elements have great data visualization and analysis features. We hope that the article was helpful to you.
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.