Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Haidong Wang
15
create dynamic igx-bubble-series in bubble chart
posted

Hello,

I am trying to figure out, if it is possible to create igx-bubble-series dynamically. 

For example, I have my data like this:

 this.BubbleChartData = [
            { Period: "PER1", Product: "B", Account: "BG51", Propensity: 80, Loyalty: 90,  Marketshare: 56},
            { Period: "PER2", Product: "B", Account: "BG51", Propensity: 40, Loyalty: 60,  Marketshare: 32},
            { Period: "PER1", Product: "C", Account: "BG51", Propensity: 70, Loyalty: 60,  Marketshare: 74},
            { Period: "PER2", Product: "C", Account: "BG51", Propensity: 30, Loyalty: 20,  Marketshare: 47}
        ]
And I have tried the following way, which however doesn't work. No bubble is shown.
<ng-container *ngFor="let data of BubbleChartData ">
                <igx-bubble-series
                              [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="data" xMemberPath="Propensity"
                              yMemberPath="Loyalty" radiusMemberPath="Marketshare" markerType="Circle"
                              [title]="data['Product'] + '-' + data['Period']">
                </igx-bubble-series>                
</ng-container>
Could you help? Many thanks
Haidong
  • 34430
    Offline posted

    Hello Haidong,

    I have been investigating into the behavior you are seeing, and the data sources of the series in the IgxDataChart need to be bound to a collection, and I believe this is the reason that your ngFor loop is not working. Your ngFor loop is looping through each item in your BubbleChartData collection and trying to bind to it instead of binding to a collection.

    In the case of your BubbleChartData in this case, it appears you really only have a single series here, since you only have a single collection? If you were to simply create an IgxBubbleSeries and bind directly to your BubbleChartData in this case, it would work.

    I also believe that if you defined your BubbleChartData as a collection of collections, your ngFor loop should work at that point as well.

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