customizing maps with reporting software

Take Finereport Software as an example

In the enterprise information data, for those businesses all over the country, undoubtedly can directly use our built-in China map to visualize, but for the display of data without built-in maps, such as the map to show the county-level data, we can be used to customize the map implementation.

Upload a custom image to Finereport, define the name of the corresponding area or the corresponding point in the Finereport, and the uploaded picture is converted into a file with the same attributes as the Finereport built-in chart, and then set the chart data to be displayed. Can be like Finereport built-in chart, can be data point hint, can linkage, can pass parameters, customized map, automatically saved as the current report working directory of a map style, re-use.

A company's business data are Quanzhou, in the hope that through the Quanzhou map to achieve the click of a county, at the same time will appear

Data preparation

Create a new 2 data query, a data source for the map, a data source to be used as a line chart.

Ds1:sqlSELECT avg (index) as average, city from MAP_ Quanzhou data group by City .

Ds2:sqlSELECT * from MAP_ quanzhou data where city = ' ${city} ', the default value for the parameter is Anxi County .

Custom maps

To merge a cell, click Insert > cell element in menu bar > Insert Chart , select Map, click OK.

• Map type

Since the map we are going to make is a Quanzhou map, the Quanzhou map is not in our built-in map to use a custom map.

Select the map, select the Chart property sheet-type in the properties panel above the right, click 650) this.width=650; "Src=" http://www.finereporthelp.com/help/11/0/7/2-1. PNG "style=" padding:10px 0px 5px; "alt=" 2-1.png "/> button, check add custom map, such as:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-2.png "style=" padding:10px 0px 5px; "alt=" 2-2.png "/>

Select the new custom map, click 650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-3.png "style=" padding:10px 0px 5px; "alt=" 2-3.png "/>, select Edit Picture area , such as:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-4.png "style=" padding:10px 0px 5px; "alt=" 2-4.png "/>

In the pop-up dialog box, import the prepared map pictures, such as:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-5.png "style=" padding:10px 0px 5px; "alt=" 2-5.png "/>

Note: The user's newly uploaded map only supports uploading in SVG format, and the image is saved in the resources\chartmapsvg\user-defined directory.

Double-click each area of the picture, name it, you can directly select the database, or you can write directly, after naming it, click Save, such as:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-6.png "style=" padding:10px 0px 5px; "alt=" 2-6.png "/>

After all the areas have been added, click OK, go back to the Chart Properties panel, click 650 again this.width=650; "src=" http://www.finereporthelp.com/help/11/0/7/2-7.png "style = "padding:10px 0px 5px;" alt= "2-7.png"/> You can edit the custom map name, and here we name the custom map Quanzhou map.

Here, the Quanzhou map is defined, and the map list in the attribute table has a Quanzhou map that can be used in any report.

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-8.png "style=" padding:10px 0px 5px; "alt=" 2-8.png "/>

Note: Data for custom maps is saved in resources\chartmapsvg\user-defined resources\chartmapsvg\user-defined in the SVG file in the directory, if you need to use the custom map in another report project, copy the file in the past and restart the reporting service to take effect.

• Map data

After defining the map, you need to define the data source for the map, check the map, click the Chart property sheet-Data , we do not need to implement the map drilling, Map display method directly using the default single-layer map , data settings such as:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-9.png "style=" padding:10px 0px 5px; "alt=" 2-9.png "/>

After the save, the map is ready, the following to create a map linkage with the line chart.

Line chart

Merge a cell to the right of the map, insert a line chart, and the table style is as follows:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-10.png "style=" padding:10px 0px 5px; "alt=" 2-10.png "/>

• Line chart Data source

Set the data source for the line chart, the dataset is Ds2, the category axis is the month, the series name uses the field name, and the field name is exponential, such as:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-11.png "style=" padding:10px 0px 5px; "alt=" 2-11.png "/>

• Line chart style settings

Set a dynamic caption for a line chart, that is, when you click a county in Quanzhou, the title of the line chart changes as follows:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-12.png "style=" padding:10px 0px 5px; "alt=" 2-12.png "/>

Interactive property settings

Both the map and the line chart are made, and you need to add hyperlinks to the Chart property sheet-effects > Interaction Properties to achieve linkage between the map and the line chart.

With the map selected, add the hyperlink graph link to the interactive properties -linkage cell , as set:

650) this.width=650; "src=" Http://www.finereporthelp.com/help/11/0/7/2-13.png "style=" padding:10px 0px 5px; "alt=" 2-13.png "/>

Save and preview

Save the template, click on the page preview, you can see the effect shown above, template effect online view, click

Completed templates can be found in:%fr%\webreport\web-inf\reportlets\doc\advanced\chart\map_relate.cpt.

customizing maps with reporting software