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!

Thanks for the above. I have put in a request for grouping categories (as adding another x-axis looks ugly; it's putting the year for every data point) and see how adding a label before the igx-legend object accomplishes what I wanted.

Unfortunately, I'm not actually getting anything in my implementation. I believe it's because of how I'm using the igx-tab object and a conditional with it.

A data-grid will be created, regardless of what parameter is selected. There are parameters that should generate the chart we've been discussing, some that will generate another chart (yet to be built), and some which will only generate the data-grid.

If the data changes, it should revert back to the data-grid tab, which already updates dynamically as intended, but so far, nothing happens when I click the "charts" tab.

Here is my code:

HTML:

<div *ngIf="parameterData !== undefined && gridReady && !needCharts">
    <igx-grid #compareGrid displayDensity="compact" [data]="parameterData" height="{{height - 362}}px" width="100%" [allowFiltering]="true">
        <igx-column *ngFor="let col of columns" [resizable]="true" [field]="col.field" [dataType]="col.type" [formatter]="col.formatter" [pinned]="col.pinned" [width]="col.width"></igx-column>
    </igx-grid>
</div>

<igx-tabs #compNav (selectedIndexChange)="itemSelected($event)" *ngIf="needCharts">
    <igx-tab-item>
        <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Data</span></igx-tab-header>
        <igx-tab-content>
            <igx-grid #compareGrid displayDensity="compact" [data]="parameterData" height="{{height - 403}}px" width="100%" [allowFiltering]="true">
                <igx-column *ngFor="let col of columns" [resizable]="true" [field]="col.field" [dataType]="col.type" [formatter]="col.formatter" [pinned]="col.pinned" [width]="col.width"></igx-column>
            </igx-grid>
        </igx-tab-content>
    </igx-tab-item>
    <igx-tab-item *ngIf="needOutChart">
        <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Volume Output Chart</span></igx-tab-header>
        <label>{{scenario1.name}}</label>
        <igx-legend #outLegend1 orientation="horizontal" title="{{scenario1.name}}"></igx-legend>
        <label>{{scenario2.name}}</label>
        <igx-legend #outLegend2 orientation="horizontal" title="{{scenario2.name}}"></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-line-series>
        </igx-data-chart>
    </igx-tab-item>
</igx-tabs>

Pertinent TS code:

  onChartRefreshComplete() {
    if (this.dataChanged && this.activeTab === 'chart') { this.populateChart(); }
  }

  populateChart() {
    if (this.needOutChart) {
      this.buildOutData();
      let areaSeries:IgxStackedAreaSeriesComponent = this.outChart.actualSeries[0] as IgxStackedAreaSeriesComponent,
        lineSeries:IgxStackedLineSeriesComponent = this.outChart.actualSeries[1] as IgxStackedLineSeriesComponent;
      this.designs.forEach(d => {
        let areaFrag:IgxStackedFragmentSeriesComponent = new IgxStackedFragmentSeriesComponent(),
          lineFrag:IgxStackedFragmentSeriesComponent = new IgxStackedFragmentSeriesComponent();
        areaFrag.valueMemberPath = d;
        areaFrag.title = d;
        areaSeries.series.add(areaFrag);
        lineFrag.valueMemberPath = d;
        lineFrag.title = d;
        lineSeries.series.add(lineFrag);
      });
    }
    this.dataChanged = false;
  }

  itemSelected(e:any) {
    this.activeTab = e.index === 0 ? 'data' : 'chart';
    this.activeTab === 'data' && this.populateChart();
    console.log(`Changed to ${this.activeTab} tab`);
  }

  calculateUom(param:string) {
    if (this.scenario1 !== undefined && this.scenario2 !== undefined) {
      this.gridReady = false, this.uomParam = param, CompareComponent.uomParam = param,
      this.needOutChart = ['Wafer Outs', 'DIE', 'GB', 'GB_SH', 'PB', 'PB_SH', 'EB', 'EB_SH'].indexOf(param) > -1 && this.scenario1 !== this.scenario2 ? true : false,
      // this.needYieldChart = ['Ship Yield (%)', 'Line Yield (%)', 'Cycle Time (days)'].indexOf(param) > -1 && this.scenario1 !== this.scenario2 && this.startWw.name < this.currentWorkweek.name ? true : false,
      this.needCharts = this.needOutChart || this.needYieldChart ? true : false;
...
      this.dataChanged = true;
...
    }
  };

Hello Chris,

Thank you for suggesting the new product idea for grouping categories. If it is putting a year for each data point, keep in mind that you can have blank labels for certain data points either by using the formatLabel function or just having an empty string for certain data points.

Regarding the output that you are receiving, you mentioned that “you aren’t getting anything” with your implementation. Are the tabs that are supposed to show the igx-data-chart showing up in this case at least? That is, is the “#compNav” igx-tabs control showing up for you? If that is showing up, but the chart isn’t, I have to wonder if this could be related to your underlying data, as everything else seems like it should work in this case.

Would it be possible for you to modify the sample project I sent you such that it reproduces the behavior you are seeing and send it back? Alternatively, if you have an isolated sample project of your own that reproduces the behavior you are seeing, would it be possible for you to please attach that instead?

Please let me know if you have any other questions or concerns on this matter.

Yes, I'll work on that and get you an example as soon as I am able.

The tabs are showing up, but I am unable to navigate into the "chart" tab at all.

Hello Chris,

Thank you for your update on this matter. I will continue to monitor this thread while I await a sample from your end.

Please let me know if you have any other questions or concerns on this matter.

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!

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:

• An array of tabs holding separate charts (*ngFor and ViewChild nightmare), each with their own set of controls similar to the previously attached example.
• An array of tabs (still *ngFor frustration) but with the exact same chart declared within and basically changing the values in the chart based on which tab (index - 1 of product in array) was selected.

I'm open to other suggestions you have for proceeding forward, and thanks again for all the help to this point.