Multi Series Charts
AEM Forms 6.5 introduced the ability to create and configure multiple series charts. The multiple series charts are typically used in association with Line,Bar,Column chart type. The following chart is an good example of multi series chart. The chart shows the growth of $10,000 USD in 3 different mutual funds over a period of time. To be able to create and use charts of these kind in AEM Forms, you will need to create the appropriate Form Data Model.
To create multi-series charts in AEM Forms, you need to create an appropriate Form Data Model with necessary entities and associations between the entities. The following screenshot highlights the entities and the associations between the 3 entities. At the top level, we have an entity called “Organization”, which has a one-to-many association with Fund entity. The Fund entity, in turn, has a one-to-many association with the Performance entity.
Create Form Data Model for Multi Series Charts
Transcript
In this video we will take a look at configuring and using Multi-line series charts in AEM Forms 6.5. Series is a set of data and you can use multiple series to chart the data. For example, in this chart we can see that the growth of $10,000 invested in three different individual funds starting from the year 2014. To create charts of this kind we need to create the appropriate form data model. So to create the form data model, let’s go into our form data model editor in AEM Forms and create three entities.
To create an entity we click on Create Entity here and give a title to this entity called Organization. We create another entity called Fund.
And we create a third entity called Performance.
So, so far we have created three entities Organization, Fund and Performance. Make sure you save this. The next step is to add appropriate child properties to each of these entities. So to add a child property to the Performance entity, I click on Performance and click on Create Child Property. The first child property is going to be called Year and it going to be of type string.
The second child property is going to be called Amount and it’s going to be of type float.
So, so far we have added two child properties to the Performance entity. The next step is to add a child property to the Fund object. So we select the Fund entity here and click on Child Property and is going to be one child property called Name and it’s going to be of type string.
So, so far we have added three entities and added child properties to the Fund and Performance entities. The next step is to add an association between Organization and the Fund entity and the Fund and the Performance entity. So to do that, let’s select the Organization entity and click on Add Association. So we can give the name to this association called Funds and select the type of association. Typically it’s going to be one-to-many because one organization will contain a number of funds. And the model object is going to be Fund.
The next association is to be between the Fund and the Performance entities. So to do that, we click on the Fund entity. Add association.
Performances.
One-to-many.
And the model object is going to be Performance.
So this is our form data model. We have three entities and two of those entities have child properties and there’s an association between the Organization, Fund and the Performance entities.
So one more thing that we need to do is remove, make sure that the Performance is not a top model object here and the Fund is also not a top level model.
So our Organization is going to be our top level model and each organization will have funds and that fund will have a name and it has performances and each of the performances will have the year and amount. So now that our form data model is ready, configured, the next step we need to do is to configure a chart using this form data model.
Configure Line Series Charts
Transcript
In this video, we will use the Form Data Model that was created in the earlier step to configure a line series chart. So to do that, I have opened an interactive communications for print channel in edit mode. So I have this target area to which I’m gonna add a chart component.
Once a chart component is added, we then need to configure this chart component. Open up the configuration property sheet for this particular chart component. I select the Chart Type as Line, and make sure you select the Multiple Series option here. Once you select the Multiple Series option, we need to select the appropriate data model. In this case, I’m going to select the data model called Funds Name, here. And then for the X Axis, I’m going to select under Organization, Funds, Performances, Year.
And for the Y Axis, I’m going to select the Amount.
And make sure you specify Show legends option and the position is Bottom. And since this target area is of type image, I need to specify the height and the width for this one. So the height is going to be 300, and the width is going to be 500 pixels. So, this is how our multi-series line chart is configured. We select the option, Chart Type is Line. And the Series is Multiple Series. We select the appropriate Data Model Objects for the Series Object and also for the X and the Y Axis. So now that our chart is configured, we save these settings here. And then, preview this particular interactive communications.
Click on Preview, the Print Channel, and we’ll use Sample Data to populate our chart. So this is my sample data here, to populate the chart. And then, we do a preview.
So now, you see the sample data is populating my series chart here. There are three series in my chart. One is the weFinanceFund, other one is the SPY fund, and something called VGIX fund. So this chart shows the growth of $10,000 over a period of time starting from 2014 and ending in 2018.
To test this on your system, please follow the following steps
- Download and import the MutualFundFactSheet.zip using AEM Package Manager.
- Download the SeriesChartSampleData.json on to your hard drive. This is the sample data that is used to populate the chart.
- Navigate to Forms and Documents.
- Gently select the “MutualFundGrowthFactSheet” interactive communications template.
- Click on Preview | Print Channel | Upload Sample Data.
- Browse to sample data file provided as part of this article.
- Preview the print channel of the “MutualFundGrowthFactSheet” interactive communication with the sample data downloaded in the previous step.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e