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 modified version of the sample project that you have provided that demonstrates what I had meant above.
Since your data source is not actually changing, this makes it difficult to perceive that anything has actually changed, and so I added a switch between the original data source from this forum thread and yours. It will switch with each button click, but since your “designs” schema is different from the original data source, you will notice that the chart will be blank. The “Date” property in the old data source still exists though, so while nothing will be plotted, you will be able to observe the X-Axis changing.
4118.DynamicStackedChart.zip
I was able to figure that part out. My issue now is in attempting to integrate the way I need to in my application.
I need to generate a data grid in one tab, immediately after data is available, and generate the chart in another tab on-demand (data will change so chart should be generated each time the chart tab is navigated to).
For whatever reason, the sample project won't load, even expanding the base memory use up to 25gb, which is strange since my app (far larger and with much more functionality) can run properly with only 12gb allocated. I have attached it below.
The sample includes a button in the Chart tab that won't be there in the final product: it should load when the tab is selected.
8765.DynamicStackedChart.zip
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.
Please let me know if you have any other questions or concerns on this matter.
8132.DynamicStackedChart.zip
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.
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.
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!