got2ski
commented
4 years ago 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[]>; }
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" } }