SA - amexio-d3-chart-donut

[arafkarsh]

Sender: [email protected]
Comment: The donut chart not showing. The error be like ERROR TypeError: "Cannot read property 'forEach' of undefined in amexio-d3-chart-donut". My data be like (6) [Array(3), Array(3), Array(3), Array(3), Array(3), Array(3)]. Can you help me to get the donut datas?
Open #43 in Usersnap Dashboard

Download original image

Browser: Chrome 75 (Linux)
Referer: https://api.amexio.org/api/v5.16/index.html#/concept-page
Screen size: 1366 x 768 Browser size: 1299 x 669

Powered by usersnap.com

[priyavenkat95]

Any Solution?

[rashmithakkar]

@priyavenkat95 We need a proper sample data which is provided to donut chart. Can you please send the data.

[priyavenkat95]

Below data is my sample Json data
{"donutDatas" : [
{
"assetClass": "Cash and Short Term Fixed Income",
"currentValue": "100,527.61",
"currentPercent": "5.40%",
"colorCode": "#ff7600"
},
{
"assetClass": "Fixed Income",
"currentValue": "385,773.45",
"currentPercent": "20.72%",
"colorCode": "#2f296b"
},
{
"assetClass": "International Equity",
"currentValue": "236,582.42",
"currentPercent": "12.71%",
"colorCode": "#7e4a35"
},
{
"assetClass": "US Equity",
"currentValue": "997,646.18",
"currentPercent": "53.58%",
"colorCode": "#6b5b95"
},
{
"assetClass": "Alternative Investments",
"currentValue": "141,399.59",
"currentPercent": "7.59%",
"colorCode": "#feb236"
}
]
}
I am using a function like that
putDonutData() {
this.snapshotService.getDonutData().subscribe(data => {
this.userDefineColorData = this.setDonutData(data['donutDatas']);
console.log(this.userDefineColorData);
});
}
setDonutData(data) {
data.forEach((element, index) => {
let donut = [];
donut = [element.assetClass, element.currentValue, element.currentPercent];
data[index] = donut;
}, this);
const lable = ['assetClass', 'currentValue', 'currentPercent'];
data.unshift(lable);
return data;
}

Note : I put my function in constructor. I bind my values( userDefineData) into the html

          <amexio-d3-chart-donut [label]="false" [width]="230" [color]="userDefineColors"
            [data]="userDefineColorData" (onChartClick)="onDefaultChartClick($event)"
            (onLegendClick)="onUserDefineLegendClick($event)">
          </amexio-d3-chart-donut>

[Manisha1205]

Refer this stackblitz example.

The data provided by you is used in above example.

[priyavenkat95]

Hi Manisha,

I want this JSON data will show via a service call. Will you show me that kind of examples? I used a service call method in the above-mentioned examples.

[Manisha1205]

Hello,
Refer this stackblitz example, here i have used local json data , instead you can use json data received by http call

[priyavenkat95]

Hi Manisha,
I tried in your way. The donut chart is shown in black color but the [color] is not working.

[rashmithakkar]

Hi @priyavenkat95 ,

We are unable to reproduce the issue that you are facing.