When .Net hits BI visualization, you must know these 3 "routines"

Grape is doing technical support recently, and we encountered new problems from customers.

Here's the thing.
This time, the client is using a .Net project, and it is too complicated to do BI big screen directly, so I want to directly integrate and use BI data visualization analysis big screen.

Therefore, this time, we will start from Wyn and introduce how to integrate the big screen of BI dashboard data visualization in the .Net environment.

Speaking of which, some students have no concept of the big screen of BI dashboard data visualization, so let's introduce it to you first.

BI dashboard data visualization large screen

No matter what project you are working on now, you will encounter many requests from Party A that you need a cool and beautiful data board for data visualization and self-service data analysis.

This kanban is the big screen of BI dashboard data visualization.

How important is this board?

The internal information sharing of enterprises, external industry exchanges, and on-site exhibitions at conferences are suitable for all occasions you can think of. At the same time, the demand for kanban has become normalized. For Party A's customers, the necessary function of the project requirements is to support "visualization big". Screen". Therefore, BI visualization dashboard design appears in every information project we do now and in the future.

Here we simply stratify the effects and functions of the large screen:

The first layer: stacking of simple visualization means, such as using Echarts.js or other chart libraries, to display static data in a visual style to form a static adaptive data visualization "report";

The second layer: realize real-time update of data, associate with real business data, and use visual charts to display business data in real time instead of static data;

The third layer: realize the self-service analysis of data, including data modeling, data processing, visual display and self-service data analysis operations, which is the real business intelligence data analysis.

Therefore, to realize the BI large screen, the overall development workload is mainly determined according to our actual needs. This time, we will use Wyn Enterprise as an example to demonstrate how to implement BI visualization application integration in .Net Core projects. Finally, the screen adaptation, multi-page dashboard, automatic data refresh, 3D animation special effects and other effects of the project can be realized. These effects can be directly applied to scenarios such as smart parks, smart workshops, health care, power and energy, campus security, and digital command centers. .

Introduction to BI Integration in .Net Core Projects

There are three main ways to integrate BI in .Net Core projects. The following will introduce these different integration methods through specific examples.

Div integration

Div integration is mostly used when you want to natively integrate dashboards, reports, data sources, and datasets in your business system. The core of this integration method is to obtain the DIV element of the document and the corresponding value, and then write it into its own web page code.

Note

Before DIV integration, the Wyn system needs to be cross-domain configured to allow cross-domain requests. E.g:

Example code

The following is the integrated sample code:

The corresponding numbers in the figure are explained below:

(1) The actual domain name address of the specific deployment system;

(2) The version number of the Dashboard plugin in the system;

(3) User Token, please ensure that the Token used has sufficient permissions (for example, to view the dashboard, such as the integration designer, you need to create a dashboard).

(4) The ID of the dashboard for integrating a single dashboard document. If an empty designer is integrated, it is not required, just delete this line.

(5) Reference code for the integrated designer.

(6) Reference code for integrating a single dashboard document.

URL integration

The most used integration method in .Net Core projects is URL integration. The core of this integration method is to set a website address (URL) with parameters (QueryString) as the target address of a menu link in the business system, or as the target address of a menu link in the business system. The value of the src attribute of an iframe element in the business system page.

The core of URL integration is to generate the full URL of the integrated report or dashboard.

Take the dashboard as an example:

(1) Open the dashboard in a new window

Select the dashboard, click the new window button in the upper right corner of the page to open the dashboard in a new browser window.

(2) Copy the URL of the browser address bar

Copy and paste the URL address of the dashboard into Notepad for later use.

(3) Obtain an access token

Enter the system background management\>generate token.

Enter the token information, click the "Generate Token" button to generate the token string of the username; click the Get Token button on the right to copy the token.

Note here

The username used when generating the token, should have view permissions for the report or dashboard to be accessed.

For example, create a user named guest specifically for the project, create a role named "integrated user", and add the guest user to this role. Then set the permissions of the report or dashboard to be integrated, allowing "Integrated User" [read-only].

(4) Paste the token just copied to the end of the URL in step (3), and use &token= to connect, the resulting URL string is as follows:

http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN &token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed

(5) Use URL string with token

Set the URL string as the src attribute of an iframe or the href attribute of a hyperlink in the business system page file.

E.g:

\<iframe src="[http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN](http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN)&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%;width:90%;border:none;background:grey;" /\>

The effect is as follows:

If you want to open the dashboard content in a new browser window, just set a hyperlink with the href set to the above URL.

E.g:

<iframe src="http://localhost:51980/dashboards/view/5d5cafe6e98abc00018ff4e5?theme=default&lng=zh-CN&token=0b77ebfe232bff06248ce245c24af6aa84010b5f747ef41e605b08ae310a6fed" style="height:90%;width:90%;border:none;background:grey;" />

API integration

This method requires the BI system to support the GraphQL API, so that almost all interface operations can be completed by calling the API. For example, when the document list under a certain category is expanded on the portal page, the actual GraphQL can be seen through the browser debugging pane. API calls.

to

For a detailed explanation of all API calls, please refer to:

https://wyn.grapecity.com.cn/WynApiDemo/

API call example, as shown below:

Unlike REST APIs, GraphQL APIs do not require different URLs for different object operations. Different operations of different objects are called through a unified URL ( http://localhost:51980/api/graphql ); the difference is that the submitted data is different.

The format and content of the submitted data can be viewed through the browser debugging function to view the network interaction (Network) in the interface operation, and then view the specific request header information (Headers).

The content returned by the API can be obtained by viewing the Response section in Network Interaction.

Open the http://localhost:51980/graphiql webpage in the browser (note that there is a letter i between graph and ql at the end of the URL), you can debug the API at any time, as shown below:

Next, let's demonstrate how to implement data visualization in an ASP.NET Core MVC project.

ASP.Net Core MVC project integrates BI data visualization

After installing Wyn, use localhost:51980 to enter the portal administration website.

The dashboards, designers, management centers, and data processing modules used in the entire data visualization are all on the online B/S side, and we can install them directly.

Open Visual Studio to create a new ASP.NET MVC project or add a new view or HTML file to an existing project

other

Above we introduced the integration method in ASP .Net Core MVC project and .Net Core project, but if you want to better solve the problem in the actual project, you also need some more advanced integration functions.

Rights Management in Integration

Because the BI dashboard involves the core business data information of the enterprise, user rights are a key function. Therefore, different solutions are required for user rights management. We take the most familiar security token as an example:

When using fixed token integration, it is equivalent to viewing report content as a fixed user.

If you want different users of the business system to see different report contents according to different data permissions, they need to log in as the current user of the business system, obtain different tokens, and then view the contents of the document.

When the current login user of the business system is passed to the BI system, and the process of logging in as the user is the user identity integration.

There are two ways to integrate user identity: (1) use URL parameters to pass user information; (2) single sign-on integration. The former is easier, the latter is more secure.

QueryString

Using the QueryString method of the URL to directly pass user information is also a common function we may use.

Methods as below:

(1) Define a hidden parameter when designing a report. For example: the parameter name is oauser. The purpose of setting the parameter to hide is to prevent users from viewing the report content by manually entering the username of another user.

(2) Add the user identity parameter to the URL of the integrated report content.

Example:

&dp={"oauser":["ZhangSan"]}。

Like other parameters, the content of this parameter needs to be URL encoded, and the result is as follows:

%dp=%7b%22oauser%22%3a%5b%22ZhangSan%22%5d%7d

Notice:

(1) The parameter name (oauser) here must be exactly the same as the parameter name defined during report design, and is case-sensitive.

(2) This method still uses a fixed token for integration, that is, in the URL for integration, the value of the token parameter of QueryString is still a fixed string.

Single sign-on integration

If the business system has higher security requirements, you can use the login API on the business system login screen to implement single sign-on integration, and put the obtained token in the session variable.

When the integrated reporting function is required, the token is extracted from the session variable and concatenated in the integrated URL. In this way, each user of the business system is a different token.

The user login information retrieved from the login screen of the business system is the business system user name and password entered by the user. Usually, the user account of the business system is used to call the login API of the BI system, which requires an account with the same user name and password in Wyn.

To avoid creating multiple sets of account passwords for each user, we can also write custom security providers.

By writing a custom security provider, users of the business system can log in directly with the account of the business system to view the data content within their authority when viewing the report content.

Write at the end:

Whether it is .Net Core or .NET 5 or 6, the project as a whole is supported by powerful server-side resources, which is suitable for the development of large concurrent and high-performance business systems. If the BI visualization large-screen function is realized, the existing tools on the market It is also very complete. When we consider adding this [facade] function to the project, we might as well consider using ready-made tools to concentrate development resources on the core business, so as to achieve efficient cross-platform project delivery.