{"id":3313,"date":"2016-05-04T11:18:02","date_gmt":"2016-05-04T03:18:02","guid":{"rendered":"http:\/\/www.finereport.com\/en\/?p=3313"},"modified":"2019-05-22T10:45:48","modified_gmt":"2019-05-22T02:45:48","slug":"cell-chart-and-float-chart","status":"publish","type":"post","link":"https:\/\/frg.fineres.com\/en\/2016\/05\/04\/cell-chart-and-float-chart\/","title":{"rendered":"Details of Cell Chart and Float Chart."},"content":{"rendered":"\r\n

There are two ways to insert a chart when you use\u00a0FineReport<\/a>: insert as a cell element or insert as a float element. In this article, we will introduce the chart function of the reporting tool in detail.<\/p>\r\n\r\n\r\n\r\n

First, what\u2019s the difference between the two insertion methods?<\/p>\r\n\r\n\r\n\r\n

Cell chart<\/strong><\/h4>\r\n\r\n\r\n\r\n

Advantages: Corresponding chart will be generated thorough the parent-child relationship automatically. The report designer need not to make a chart for each group of data.<\/p>\r\n\r\n\r\n\r\n

Disadvantages: You need to cancel the parent-child relationship if you don’t want to extend follow parent cell.<\/p>\r\n\r\n\r\n\r\n

Float chart<\/strong><\/h4>\r\n\r\n\r\n\r\n

Advantages: Charts inserted as a float element has no limitation of cell, and you can fix the position of the chart or drag it to anywhere you want. The size of the float chart will not change after set. Also, it will not be affected by parent cell.<\/p>\r\n\r\n\r\n\r\n

Disadvantages: Float element is not supported if you want to export report in word format. And it is also not supported in mobile terminal.<\/p>\r\n\r\n\r\n\r\n

Next, I will use specific examples to teach you how to make these two charts.<\/p>\r\n\r\n\r\n\r\n

1. Cell Chart<\/strong><\/h3>\r\n\r\n\r\n\r\n

As shown in the figure below, each group is followed by a chart to view the data. You can use cell charts to achieve such scalable effects.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Now I introduce detailed steps of making a cell chart like the above figure.<\/p>\r\n\r\n\r\n\r\n

1.1 Prepare data<\/strong><\/h4>\r\n\r\n\r\n\r\n

Open the report\u00a0%FR_HOME%\\webroot\\WEB-INF\\reportlets\\doc-EN\\Primary\\GroupReport\\Group_Report.cpt.<\/p>\r\n\r\n\r\n\r\n

Add a chart based on the regional sales group report and realize that every region has a sales chart of their own.<\/p>\r\n\r\n\r\n\r\n

Each chart expanded here only displays the data of the current region, so you cannot directly use the dataset as the source of the chart data (the dataset is all the data in the sales table). You can only use the cell data in the report.<\/p>\r\n\r\n\r\n\r\n

Note: Cell element chart and cell data source chart are not the same. Cell element chart means that the chart is inserted as a cell, can follow the cell expansion, and has some attributes of a cell, while the cell data source chart refers to data bound to chart is\u00a0cell data\u00a0rather than dataset\u00a0data.\u00a0\u00a0<\/p>\r\n\r\n\r\n\r\n

1.2 Insert a cell chart<\/strong><\/h4>\r\n\r\n\r\n\r\n

Merge the right area of the second line, then right-click the cell,\u00a0Cell element > Insert Chart > Column Chart. Then click\u00a0OK.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

1.3 Set chart data<\/strong><\/h4>\r\n\r\n\r\n\r\n

Set the chart data as shown below, each salesperson’s sales chart, select cell data in data source check box, and input\u00a0=B2\u00a0in\u00a0classification. Select sales in the series name and input\u00a0=C2\u00a0in a box of value\u00a0as shown below.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Note: You can modify the chart style yourself to make it looks more beautiful.<\/p>\r\n\r\n\r\n\r\n

1.4 Set the parent cell of the chart<\/strong><\/h4>\r\n\r\n\r\n\r\n

According to the parent-child concept, the cell where the chart was locating defaults to the salesperson data column as the parent, and each salesperson that is expanded will have its own chart.<\/p>\r\n\r\n\r\n\r\n

Here we only need to generate a chart in each region, so we need to set the parent cell of the chart to be region cell A2.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

1.5 Save and preview<\/strong><\/h4>\r\n\r\n\r\n\r\n

Save the template and preview to see the effect as shown above.<\/p>\r\n\r\n\r\n\r\n

For completed template, see:\u00a0%FR_HOME%\\webroot\\WEB-INF\\reportlets\\doc-EN\\Primary\\Chart\\Cell_Chart.cpt.<\/p>\r\n\r\n\r\n\r\n

2. Float Chart<\/strong><\/h3>\r\n\r\n\r\n\r\n

Charts can also be inserted into reports as float elements.<\/p>\r\n\r\n\r\n\r\n

The setting method of the float chart is the same as the cell chart. The only difference is that you need to choose to insert a float element at the first step. As you can see, you can drag and drop the chart and change the size of the chart. It is easy to operate, as shown below.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

Note: The chart made by the float element is different from the cell chart, which\u00a0can be filtered according to the parent cell and expanded to display the corresponding column chart according to the region in cell chart, while the float element has no parent cell concept. So data cannot be filtered by setting a parent cell.\u00a0If you have added some float charts in the designer, you will see the same number of tables on the web side, that is, it will not expand.<\/p>\r\n\r\n\r\n\r\n

You cannot use float chart if you want to export a report in word format. And the float chart is not supported on the mobile terminal.<\/p>\r\n\r\n\r\n\r\n

For completed template, you can see:<\/p>\r\n\r\n\r\n\r\n

%FR_HOME%\\webroot\\WEB-INF\\reportlets\\doc-EN\\Primary\\Chart\\Float_Chart.cpt.<\/p>\r\n","protected":false},"excerpt":{"rendered":"

There are two ways to insert a chart when you use FineReport\uff1ainsert as a cell element or insert as a float element. In this article, we will introduce the chart function of the reporting tool in detail.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[111],"tags":[117],"_links":{"self":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3313"}],"collection":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/comments?post=3313"}],"version-history":[{"count":14,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3313\/revisions"}],"predecessor-version":[{"id":5693,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/3313\/revisions\/5693"}],"wp:attachment":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/media?parent=3313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/categories?post=3313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/tags?post=3313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}