Example 1:Large Screen Template Example

Application scenario: When you need to extract useful data from a large amount of data, and you need to understand these data clearly and make accurate judgments at a glance, you can do it through the large visualization screen.

Function introduction: Arrange the information that needs to be used according to certain logic and display it on the same interface to help users further analyze the relationship between various data.

As shown below:

1. Plugin installation

For details on the installation steps of the designer, please refer to The designer plugin management

For detailed server installation steps, please refer to Server Plugin Management

2. Material preparation

Determine the requirements, prepare database tables, background images, and border elements

Please click to download the materials required for this document template:

Materia Preparation.rar

Note: The data table in the file needs to use third-party software to import the built-in FRDemo database.

3. Layout

According to actual needs, determine the main information and corresponding display form of the large screen, as well as other required secondary information and display forms.

1) For common typesetting layout, please refer to How to make a large screen template (example).

2) This document uses the map component and the other six components to make a logical connection and a layout, as shown in the following figure:

1. Template making

Create a new dashboard. For detailed steps, please refer to The example of getting started with decision reports.

1)New Dataset

The new template data set is as follows:

ds1: SELECT pid,Sales_volume,${INT(RAND()*100000)}+Sales_volume AS New_Sales_Volume FROM Map WHERE pid IS NOT NULL AND pid NOT IN('Tianjin City') ORDER BY RANDOM() LIMIT 5

ds2: SELECT * FROM map

ds3: SELECT * FROM comparison_of_new_and_old_users

ds4: SELECT * FROM premium_region_ranking

ds5: SELECT * FROM form_linkage_column_chart

ds6: SELECT * FROM regional_premium_composition

ds7: SELECT * FROM annual_cumulative_total_premium

ds8: SELECT * FROM Hot_Product

ds9: SELECT * FROM sales_data_map

ds10: SELECT * FROM growth_line

ds11: SELECT * FROM latest_transaction_data

2)Drag and drop of components

• In order to facilitate the data setting, when dragging and dropping the components, the component, the corresponding title component, the dataset and the component form can be matched, as shown in the following table:

• According to the layout, drag and drop all the components to the corresponding positions in the order of the above table, as shown in the following figure:

• Component settings

Please refer to [New] Chart for chart design, and cell style for Report block design. Take chart0 as an example:

• Drag in the Map chart, click Edit, and set the type, data, style, and special effects, as shown in the figure below:

Note: Due to the selected combination map, do not miss it when setting it. For detailed settings, please refer to Combination Map

special case:

• Interval background design

1) Click to edit report0

Enter the formula in cell A2: RANDBETWEEN(123451111, 123459999)

Enter the formula in cell C2: SPLIT(A2, "")

2) Set cell C2 to expand to horizontal expansion with a blue background

D2 is designed as a space, and the left parent cell is C2. For details, please refer to the large screen FAQ.

• report6 report block to achieve marquee effect

1) Click report6, click Edit, and freeze the first row, as shown in the figure below:

2) Click report6, select Event>Add Event>After Initialization1, enter the code, as shown in the figure below:

Code show as below:

setTimeout(function(){  
    $("div[widgetname=REPORT6]").find("#frozen-north")[0].style.overflow="hidden";  
    $("div[widgetname=REPORT6]").find("#frozen-center")[0].style.overflow="hidden";  
    },100);   
window.flag=true;  
setTimeout(function(){     
$("#frozen-center").mouseover(function()    
{    
  window.flag=false;    
  })    
$("#frozen-center").mouseleave(function()    
{    
  window.flag=true;    
  })    
var old=-1;     
var interval=setInterval(function()    
{  
if(window.flag){  
   currentpos=$("#frozen-center")[0].scrollTop;    
   if (currentpos==old){  
    $("#frozen-center")[0].scrollTop=0;  
     }    
   else {    
      old=currentpos;    
      $("#frozen-center")[0].scrollTop=currentpos+1.5;    
        }    
      }  
    },100);  
},1000) 

Note: For detailed design, please refer to the Report block to achieve the marquee effect

2. Beautification

1)Large screen background

The large screen background here is the theme Body background .jpg in the material. For specific settings, please refer to Automatic linkage with other components during carousel.

2)Border Elements

• Main title border

Drag in the report block on both sides of the report title, and set the style in the Atrributes. Take the report left as an example, as shown in the following figure:

• Other borders

For other borders, you do not need to add additional components, just set the properties directly. 

The title border of this template uses the Title background with gradient box.png, and the others use Border elements.png.

3. Effect preview

Save the template, click the PC Preview, the effect is as shown in the description.

The completed template, please refer to: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extended chart\Large screen template example 1.frm

Click to download the template and material: 

Large screen template example 1.frm