SimplePoll, unable to View Results in loadChart() for a Pie Chart

[got2ski]

How do I view a pie chart from the survey viewResults/loadChart method?

Working on an isolated SimplePoll webpart solution. I'm able to display survey but I am unable to view results in loadchart(). The "display: this.state.viewResults" remains false within render() even after "this.setState({ viewResults: true" setting in viewResults(elm?: any) method. Below is the Break Point, Code, Config, and Package.

Break Point on this.state:
alreadyVote:false
choices:(4) ['Red', 'Blue', 'Yellow', 'Pink']
existingAnswer:''
loaded:true
popupErrorOpened:false
popupOpened:false
question:'What is your favorite Color?'
questionInternalName:'What_x0020_is_x0020_your_x0020_f'
results:(0) []
resultsLoaded:false
selectedValue:'Pink'
viewResults:false
proto:Object

Code:
private viewResults(elm?: any): void {
var _this = this
this.setState({
viewResults: true
});
if (this.state.resultsLoaded != true) {
this.setState({
loaded: false
});
this.setState(this.state);
const listService: SPSurveyService = new SPSurveyService(this.props, this.myPageContext);
listService.getResults(this.props.surveyList, this.state.questionInternalName, this.state.choices).then((num: number[]) => {
_this.setState({
results: num,
loaded: true
});
_this.loadChart();
});
}
else {
this.setState(this.state);
}
}

private loadChart(): void {
var _this = this
var colors: string[] = _this.getColors(_this.state.choices);
if (_this.props.chartType == 'pie') {
var data = {
labels: _this.state.choices,
datasets: [
{
data: _this.state.results,
backgroundColor: colors,
hoverBackgroundColor: colors
}
]
};
var options = {
responsive: false,
cutoutPercentage: 0,
animation: {
animateRotate: true,
animateScale: true
},
title: {
display: true,
text: _this.state.question,
position: 'top',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 18,
fontColor: "#666"
},
legend: {
display: true,
position: 'top',
labels: {
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12
}
}
};
var ctx = document.getElementById(_this.guid + '-chart');
new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
}
else {
var data2 = {
labels: _this.state.choices,
datasets: [
{
data: _this.state.results,
backgroundColor: colors,
hoverBackgroundColor: colors
}
]
};
var options2 = {
responsive: false,
title: {
display: true,
text: _this.state.question,
position: 'top',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontColor: "#666"
},
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}]
}
};
var ctx2 = document.getElementById(_this.guid + '-chart');
new Chart(ctx2, {
type: 'horizontalBar',
data: data2,
options: options2
});
}
//this.state.resultsLoaded = true;
//this.setState(this.state);
_this.setState({
resultsLoaded: true
});
}
config.json:
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"simple-poll-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/simplePoll/SimplePollWebPart.js",
"manifest": "./src/webparts/simplePoll/SimplePollWebPart.manifest.json"
},
{
"entrypoint": "./lib/webparts/pieChart/PieChartWebPart.js",
"manifest": "./src/webparts/pieChart/PieChartWebPart.manifest.json"
}
]
}
},
"externals": {
"sp-client-custom-fields": "node_modules/sp-client-custom-fields/dist/sp-client-custom-fields.bundle.js",
"jquery": {
"path": "node_modules/jquery/dist/jquery.min.js",
"globalName": "jQuery"
},
"chartjs": {
"path": "src/javascripts/chartjs/Chart.min.js",
"globalName": "Chart"
}
},
"localizedResources": {
"sp-client-custom-fields/strings": "node_modules/sp-client-custom-fields/lib/loc/{locale}.js",
"SimplePollStrings": "src/webparts/simplePoll/loc/{locale}.js",
"PieChartStrings": "src/webparts/pieChart/loc/{locale}.js"
}
}

package.json:
{
"name": "simple-poll",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"office-ui-fabric-react": "6.214.0",
"react": "16.8.5",
"react-dom": "16.8.5",
"sp-client-custom-fields": "^1.3.6"
},
"devDependencies": {
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "^6.9.1",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
}
}

[got2ski]

Was able to force responses for the pie chart in the SPSurveyService.ts getResults() method. The "display: this.state.viewResults" remains false within render() even after "this.setState({ viewResults: true" setting in viewResults(elm?: any) method. Any help on this would be great as it controls the div display.

public getResults(surveyListId: string, question: string, selectedValue: string, choices: string[]): Promise<number[]> {
var restUrl: string = this.context.pageContext.web.absoluteUrl;
restUrl += "/_api/Web/Lists(guid'";
restUrl += surveyListId;
restUrl += "')/items?$select=" + question + "&$top=9999";
return this.context.spHttpClient.get(restUrl, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
return response.json().then((responseFormated: any) => {
var res: number[] = [];
for (var c = 0; c < choices.length; c++)
if (choices[c] == selectedValue) {
res[c] = 100;
}else
{res[c] = 10;}
//res[c] = 0;
//this.props;
/* var collection = responseFormated.value;
for (var i = 0; i < collection.length; i++) {
var vote = collection[i][question];
var qIndex = choices.indexOf(vote);
res[qIndex]++; } */ return res;
});
}) as Promise<number[]>; }