--- title: Customer Satisfaction Survey Analysis product: Dashboard description: Learn how to analyze customer satisfaction survey results using SurveyJS Dashboard. This demo shows an interactive dashboard for visualizing and exploring customer feedback. framework: React source: https://surveyjs.io/dashboard/examples/customer-satisfaction-survey-analysis/reactjs index: https://surveyjs.io/dashboard/examples/overview.md --- # Customer Satisfaction Survey Analysis (React) Customer satisfaction analysis enables product managers to identify weaknesses and opportunities for improvement, assess how well a product meets user expectations, and uncover customer pain points and requirements. This demo illustrates how to visualize customer satisfaction survey results using SurveyJS Dashboard. Select a date range to analyze a specific period. Click any bar in a bar chart to filter the dataset by that value. Switch between visualizer types to choose the most effective representation for your data. ## Files ### `public/index.html` ```html
``` ### `src/surveydata.js` ```js const sampleData = [ { "customer_name": "Cameron Kim", "customer_region": "Asia", "customer_email": "cameron.kim@example.com", "overall_satisfaction": 4, "liked_features": [ "Design" ], "improvement_areas": [], "additional_feedback": "", "recommendation_score": 7 }, { "customer_name": "Casey Smith", "customer_region": "South America", "customer_email": "casey.smith@example.com", "overall_satisfaction": 4, "liked_features": [ "Customer support", "Design", "Ease of use", "Price", "other" ], "liked_features-Comment": "Cross-platform support", "improvement_areas": [ "Customer support", "Design", "other" ], "improvement_areas-Comment": "Documentation", "additional_feedback": "Needs more features.", "recommendation_score": 8 }, { "customer_name": "Charlie Kim", "customer_region": "Africa", "customer_email": "charlie.kim@example.com", "overall_satisfaction": 1, "liked_features": [ "Price", ], "improvement_areas": [ "Design", "Customer support", "Ease of use", "Performance" ], "additional_feedback": "Could be improved.", "recommendation_score": 2 }, { "customer_name": "Morgan Lee", "customer_region": "Middle East", "customer_email": "morgan.lee@example.com", "overall_satisfaction": 4, "liked_features": [ "Customer support", "Price", "Performance", "Ease of use", "Design" ], "improvement_areas": [ "Design", "Performance" ], "additional_feedback": "Pricing is fair.", "recommendation_score": 7 }, { "customer_name": "", "customer_region": "Africa", "customer_email": "", "overall_satisfaction": 3, "liked_features": [ "Price", "Ease of use", "other" ], "liked_features-Comment": "Cross-platform support", "improvement_areas": [ "Design" ], "additional_feedback": "Needs more features.", "recommendation_score": 6 }, { "customer_name": "Quinn Brown", "customer_region": "Asia", "customer_email": "quinn.brown@example.com", "overall_satisfaction": 5, "liked_features": [ "Design", "Ease of use", "Performance", "Price", "other" ], "liked_features-Comment": "Cross-platform support", "improvement_areas": [ "Customer support" ], "additional_feedback": "Pricing is fair.", "recommendation_score": 9 }, { "customer_name": "Jesse Kim", "customer_region": "Asia", "customer_email": "jesse.kim@example.com", "overall_satisfaction": 5, "liked_features": [ "Price" ], "improvement_areas": [], "additional_feedback": "Great product!", "recommendation_score": 10 }, { "customer_name": "", "customer_region": "Australia / Oceania", "customer_email": "", "overall_satisfaction": 3, "liked_features": [ "Customer support", "Price" ], "improvement_areas": [ "Customer support", "Price", "Design" ], "additional_feedback": "", "recommendation_score": 5 }, { "customer_name": "Logan Garcia", "customer_region": "Asia", "customer_email": "logan.garcia@example.com", "overall_satisfaction": 1, "liked_features": [ "Price" ], "improvement_areas": [ "Performance", "Ease of use", "Price", "Design", "Customer support", "other" ], "improvement_areas-Comment": "customization", "additional_feedback": "Could be improved.", "recommendation_score": 3 }, { "customer_name": "Emerson Patel", "customer_region": "Europe", "customer_email": "emerson.patel@example.com", "overall_satisfaction": 4, "liked_features": [ "Performance", "Customer support", "Price" ], "improvement_areas": [ "Ease of use", "other" ], "improvement_areas-Comment": "Reliability", "additional_feedback": "", "recommendation_score": 6 }, { "customer_name": "Jesse Patel", "customer_region": "South America", "customer_email": "jesse.patel@example.com", "overall_satisfaction": 4, "liked_features": [ "Price", "Ease of use" ], "improvement_areas": [], "additional_feedback": "", "recommendation_score": 8 }, { "customer_name": "Riley Johnson", "customer_region": "Africa", "customer_email": "riley.johnson@example.com", "overall_satisfaction": 4, "liked_features": [ "Ease of use", "Design", "Performance", "Price", "Customer support" ], "improvement_areas": [], "additional_feedback": "Pricing is fair.", "recommendation_score": 7 }, { "customer_name": "Alex Davis", "customer_region": "North America", "customer_email": "alex.davis@example.com", "overall_satisfaction": 4, "liked_features": [ "Performance" ], "improvement_areas": [ "Price", "Design", "Customer support" ], "additional_feedback": "Needs more features.", "recommendation_score": 2 }, { "customer_name": "Emerson Garcia", "customer_region": "Australia / Oceania", "customer_email": "emerson.garcia@example.com", "overall_satisfaction": 5, "liked_features": [ "Design", "Customer support", "Ease of use", "Price" ], "improvement_areas": [], "additional_feedback": "Needs more features.", "recommendation_score": 9 }, { "customer_name": "", "customer_region": "Asia", "customer_email": "", "overall_satisfaction": 4, "liked_features": [ "Price", "Customer support", "Ease of use" ], "improvement_areas": [ "Design" ], "additional_feedback": "Could be improved.", "recommendation_score": 5 }, { "customer_name": "Jordan Johnson", "customer_region": "South America", "customer_email": "jordan.johnson@example.com", "overall_satisfaction": 1, "liked_features": [ "Design", "other" ], "liked_features-Comment": "Documentation", "improvement_areas": [ "Price", "Customer support", "Ease of use", "Performance", "Design" ], "additional_feedback": "I like the design.", "recommendation_score": 0 }, { "customer_name": "Jordan Brown", "customer_region": "Asia", "customer_email": "jordan.brown@example.com", "overall_satisfaction": 1, "liked_features": [], "improvement_areas": [ "Performance", "Design", "Price", "Ease of use", "Customer support" ], "additional_feedback": "Could be improved.", "recommendation_score": 0 }, { "customer_name": "Drew Kim", "customer_region": "Australia / Oceania", "customer_email": "drew.kim@example.com", "overall_satisfaction": 3, "liked_features": [ "Performance", "Price", "Design" ], "improvement_areas": [ "Customer support", "other" ], "improvement_areas-Comment": "Compatibility", "additional_feedback": "Pricing is fair.", "recommendation_score": 6 }, { "customer_name": "", "customer_region": "Europe", "customer_email": "", "overall_satisfaction": 4, "liked_features": [ "Customer support", "Price", "Performance", "Ease of use" ], "improvement_areas": [], "additional_feedback": "Great product!", "recommendation_score": 9 }, { "customer_name": "", "customer_region": "Asia", "customer_email": "", "overall_satisfaction": 2, "liked_features": [ "Customer support", "Design" ], "improvement_areas": [ "Ease of use", "Price", "Performance", "other" ], "improvement_areas-Comment": "Help resources", "additional_feedback": "Needs more features.", "recommendation_score": 2 }, { "customer_name": "Casey Johnson", "customer_region": "Europe", "customer_email": "casey.johnson@example.com", "overall_satisfaction": 2, "liked_features": [ "Price", "Performance" ], "improvement_areas": [ "Design", "Customer support", "Ease of use" ], "additional_feedback": "Needs more features.", "recommendation_score": 3 }, { "customer_name": "Quinn Kim", "customer_region": "South America", "customer_email": "quinn.kim@example.com", "overall_satisfaction": 4, "liked_features": [ "Design", "Ease of use", "Price" ], "improvement_areas": [ "Customer support", "Price" ], "additional_feedback": "I like the design.", "recommendation_score": 8 }, { "customer_name": "Alex Patel", "customer_region": "Europe", "customer_email": "alex.patel@example.com", "overall_satisfaction": 5, "liked_features": [ "Performance", "Design", "Ease of use", "Price" ], "improvement_areas": [], "additional_feedback": "Great product!", "recommendation_score": 10 }, { "customer_name": "", "customer_region": "Australia / Oceania", "customer_email": "", "overall_satisfaction": 5, "liked_features": [ "Customer support", "Price", "Design", "Ease of use", "Performance" ], "improvement_areas": [ "other" ], "improvement_areas-Comment": "Customization", "additional_feedback": "I like the design.", "recommendation_score": 9 }, { "customer_name": "Alex Kim", "customer_region": "Middle East", "customer_email": "alex.kim@example.com", "overall_satisfaction": 1, "liked_features": [ "Price" ], "improvement_areas": [ "Design", "Ease of use", "Price" ], "additional_feedback": "Pricing is fair.", "recommendation_score": 3 }, { "customer_name": "Taylor Brown", "customer_region": "South America", "customer_email": "taylor.brown@example.com", "overall_satisfaction": 3, "liked_features": [ "Customer support" ], "improvement_areas": [ "Performance", "other" ], "improvement_areas-Comment": "Stability", "additional_feedback": "Excellent support.", "recommendation_score": 7 }, { "customer_name": "Jamie Garcia", "customer_region": "Middle East", "customer_email": "jamie.garcia@example.com", "overall_satisfaction": 2, "liked_features": [ "Ease of use", "Design", "Performance", "Price" ], "improvement_areas": [ "Customer support" ], "additional_feedback": "I like the design.", "recommendation_score": 4 }, { "customer_name": "Riley Smith", "customer_region": "Asia", "customer_email": "riley.smith@example.com", "overall_satisfaction": 4, "liked_features": [ "Design", "Performance" ], "improvement_areas": [ "Customer support", "Price", "Ease of use" ], "additional_feedback": "I like the design.", "recommendation_score": 9 }, { "customer_name": "", "customer_region": "North America", "customer_email": "", "overall_satisfaction": 4, "liked_features": [ "Price", "Ease of use", "Customer support" ], "improvement_areas": [], "additional_feedback": "Needs more features.", "recommendation_score": 6 }, { "customer_name": "Harper Brown", "customer_region": "Europe", "customer_email": "harper.brown@example.com", "overall_satisfaction": 2, "liked_features": [ "Performance", "Design" ], "improvement_areas": [ "Ease of use" ], "additional_feedback": "Needs more features.", "recommendation_score": 2 }, { "customer_name": "Kendall Johnson", "customer_region": "Australia / Oceania", "customer_email": "kendall.johnson@example.com", "overall_satisfaction": 3, "liked_features": [ "Ease of use", "Customer support", "Price" ], "improvement_areas": [ "Performance", "Design" ], "additional_feedback": "Excellent support.", "recommendation_score": 7 }, { "customer_name": "Morgan Brown", "customer_region": "South America", "customer_email": "morgan.brown@example.com", "overall_satisfaction": 4, "liked_features": [ "Ease of use", "Performance", "other" ], "liked_features-Comment": "Reliability", "improvement_areas": [ "Design" ], "additional_feedback": "Pricing is fair.", "recommendation_score": 6 }, { "customer_name": "Quinn Lee", "customer_region": "North America", "customer_email": "quinn.lee@example.com", "overall_satisfaction": 1, "liked_features": [ "Price" ], "improvement_areas": [ "Customer support", "Ease of use", "Design", "Performance" ], "additional_feedback": "Pricing is fair.", "recommendation_score": 0 }, { "customer_name": "", "customer_region": "Europe", "customer_email": "", "overall_satisfaction": 3, "liked_features": [ "Customer support", "Ease of use" ], "improvement_areas": [ "Design", "Performance" ], "additional_feedback": "", "recommendation_score": 4 }, { "customer_name": "Charlie Davis", "customer_region": "Australia / Oceania", "customer_email": "charlie.davis@example.com", "overall_satisfaction": 2, "liked_features": [ "Customer support", "Design" ], "improvement_areas": [ "Performance" ], "additional_feedback": "I like the design.", "recommendation_score": 3 }, { "customer_name": "Logan Garcia", "customer_region": "Asia", "customer_email": "logan.garcia@example.com", "overall_satisfaction": 3, "liked_features": [ "Price" ], "improvement_areas": [ "Ease of use", "Design", "Performance" ], "additional_feedback": "Needs more features.", "recommendation_score": 7 }, { "customer_name": "Finley Davis", "customer_region": "Middle East", "customer_email": "finley.davis@example.com", "overall_satisfaction": 5, "liked_features": [ "Customer support", "Ease of use", "Price", "Performance", "Design", "other" ], "liked_features-Comment": "Documentation", "improvement_areas": [], "additional_feedback": "Pricing is fair.", "recommendation_score": 9 }, { "customer_name": "Emerson Johnson", "customer_region": "Middle East", "customer_email": "emerson.johnson@example.com", "overall_satisfaction": 4, "liked_features": [ "Price", "Customer support", "Performance" ], "improvement_areas": [ "other" ], "improvement_areas-Comment": "Documentation", "additional_feedback": "Pricing is fair.", "recommendation_score": 8 }, { "customer_name": "Jordan Patel", "customer_region": "Asia", "customer_email": "jordan.patel@example.com", "overall_satisfaction": 2, "liked_features": [ "Design", "Customer support" ], "improvement_areas": [ "other" ], "improvement_areas-Comment": "Documentation, customization, compatibility", "additional_feedback": "Could be improved.", "recommendation_score": 3 }, { "customer_name": "Jamie Smith", "customer_region": "Australia / Oceania", "customer_email": "jamie.smith@example.com", "overall_satisfaction": 2, "liked_features": [ "Design", "Price" ], "improvement_areas": [], "additional_feedback": "Needs more features.", "recommendation_score": 3 }, { "customer_name": "Jordan Kim", "customer_region": "South America", "customer_email": "jordan.kim@example.com", "overall_satisfaction": 3, "liked_features": [ "Price" ], "improvement_areas": [ "Ease of use", "Performance" ], "additional_feedback": "Could be improved.", "recommendation_score": 1 }, { "customer_name": "Sam Lee", "customer_region": "Europe", "customer_email": "sam.lee@example.com", "overall_satisfaction": 4, "liked_features": [ "Price", "Customer support", "Design", "Performance" ], "improvement_areas": [ "Ease of use" ], "additional_feedback": "Excellent support.", "recommendation_score": 8 }, { "customer_name": "Finley Smith", "customer_region": "South America", "customer_email": "finley.smith@example.com", "overall_satisfaction": 3, "liked_features": [ "Design", "Ease of use", "Customer support", "Price", "Performance", "other" ], "liked_features-Comment": "Documentation", "improvement_areas": [], "additional_feedback": "", "recommendation_score": 7 }, { "customer_name": "Logan Davis", "customer_region": "Africa", "customer_email": "logan.davis@example.com", "overall_satisfaction": 5, "liked_features": [ "Price" ], "improvement_areas": [], "additional_feedback": "Needs more features.", "recommendation_score": 8 }, { "customer_name": "", "customer_region": "Middle East", "customer_email": "", "overall_satisfaction": 5, "liked_features": [ "Price", "Customer support" ], "improvement_areas": [ "Design", "other" ], "improvement_areas-Comment": "Customization", "additional_feedback": "Pricing is fair.", "recommendation_score": 8 }, { "customer_name": "", "customer_region": "Europe", "customer_email": "", "overall_satisfaction": 3, "liked_features": [ "Customer support", "other" ], "liked_features-Comment": "Documentation", "improvement_areas": [ "Ease of use", "Price" ], "additional_feedback": "Needs more features.", "recommendation_score": 3 }, { "customer_name": "Emerson Garcia", "customer_region": "South America", "customer_email": "emerson.garcia@example.com", "overall_satisfaction": 4, "liked_features": [ "Price", "Design", "Customer support", "other" ], "liked_features-Comment": "Cross-platform support", "improvement_areas": [ "Performance" ], "additional_feedback": "Could be improved.", "recommendation_score": 8 }, { "customer_name": "Dakota Kim", "customer_region": "South America", "customer_email": "dakota.kim@example.com", "overall_satisfaction": 5, "liked_features": [ "Ease of use", "Performance", "Customer support", "Design", "Price" ], "improvement_areas": [], "additional_feedback": "Excellent support.", "recommendation_score": 10 }, { "customer_name": "Avery Brown", "customer_region": "North America", "customer_email": "avery.brown@example.com", "overall_satisfaction": 5, "liked_features": [ "Customer support", "Performance", "Design", "Ease of use", "Price" ], "improvement_areas": [], "additional_feedback": "I like the design.", "recommendation_score": 10 }, { "customer_name": "Kendall Kim", "customer_region": "Europe", "customer_email": "kendall.kim@example.com", "overall_satisfaction": 3, "liked_features": [ "Performance", "Customer support", "Design" ], "improvement_areas": [ "Ease of use", "Price" ], "additional_feedback": "I like the design.", "recommendation_score": 4 } ]; function randomTimestamp(days = 100) { const now = Date.now(); const past = now - days * 24 * 60 * 60 * 1000; return new Date(past + Math.random() * (now - past)).toISOString(); } export const dataFromServer = sampleData.map(item => ({ ...item, timestamp: randomTimestamp() })); ``` ### `src/SurveyDashboardComponent.jsx` ```js import React from "react"; import { Model } from "survey-core"; import { Dashboard } from "survey-analytics"; import "survey-analytics/survey.analytics.css"; import "./index.css"; import { json } from "./json"; import "survey-core/survey-core.min.css"; import { dataFromServer } from "./surveydata"; class SurveyDashboardComponent extends React.Component { componentDidMount() { const survey = new Model(json); // Imitate an asynchronous call that loads data from a server setTimeout(() => { const dashboard = new Dashboard({ questions: survey.getAllQuestions(), data: dataFromServer, dateFieldName: "timestamp", datePeriod: "last30days", items: [ { name: "overall_satisfaction", type: "bullet" }, { name: "recommendation_score", type: "bullet" }, "liked_features", "improvement_areas", { name: "customer_region", type: "pie" }, "additional_feedback" ] }); document.getElementById("loadingIndicator").style.display = "none"; dashboard.render("surveyDashboardContainer"); }, 1000); } render() { return React.createElement("div", { id: "surveyDashboardContainer" }); } } export default SurveyDashboardComponent; ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ .data-loading-indicator-panel { width: 100%; height: 400px; } .data-loading-indicator { position: relative; width: 64px; height: 64px; left: calc((100% - 64px)/ 2); top: calc((100% - 64px)/ 2); animation: data-loading-indicator-spinner 1s infinite linear; } @keyframes data-loading-indicator-spinner { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyDashboardComponent from "./SurveyDashboardComponent"; const root = createRoot(document.getElementById("surveyDashboardComponent")); root.render(); ``` ### `src/json.js` ```js export const json = { "title": "Customer Satisfaction Survey", "description": "We value your feedback! Please take a few minutes to share your experience with our product or service.", "pages": [ { "name": "page1", "title": "General Information", "elements": [ { "type": "text", "name": "customer_name", "title": "Your name (optional)", "placeholder": "Enter your name" }, { "type": "dropdown", "name": "customer_region", "title": "Region", "choices": [ "North America", "South America", "Europe", "Asia", "Africa", "Australia / Oceania", "Middle East" ] }, { "type": "text", "name": "customer_email", "title": "Email (optional)", "inputType": "email" } ] }, { "name": "page2", "title": "Product / Service Feedback", "elements": [ { "type": "rating", "name": "overall_satisfaction", "title": "How satisfied are you with our product/service?", "minRateDescription": "Not satisfied", "maxRateDescription": "Completely satisfied" }, { "type": "checkbox", "name": "liked_features", "title": "Which features do you like the most?", "choices": [ "Ease of use", "Performance", "Design", "Customer support", "Price" ], "separateSpecialChoices": true, "showOtherItem": true, "otherText": "Other", "colCount": 2 }, { "type": "checkbox", "name": "improvement_areas", "title": "Which areas need improvement?", "choicesFromQuestion": "liked_features", "separateSpecialChoices": true, "showOtherItem": true, "otherText": "Other", "colCount": 2 }, { "type": "comment", "name": "additional_feedback", "title": "Additional comments or suggestions" } ] }, { "name": "page3", "title": "Likelihood to Recommend", "elements": [ { "type": "rating", "name": "recommendation_score", "title": "How likely are you to recommend us to a friend or colleague?", "rateCount": 11, "rateMin": 0, "rateMax": 10 } ] } ], "completeText": "Submit", "widthMode": "static", "width": "800px", "headerView": "advanced" }; ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "chart.js": "4.5.1", "survey-analytics": "latest" }, "devDependencies": { "react-scripts": "latest" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] } ``` ## Other Frameworks - [Angular](https://surveyjs.io/dashboard/examples/customer-satisfaction-survey-analysis/angular.md) - [Vue 3](https://surveyjs.io/dashboard/examples/customer-satisfaction-survey-analysis/vue3js.md) - [jQuery](https://surveyjs.io/dashboard/examples/customer-satisfaction-survey-analysis/jquery.md) - [Vanilla JS](https://surveyjs.io/dashboard/examples/customer-satisfaction-survey-analysis/vanillajs.md)