{"id":3264,"date":"2016-04-20T11:24:19","date_gmt":"2016-04-20T03:24:19","guid":{"rendered":"http:\/\/www.finereport.com\/en\/?p=3264"},"modified":"2025-04-17T15:48:28","modified_gmt":"2025-04-17T07:48:28","slug":"chart-making-procedure","status":"publish","type":"post","link":"https:\/\/www.finereport.com\/en\/product-functions\/chart-making-procedure.html","title":{"rendered":"How to Prepare A Chart?"},"content":{"rendered":"<p>Chart is popular thing in our daily life.But how about the procedure of making a chart in <a title=\"FineReport BI and reporting tool data visualization\" href=\"\/en\/help\/data-visualization\" target=\"_blank\" rel=\"noopener\">data visualization<\/a>. Today we&#8217;re going to learn about it.<\/p>\n<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#1_Chart_Making_Procedure\">1. Chart Making Procedure<\/a><\/li><li><a href=\"#2_Example\">2. Example<\/a><ul><li><a href=\"#21_Prepare_Data\">2.1 Prepare Data<\/a><\/li><li><a href=\"#22_Insert_Chart_and_Select_Chart_Type\">2.2 Insert Chart and Select Chart Type<\/a><\/li><li><a href=\"#23_Define_Chart_Data\">2.3 Define Chart Data<\/a><\/li><li><a href=\"#24_Chart_Style_Setting\">2.4 Chart Style Setting<\/a><\/li><li><a href=\"#25_Save_Template\">2.5 Save Template<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<h2><span id=\"1_Chart_Making_Procedure\">1. Chart Making Procedure<\/span><\/h2>\n<p>Chart making procedure of FineReport <a href=\"http:\/\/www.finereport.com\/en\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: blue;\">reporting tool<\/span><\/a> is shown as below:<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/make-chart01.png\" alt=\"make chart\" \/><\/p>\n<p>We will take the below bar chart as an example to briefly introduce chart making procedure.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/make-chart02.png\" alt=\"make chart\" \/><\/p>\n<h2><span id=\"2_Example\">2. Example<\/span><\/h2>\n<h3><span id=\"21_Prepare_Data\"><strong>2.1 Prepare Data<\/strong><\/span><\/h3>\n<p>Definng data source before making a chart.<\/p>\n<p>Add new workbook, add dataset, define sql statement as <strong><span style=\"color: green;\">SELECT * FROM [Sales]<\/span><\/strong><\/p>\n<h3><span id=\"22_Insert_Chart_and_Select_Chart_Type\"><strong>2.2 Insert Chart and Select Chart Type<\/strong><\/span><\/h3>\n<p>There are two way of inserting a chart: cell element and float element. We take float chart here as an example.<\/p>\n<p>Click toolbar <strong><span style=\"color: green;\">Insert&gt;Float Element&gt;Insert Chart<\/span><\/strong> and <strong>Chart Type<\/strong> will pop up. Then select <strong>Column Chart<\/strong> as shown below:<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/make-chart03.png\" alt=\"make chart\" \/><\/p>\n<h3><span id=\"23_Define_Chart_Data\"><strong>2.3 Define Chart Data<\/strong><\/span><\/h3>\n<p>After selecting chart type, click Ok. Return to main interface and select the float chart. Set chart properties on <strong>Chart Properties<\/strong> that lies on the upper right side of main interface and select <strong>Chart Properties-Data<\/strong>. Set column chart&#8217;s data as shown below:<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/make-chart04.png\" alt=\"make chart\" \/><\/p>\n<p>Category: It&#8217;s chart&#8217;s horizontal axis, namely, X axis, meaning how charts are displayed according to category.<\/p>\n<p>SeriesName: It&#8217;s chart&#8217;s vertical axis, namely, Y axis, meaning in what sequence the data in every category is displayed.<\/p>\n<p>SeriesValue: It&#8217;s every series&#8217; value.<\/p>\n<p>Subtotal: It&#8217;s compute mode of series value.<\/p>\n<h3><span id=\"24_Chart_Style_Setting\"><strong>2.4 Chart Style Setting<\/strong><\/span><\/h3>\n<h4><strong>Title Setting<\/strong><\/h4>\n<p>Select the chart and <strong>Chart Properties<\/strong> will appear on the upper right side of designer. Select <span style=\"color: green;\"><strong>Chart Properties-Style&gt;Data Label<\/strong><\/span> and add title as Regional Product Sales as shown below:<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/make-chart05.png\" alt=\"make chart\" \/><\/p>\n<h4><strong>Series Label Setting<\/strong><\/h4>\n<p>Select <span style=\"color: green;\"><strong>Chart Properties-Style&gt;Data Label and tickLabel<\/strong><\/span>. Then series value will be shown.<\/p>\n<p><img class=\"aligncenter\" src=\"http:\/\/www.finereport.com\/en\/wp-content\/themes\/fanruan\/images\/make-chart06.png\" alt=\"make chart\" \/><\/p>\n<p>Attention: You can set other Style for the chart.<\/p>\n<h3><span id=\"25_Save_Template\"><strong>2.5 Save Template<\/strong><\/span><\/h3>\n<p>Save and select page view and you can see the effect as above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chart is popular thing in our daily life.But how about the procedure of making a chart in data visualization. Today we&#8217;re going to learn about it. Contents1. Chart Making Procedure2. Example2.1 Prepare Data2.2 Insert Chart and Select Chart Type2.3 Define Chart Data2.4 Chart Style Setting2.5 Save Template 1. Chart Making Procedure Chart making procedure of&#8230;<\/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],"yst_prominent_words":[570,1199],"_links":{"self":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/3264"}],"collection":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/comments?post=3264"}],"version-history":[{"count":7,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/3264\/revisions"}],"predecessor-version":[{"id":19667,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/3264\/revisions\/19667"}],"wp:attachment":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media?parent=3264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/categories?post=3264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/tags?post=3264"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=3264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}