Hi, welcome to this resource Jasper reports. In this session, we are going to see the basics of HTML Pytharts. And we will also see how we can create a Pythart using HTML by component in Jasper's of business tutorial. The agenda for this session is, firstly, I will walk you through the basics of HTML Pytharts and some key terminology that we use across HTML Pytharts. Secondly, we will see how we can create a Pythart using HTML by component in the studio. Thirdly, we will see how we can apply advanced properties and data labels of the Pythart. And we will see how we can convert a Pythart into a Donald's chart by applying an advanced property. And finally, we will see how we can create a Pythart, how we can create a semi-Pythart and how we can create a real-level Pythart in the studio. Now, let's get started. HTML Pytharts. HTML Pytharts are the advanced features that are available only in the professional conditions. HTML Pytharts are implemented in a technology called Hytharts. Hytharts are purely written in HTML by and JavaScript technologies. Hytharts provide interactive elements directly. Now, let us have a look at the key terminology that we use across HTML Pytharts. But terminology includes values, expressions, categories, levels, measures, and series contributors. Let us briefly look at each of these terminology. Values, values represent the static properties. Expressions represents the dynamic properties. Categories represent the rows in a graph. Levels represents either category or a series. That means, in a graph, we can have more than one category or more than one series. And if we have more than one category, for instance, these categories will be in a hierarchical order. And for instance, if we consider region, country, and state as three categories, we represent category one as level one or the region as level one category and the country as level two category and the state as level three category. Measures represents the numeric value information. And basically, this is a aggregated value. Measures represents the height of the bar in a bar chart or the size of the slice in a pie chart or some dot points on a line chart. And we can also replant the areas using measures, series contributors. Series contributors, we apply these on measures. We will see more about series contributors when we move on a bar chart or a line chart. Now, let us move on to the example on how we can create a pie chart using HTML5 component. So before jumping on to the example, let's briefly look at what is a pie chart and what properties associated with a pie chart. Pie chart is basically a circular graph. It is used to compare the parts of the whole. We represent the data in the form of slices. We're each slice represent the size. And we require categories and values to plot a pie graph. Now, let us consider a scenario of product sales. So in the example, we are going to display the product sales by branding. Brand name is the category and product sales is the measure. So to start with, let's create a blank report. From file new Jasper report. Then select the blank you put from the report templates, click on next. Then let's save this report another report's folder. I am going to name it as HTML5 pie chart. Then product sales by brand. So it looks like we have already a report with the same name. So let's version test to and save it under reports folder. So click on next. Then from the data adapter drop down, select the put monitor source. I have created a query such that it gets the branding and store sales in the results. So let's execute this query here and see how the data is displaying in the results. So brand name and store sales. Brand name is going to be the category and store sales is going to be the measure for the graph. So we have seven different types of brand name. And we already aggregated these sales by its brand name. So let's copy this query and separate for the report here. Click on next. Let's take brand name and store sales for the graph. So click on next. Let's skip group by fields. We don't require for this demonstration. So click on finish. Basically, graphs represents the summary information of a report. So to keep the summary information, we have a specific band called summary. So for this demonstration, we are going to keep title band and summary band. So let's remove the remaining band that includes page header, column header, detail, column, Twitter and page shooter. So multi select all of these bands from the outline. Then click on this delete option. Now we have the summary band and title band on the design space. Now to have the HTML by component with a pie chart, we need to be in the palette section and in the components through we can see HTML pie chart component. So let's select this one and drag it onto the summary. As we drag as we drag the component onto the summary band, we can see this chart edit dialog wizard, which contains all the which contain all the available charts from the HTML, five component. So by default, it shows all charts. Our demonstration is based on pie chart. So let's click on this pie category. Pie has three different types of visualizations again here. So let's select the pie chart and click OK. Now we have the component on the summary band. Let's fit this component to the height and width of the summary band. So save this report. Now let us configure the data for these charts to do that right click on the chart element. Then click on the edit chart properties. So this visual has three different section. In this visual, we can create the chart. We can edit the chart and we can customize the chart by supplying some basic and advanced properties. So in the select chart type section, we have already selected the pie chart. So we don't need to worry or look into more on this one. So the second option, the default option where we click on the edit chart properties is the data comparison, which is having two sections again on his data and data set. So in a Jasper report, we can create our own data sets. So we need to tell our chart which data source, which data source should be used. So before configuring the properties in the data section, we need to map the data set. If we have any sub data set, we have to select them from this dot. And each of these data sets have its individual properties on the top here. And that means we can apply this reset type, reset group increment type increment group. So this option, we can apply on this selected data set here. So let's go with the default one because we have provided the sequel for the main report. So by default, it takes report main data sets. Now switch back to the data section and this is the basic view of the properties that we can configure on the pie chart. But if we want to have a detailed look of these, a detailed look of the same properties, we can switch to the advanced settings in the bottom here. Switch to advanced configuration. So on the basic configuration, slice expression is the category name and slice label expression. Again, this is a, this can be based on a field or this can be a static text. Then the value expression, we plan the measure values. And if we, if we do not aggregate that data at SQL level, we can also apply the function at report level by using this aggregation function option, which is a drop-down option where we can see various functions such as count some average lowest or highest. So we can make use of this utility if we do not have the data group at SQL core level. And we can apply the total tip from the slices. And we can provide the ordering for the category. So this is about the basic view of basic configuration of the pie chart. But let's have a detailed, let's have a detailed look at the properties by clicking on this switch to advanced configuration. And you know, we are going to configure these properties in the advanced review. So this advanced review is divided into three sections here category levels, series levels and measures. Series levels, we do not apply any series for the pie chart. So we can skip the second part here, but on the first one, which is category levels, by default, a category level one is created and another thing, as by default, a level one measure is created. So for this demonstration, we are going to have only one level for both category and measure. So let's go with the default level one and measure one here. So under the category select the level one, double click on this one to bring up its individual properties or we can click on this modify option. So click on the modify option here, then we can see the individual properties of this level one in a pop up here. And again, this pop up has two sections of properties. And we call this as basically, we call this as a bucket and here we can see bucket information as one section and bucket properties as another section. So we are going to work on bucket information only bucket properties. We will deeply look into this one when we move on to a concept called as drill down reports from HTML pie charts. So let's switch back to the bucket information here. And in the expression, let's give the brand name. So brand name is the field and label expression, we can skip this part for this demo and value by default, it is taken as comparable, but a brand name, brand name is upstream type. So this comparable class is super class of the string. So let's go with the default one and the order is taken as ascending by default. But we have already applied order by class at SQL level. So we can select the order as none for this category. And this comparator expression, this is optional for a basic implementation. So let's go with the default options and then click on OK here. So we are done comparing the category for the pie chart. Now let's move on to the measure part. So select the measure one here, click on modify. Then this measure also has two sections of properties here, value definition and advanced properties. So series contributors comes under into this section of what once a property is of a measure. But we will save that for a next session. Let's go with the default options here, which is value definition. And labeled expression could be what we are going to print on the. Cool. So calculation by default, it is taken as nothing. Let's go with the default one or we can also apply the summation function. So we are not going to apply any function because we have already aggregated the dot of based on brand name by applying summation function at this equal level. So let's skip that part as well. And the value expression should be store sales here. So select the store sales field, then click on finish. And this should be of which type. This should be of big decimal and the superclass for the big decimal is number. And this is the default class taken by the. Repoting it. So let's go with the default one. And we do not need to worry about this increment factory class name for this demo. And this property associated hyperlink. So using this property, we can configure the drill down properties from a HTML pie chart. So we will again save that part for a data session. We will discuss more about how we can belong from my HTML pie graphs to its detailed reports. Later, but let's move with this default. You know, configuration for the measure here, so click on OK, then click OK, save the report. And publish to the server and see how the. Other data is showing up on the graph. So, obviously report the. Repurc folder under Jasper report, 2021 folder. And let's. Bring all the empty spaces. And. Click on next, then select the data source as footmark from the drop down. Full moment. Then click on finish. And let's see how the data is showing up on the. I. So this is the report we publish the HTML pie by chart product sales by brand name to. So it looks like we have a previous one somewhere. OK, not in the server, but in the in the studio. In the world space, we have a same. So let's don't worry about that one. So select this report name and click on button or run a new button to view in a. New tab. So we can see that the data is displayed on the. I go up in the form of slices and each slice label is displayed on the. Output here, so we can see the legends. So this is nothing but interactivity. So as soon as we click on any of the smaller icons in the legends, we can see. They are hidden from the actual. So this interactivity, we can get through the HTML pie charts and when we. hear the most we can see. What information is is the particular size. Is having so this is how we can implement. This is how we can create a. HTML pie graph using HTML file component in the studio. Now in the next. In the next phase, we are going to see how we can bring up this. Slice value and percentage. So by default. When by default, when we can't. Here this pie chart, it won't get with. This label signed. Percentage for the pie chart. To get those we need to apply the. Adwancer properties. So in the next slide, we will see how we can do that. So. Basically. This data table. Not all labels includes category name value and percentage is for the pie. So we need to. We need to provide this point name point by point percentage. Then zero. April property for the format. This this value we have to provide for this. A lot of options by data label for. Property. So this these are basically advanced properties, which is directly not available on the chart component in the studio. So we have to get. The these properties from the API. So let us see how we can. Get these labels on the pie charts. So I'm going to pick a replica of the same graph in the same report. But I'm going to increase the. Reports I report with here. So let's increase this to 200. Click OK and then take another left replica. OK. So let's cancel. Let's copy and page this. Let's think with the size of this summary, but a bit more. So now take the copy of the graph and put it this way to. The first one. So to get the labels and to get the percentage of these slices. We have to be in the chart for mounting options. So the third section on the edit. We can see the chart for mounting options. These are the default options that comes with the short components, but no property. From this section will give us the labels and percentage for the pie chart. But we can give something like title product sales by. And then. So this is the, the, these are some of the properties that we can directly apply here. But, but like. But like labels and percentages, we cannot configure them directly using any of the existing option. So we need to apply. We need to configure them from the advanced configuration section. And we can navigate to that section by clicking on the show advanced properties, but on the bottom here. So we can see this has. Three sections again here, select the chart type data, configuration and chart for mounting. And this chart for mounting is even again has two section default and context specific. So we need to be in the default section. And then aggregation is. This one here. Okay, let me go to this slide. Okay. So plot options by not all labels and permit. So now we have to do this level. So this, these are the polar structure. And expand the plot option here. Then pi. Then data labels. Then we have format and format. So both takes the functions or both takes the expressions, I would say. So in the format, in the format option, we are going to. We are going to give this where to here. So select the format option here, then click on modify. It gives the, it opens the edit property value. Then pre-pound this is expression. And open the expression editor and within the double quotes, let's provide the property. So point represents basically the value. And the value has a name as a slice. And then this brings the category name here and point dot y prints gets the value of the measure. And point dot percentage with no decimals. Displays this gets the percentage for the each slice. So let us see how this comes up on the output. So click on finish, click OK. Now we have this value set for the format function. So click OK and save the report and publish it to the server and see how the advance will probably serve showing up on the graph. Yeah. So this is the basic view of the, the first one is the basic view of the pi using a streaml pi component. And the second one is the replica of the same graph, but we have applied a basic property. And we have applied advanced properties to get the values of the each slice and the percentage of these slice with no decimals. So if you want to have this month's printed, we have to, we have to update this zero with one or two. So two gets the two decimal and one gets the one decimal after the actual value. So this is how we can apply advanced property on the data labels of the pi chart. Now in the next phase, in the next phase, we are going to see how we can convert a, how we can convert HTML pi chart to a, and done on chart. So for that, we need to apply these plot options, pi inner size property with some numeric value. So let us see how we can do that here. So let's take another copy of this report. So I am going to save it as an HTML pi and do not chart. So let's remove the first one from the another copy. And let's take this one here. And let us apply one more advanced properties to convert a pi chart into a bar chart. So the advanced property is this one here. Plot options pi, then the inner size. So let's navigate to this folder or say this property. Hmm. What options? I then the inner size. So by default, it is taken as zero. Let's do not give an expression. And let's do it. Just give the one to the as the value because this requires, all this request always a number. So we can directly give a number for this property. So click OK, click OK. And let's publish this report as a separate entity. So obviously this report, the reports folder. And let's name it as do not chock. So, so where the foot will not always say. Then three companies. And from the view repository, then the report thing, let's run this down a chart. So this is how we can convert a HTML pi graph to a HTML phi donut chart. Now, this looks very pretty and this completes the graph visualization. We can have, we can see the label information. We can see the value of this slice and we can see the percentage of each slice. So this looks very nice to me. And this completes the graph full information. In the next session, or in the next slide, say, let us see how we can create this semi-pitch or tundial level pie charts in the studio. So this would be the last two examples that we are going to see in this session. So let us take another copy of the Jereximal here. So we are not going to change the previous example. Let us see how we can convert this as a semi-pitch. So instead of taking another element and dragging it on to the canvas, let's try to convert this existing pie chart into a semi pie chart. So we need to win the edit chart properties. Then we need to win the select chart type section. And from the category select the pie option here. And let's select the semi pie. So this selection converts the actual pie and be a semi pie. So let's save this report and publish it as a separate entity to the software. So this is going to be semi pie and Dereximal pie chart. So again select the data source from the repository. So I am going to take what we want here again. Let's finish and let's try to run the third report and the line of for example. So we have this semi pie here. So select the report name, HTML5 semi pie and Dereximal pie chart and run it on to the server. We can see that the semi pie is displayed with its labels and values and percentage. So this is basically a semi donut I would say. So let's remove the inner size property from the graphs that we can do it here in the XML code directory. So this is 120 this atronom or 64 we can see that property on the 63. The property name is production pie inner size and the value is 120 in the next line. We can update this value to 0 from 120 so that we would get the we would get the pie representation of the chart. So instead of this donut semi donut we can see semi pie here. So let's replace this page. So we can see the semi pie chart is displayed. So based on our requirement we can have this many different types of visualization in single pie chart component. So now let us see how we can plot a Dereximal pie chart. So for Dereximal pie chart I have a separate query created. This is the example query. So Dereximal pie chart it requires at least two levels to plot the graph and we are going to have this data to be represented on the Dereximal pie chart level one is the with level one category and level two is the level two category. We are not going to have services for this one. So let us go and let us return this data and the Dere level pie chart. So copy this query and let's create a new data set in the report because I do not want to update the existing main default query for this demo. So initiate we will see how we can make use of the data set for a HR component. So for that let's create a data set here. Let's go with the default options for creating this data set click on next and select the put monitor ways. Let's take the sample query and this has level one level two and the measure. So let's take all the fields to plot the graph then click on next and then let's give the group by field here the so click on next. Now we have the data set created. Now I am going to take a new component from the HTML pie charts under pie category. So from the pie category set up the Dere level pie then click OK and let's so fit the phi 10 with to the phi of the summary when now go to the editor properties of the Dere level. Then instead of going with this simpler view of the properties configuration. Let's switch to the advanced configuration we can see the clear. Chair on what to configure for the Dere level pie chart. So in our demonstration we are going to have level one and level two and these are represented as level one and category one here and we are going to have one measure for this representation. So select the level one from the category level section modify it and in the expression let's go with the OK. So before conundrum this in this values we need to select which data set to be used by the graph. So in the data set section by default it is taken as report main data set but we have created a data set called data set one for the Dere level pie chart. So let's select this data set from the drop down and as soon as you select the data set we can see the connection information parameters parameters mapping return wireless information for the data set. So we are not going to have any parameters for this demonstration. So let's go with the simpler selection of the data set here. So now switch back to the data section and double click on the level one and change the expression to the level one field name and for category. So let's take the order as none and similarly for the category. Let's take level two as the category one here and let's keep let's take none for the order for the level two and let's provide the measure here. So for the measure let's take this as sales then calculation can be some here and there I don't think there is measure because in the SQL code I haven't aggregated any data related to the level one not level two. So that is why I am taking the calculation as some and the report engine will take care of something of the summing of the measure set level one and level two. So let's go with the other default options here. So click OK click OK and publish this report and this is a rush. Click OK then let's replace this page again to Vd be a level by shot. So we can see this is the inner chart trip to level one and the output chart will outer rings space by state second visualization basically the second level is the subset of the first set here. So this is how we can create a real level by chart in a just but it puts. So this brings us to the end of the session on the HTML file component and different types of examples on single file element. So I hope you're led little clearer on what we saw in this session but before we wrap up let's do a quick recap of what we saw so far. So in the recap. So in the first phase we have seen what is a shameless pie chart signed some key terminology that we use across HTML by components and secondly we have seen how we can create a pie chart using a shameless by component and thirdly we have seen how we can apply advanced properties and data labels to get the label name. Then the value of this line is and the percentage of this slice and and then we have seen how we can convert a pie chart to a Donald chart and finally we have seen how we can create a semi pie chart and the semi do not chart along with the real level pie chart. So that's all for this session. Thank you for watching. Stay tuned for more updates.