I am on latest Angular 12 (12.2.9) and IG (12.2.5).
There is an example of a Composite/Combo Chart, but with no access to how the example was accomplished. I have downloaded the complete examples package and there are no charts at all. There is no example code listed on the Composite/Combo Chart page, either.
Please provide a sample that demonstrates combining a stacked Area Chart and a stacked Line Chart:
Example: Lego kit sales projections
In Q4'21 Projections, Lego Star Wars Vehicle AT-AT might have 5,446 sales for 03/22 and in Q1'23 Projections, it might have 4,885. I would expect to see a Line segment between the 4,750 and 5,000 points and an Area filled just under the 5,500 point in the same color.
Also, I would love to be able to see the product name (ex: AT-AT) in the region of the shaded area fragment.
Hello Chris,
I am attaching a sample project containing the Composite Chart sample from the documentation article that you provided. Normally there is a code viewer for the sample, but at the time of writing this, it appears that it is not working correctly.
Regarding your actual example that you listed, the sample I am attaching also has a mockup of how you can achieve that with an IgxStackedAreaSeries. The stacked area series can draw a line along the top by using the outline and thickness properties to determine the color and thickness of the line, respectively.
Regarding seeing the product name in the region of the shaded fragment, this can done like in the top-chart in the sample project using the callout layer demonstrated there.
I hope this helps. Please let me know if you have any other questions or concerns on this matter.
AngularCompChart.zip
As I mentioned, there will be a dynamic list, generated from 2 different scenarios for the same relative timeline. I'm not really seeing how this dynamically generates the stacked-fragment-series and callout-layer objects.
Both scenarios will always have the exact same list of products, but generally they will only include 10-40 of the 200+ products in the system.
The data looks a lot more like this:
this.data = [ { Scenario: 'A', Series: 'Star Wars (Classic)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 5, "Q2'21": 4, "Q3'21": 3, "Q4'21": 4, }, { Scenario: 'B', Series: 'Star Wars (Classic)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 7, "Q2'21": 2, "Q3'21": 6, "Q4'21": 1, }, { Scenario: 'A', Series: 'Star Wars (Disney)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 4, "Q2'21": 5, "Q3'21": 4, "Q4'21": 3, }, { Scenario: 'B', Series: 'Star Wars (Disney)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 3, "Q2'21": 10, "Q3'21": 2, "Q4'21": 6, }, { Scenario: 'A', Series: 'Marvel', Classification: 'Building', Kit: 'Avengers Tower', "Q1'21": 3, "Q2'21": 4, "Q3'21": 5, "Q4'21": 4, }, { Scenario: 'B', Series: 'Marvel', Classification: 'Building', Kit: 'Avengers Tower', "Q1'21": 5, "Q2'21": 7, "Q3'21": 9, "Q4'21": 7, }, { Scenario: 'A', Series: 'Marvel', Classification: 'Building', Kit: "Stark's Mansion", "Q1'21": 2, "Q2'21": 3, "Q3'21": 4, "Q4'21": 5, }, { Scenario: 'B', Series: 'Marvel', Classification: 'Building', Kit: "Stark's Mansion", "Q1'21": 4, "Q2'21": 9, "Q3'21": 5, "Q4'21": 3, } ];
Where we expect a range of time periods, so they are contained in their own array (typically we break it down to a week at a time, but quarters is fine for the purpose of demonstration).
Essentially, we'll have multiple time periods for each Series-Kit mapping in each scenario, and we would normally have close to 11 different metrics per time period. The charts will be generated per metric, filter-able by Series, Classification, or down to specific Kits across 2 scenarios.
I'm expecting to need ngFor to fill igx-stacked-line-series with Scenario A, igx-stacked-area-series with Scenario B, and igx-callout-layer with Scenario B. There's no example of that, yet.
Updated to accurate representation of filtered data for the selected metric. Please build a working example in Stackblitz from these parameters.
Thanks!
I am attaching a new sample demonstrating how you can use a data source like the one that you have provided. For whatever reason, StackBlitz tends to cause more problems than solutions on my machine, and so I tend to just provide full samples.
Moving on to your data set, I would recommend splitting your data out to two data sources, as the IgxCategoryXAxis will have 8 categories with the one you have provided. The reason for this is that it looks at each data item as its own “category” and so while the axis value may be the same (Q1, Q2, Q3, Q4), it doesn’t care as each data item is its own category. As long as the categories are the same in number and value though, you can bind multiple data sources to the same axis by binding the dataSource property of the series, which in this case, they are the same in number and in value, so this will work.
Regarding the dynamic fragment population, I have used the refreshCompleted event of the chart to ensure that the series are in the actualSeries collection of the chart and then populate them programmatically using an array of strings representing the valueMemberPaths of each. I tried to use the ngFor in the same way, but my inexperience with using ngFor is likely the reason it is not working for me at the moment. Perhaps you will have better luck there than I.
I was also a bit unsure what you wanted with the igx-callout-layer with Scenario B if you have the igx-stacked-line-series on Scenario B as well, so that is not included in the sample.
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
DynamicStackedChart.zip
My assumption from your first example was that the igx-callout-layer was meant to put a value into the space occupied by the stacked area chart, and that was my intent with implementation. Scenario A (stacked-line) would have been the initial projections (earlier attempt to model sales of particular Lego kits in the example) and Scenario B (stacked-area) would have been either actual sales or a projection created after doing more trend analysis (both are expected use cases within our system).
In the case of the example, I would like to see "AT-AT", "AT-AT 1st", "Avengers Tower", and "Stark's Mansion" within their respective fills in the stacked area chart.
If this is not possible, then I can mark your previous response as the answer.
Thanks again for being super helpful!
It is absolutely possible to place the igx-callout-layer in the stacked area series for each part, but it will require some calculation on your end, as by default, it will appear above the series if you use the “auto-callout” behavior, marking where the actual point is. This would place the callout in the shaded area above the fragment, or just in the plot area when taking into account the top fragment.
I am attaching a modified version of the sample project above to demonstrate the calculations needed to place the callouts near the middle of the stacked area fragments. I hope this helps.
Please let me know if you have any other questions or concerns on this matter.
4530.DynamicStackedChart.zip
During attempt at implementation, I'm getting errors on closing tags and I'm not sure what the issue is:
HTML:
<igx-tab-item *ngIf="needOutChart"> <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Volume Output Chart</span></igx-tab-header> <igx-legend #outLegend1 orientation="horizontal"></igx-legend> <igx-legend #outLegend2 orientation="horizontal"></igx-legend> <igx-data-chart #outChart height="{{height - 403}}px" width="100%" [dataSource]="outData1" (refreshCompleted)="onChartRefreshComplete()"> <igx-category-x-axis #outXAxis label="Period" title="Time Periods ({{rollup}})"></igx-category-x-axis> <igx-numeric-y-axis #outYAxis label="Production Values" title="Quantities Produced ({{uomParam}})"></igx-numeric-y-axis> <igx-stacked-area-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData1" [legend]="outLegend1"></igx-stacked-area-series> <igx-stacked-line-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData2" [legend]="outLegend2"></igx-stacked-area-series> </igx-data-chart> </igx-tab-item>
package.json dependencies (Azure hosted Angular UI):
"dependencies": { "@angular-devkit/build-optimizer": "^0.1200.0", "@angular/animations": "~12.2.9", "@angular/cdk": "^12.2.9", "@angular/common": "~12.2.9", "@angular/compiler": "~12.2.9", "@angular/core": "~12.2.9", "@angular/forms": "~12.2.9", "@angular/material": "^12.2.9", "@angular/platform-browser": "~12.2.9", "@angular/platform-browser-dynamic": "~12.2.9", "@angular/router": "~12.2.9", "@azure/msal-angular": "^2.0.5", "@azure/msal-browser": "^2.19.0", "@igniteui/material-icons-extended": "^2.4.0", "@infragistics/igniteui-angular": "~12.3.0", "@microsoft/microsoft-graph-client": "^2.2.1", "@microsoft/microsoft-graph-types": "^2.1.0", "bootstrap": "^4.6.0", "classlist.js": "1.1.20150312", "file-saver": "^2.0.5", "guid-typescript": "^1.0.9", "igniteui-angular-charts": "^13.1.0", "igniteui-angular-core": "^13.1.0", "igniteui-angular-excel": "^12.1.1", "igniteui-angular-spreadsheet": "^12.1.1", "jquery": "^3.6.0", "jszip": "^3.5.0", "minireset.css": "~0.0.4", "msal": "^1.4.15", "resize-observer-polyfill": "^1.5.1", "rxjs": "~6.6.0", "tslib": "^2.0.0", "web-animations-js": "^2.3.2", "zone.js": "~0.11.4" }
The Errors:
error NG5002: Unexpected closing tag "igx-stacked-area-series". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags 168 <igx-stacked-line-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData2" [legend]="outLegend2"></igx-stacked-area-series> error NG5002: Unexpected closing tag "igx-data-chart". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags 169 </igx-data-chart>
I'm also wondering if there is a separate repo for the Charts, Excel, and Spreadsheets components that I should be using instead of the open-source ones.
I'm attempting to create a completely reusable chart component that will work for all my situations (I've only gone to the point of the 1 and 2 scenarios situations (once this is good, I'll get into the next situation with 3 scenarios and charting individual designs with multiple parameters).
I feel like I've got a good chart component and overall structure, but the tabs are loading before the data is ready for them. You can see in the console that it's outputting empty data sets on load and so when the tabs are clicked, it's not showing any data at all.
I assume there's something with lazy loading that I'm missing, but I'm still new to Angular and I assume I might be missing something else.
3264.DynamicStackedChart.zip
I will try each option until I find one that works. I can let you know which is most viable and provide some implementation details, if you like.
The dotted line suggestion was submitted almost 3 years ago and is the highest voted suggestion at present. I wonder if someone should circle back around with that team to see when it will actually get into their backlog/worklist...
Thanks again for all your help!
Thank you for your update on this matter. I am glad you were able to resolve the above use case on this matter.
I think the way I would go about this would be to define an external component that is just the chart that you can place within your tabs. Perhaps you could define some properties on that component holding your chart that you could set – for example, the data source that would be created when you select a tab could be assigned to a property on your component that is then bound to the chart.
Regarding the dotted line for the actual percentage, unfortunately there are no dash arrays at the moment in the Ignite UI for Angular toolset and so a dotted line display is not currently possible. If you would like to see this potentially implemented in a future version of the Ignite UI for Angular toolset, I would recommend suggesting a new product idea for it at our Angular Ideas Site, here. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.
That helped a lot. I was able to resolve that use case.
The other use case that I am working on is a comparison between 3 scenarios (2 quarterly projections and a scenario of actual production/sales values), comparing two parameters (let's say number of kits produced vs percentage of kits sold against that production value).
Because the use case is much more complex, I will need to dynamically create a separate chart for each product in its own tab. There will be a line for the percentage (sold vs production count) with its y-axis on the left for each scenario and likewise, there will be a bar for each scenario for the production count with a y-axis on the right.
Your first example shows me how to chart the resultant data the way I need to, with one exception. Users would like to see a dotted line for the Actual percentage.
I'm envisioning two different ways of doing this:
I'm open to other suggestions you have for proceeding forward, and thanks again for all the help to this point.
I have been investigating into the new sample project you have provided, and I have included the necessary CSS inclusions for the IgxGrid and IgxTabs to work in the sample project. You can dynamically build out the chart pretty simply by checking the index in your IgxTabs SelectedIndexChange event and calling into the PopulateChart() method that you have defined.
I am also not hitting the memory issue that you have reported. This leads me to wonder how you are currently running your application, and if it’s actually getting into the “start” parameters in your package.json file. If you are using ng serve, you will be bypassing this start command. You need to use npm run start. Doing this on my end allows your sample to run normally.
I am attaching a modified version of the sample project you sent to demonstrate the changes to the SelectedIndexChange event handler.
8132.DynamicStackedChart.zip