Query asked by user
I am trying to generate some Pie charts with Angular Charts, but when I build the app I keep getting the errors:
Error: attribute height: Expected length, “NaN”
Error: attribute transform: Trailing garbage, “translate(60,NaN)”
I have tried everything but it didn’t work
Here is my js code:
this.authService.getSurveyData().then(slist => {
// STANDARD:
this.defaultSurveys = [
{
title: "Consent Form",
accepted: slist.data.consent.accepted,
declined: slist.data.consent.declined,
chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
},
g_chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
}
},
{
title: "Demographics",
accepted: slist.data.demographics.accepted,
declined: slist.data.demographics.declined,
chartData: {
series: ["Demographics"],
data: [
{
x: "Accepted",
y: [slist.data.demographics.accepted]
},
{
x: "Declined",
y: [slist.data.demographics.declined]
}
]
},
g_chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
}
}];
}, error => {
this.errorMessage = error.message;
});
this.config = {
"labels": false,
"colors": ["#00bab3", "#3e5f6d"],
"legend": {
"display": false,
"position": "right"
},
"innerRadius": 0,
"lineLegend": "lineEnd",
};
And my html code:
<!--Default Surveys-->
<div class="data-stone">
<div ng-repeat="survey in vm.defaultSurveys">
<div class="chart2">
<div class="chart-wrapper">
<div class="chart-header">
<h4>{{survey.title}}</h4>
</div>
<div class="chart-table">
<!--NUMBER OF USERS-->
<div class="chart-row">
<div class="chart-data-header chart-cell half-stand">
<label>NUMBER OF USERS</label>
</div>
<div class="chart-data-header chart-cell blankspace"></div>
<div class="chart-data-header chart-cell half-game">
<label>NUMBER OF USERS</label>
</div>
</div>
<!--ACCEPTED-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill sea">{{survey.accepted}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-sea">ACCEPTED</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill sea">{{survey.accepted}}</div>
</div>
</div>
<!--blank space-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="blank-divisor"></div>
</div>
</div>
<!---->
<!--DECLINED-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill forest">{{survey.declined}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-forest">DECLINED</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill forest">{{survey.declined}}</div>
</div>
</div>
<!--blank space-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="blank-divisor"></div>
</div>
</div>
<!---->
<!--TOTAL-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill water">{{survey.accepted + survey.declined}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-night">TOTAL</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill water">{{survey.accepted + survey.declined}}</div>
</div>
</div>
<!--CAKE CHARTS-->
<div class="chart-row space-recurrent">
<div class="chart-cell data-line cake-enclose">
<div class="cake">
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" height="120" width="120"></div>
</div>
</div>
<div class="chart-cell data-line porct">
<div class="cake-data">
<div class="cake-subrow">
<label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
<div class="mini-pill sea"></div>
<label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
</div>
<div class="cake-subrow">
<label class="data-forest">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
<div class="mini-pill forest"></div>
<label class="data-sea">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
</div>
</div>
</div>
<div class="chart-cell data-line cake-enclose">
<div class="cake">
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" style="width: 120px; height: 120px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="background"></div>
</div>
<div class="chart-divisor"></div>
</div>
</div>
When I build my app it generates a “svg” element (as expected) but shows no height whatsoever..
Maybe is there a way I can set up values for width / height in order the svg elements is properly generated?
See generated SVG (with wrong height value)
Solution
By Seeing Code and by behavior of the bug i guess there is issue with selection of chart
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" height="120" width="120"></div>
ac-chart=‚Äù‚Äòpie’‚Äù causes issue
So may be you can try with just using pie instead of ‚Äòpie’
Answered By – Smit Shah
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0