--- title: Smartphone User Experience Survey Analysis product: Dashboard description: Learn how to analyze smartphone user experience survey results using SurveyJS Dashboard. This demo shows an interactive dashboard for visualizing and exploring mobile device feedback, including multidimensional insights with radar charts. framework: React source: https://surveyjs.io/dashboard/examples/smartphone-user-experience-survey-analysis/reactjs index: https://surveyjs.io/dashboard/examples/overview.md --- # Smartphone User Experience Survey Analysis (React) Smartphone experience surveys help device manufacturers and mobile app developers assess user satisfaction, identify feature gaps, and pinpoint performance bottlenecks. SurveyJS Dashboard offers the analytical tools needed to explore this feedback. Alongside standard bar and pie charts, it includes a radar chart (also known as a spider or web chart), which is ideal for visualizing ranked or multidimensional responses. ## Files ### `public/index.html` ```html
``` ### `src/surveydata.js` ```js const sampleData = [ { "overall-satisfaction": 4, "smartphone-features": [ "Low price", "Powerful CPU", "Plenty of storage capacity", "Long battery life", "High-quality camera", "Large screen size", "High durability" ], "upgrade-reasons": [ "New features", "Lower price" ] }, { "overall-satisfaction": 3, "smartphone-features": [ "High durability", "Large screen size", "Powerful CPU", "Plenty of storage capacity", "Long battery life", "High-quality camera", "Low price" ], "upgrade-reasons": [ "Longer battery life", "Better display" ] }, { "overall-satisfaction": 5, "smartphone-features": [ "High-quality camera", "Long battery life", "Low price", "Large screen size", "Plenty of storage capacity", "High durability", "Powerful CPU" ], "upgrade-reasons": [ "Better camera", "5G support" ] }, { "overall-satisfaction": 5, "smartphone-features": [ "Powerful CPU", "High durability", "Low price", "Plenty of storage capacity", "Long battery life", "Large screen size", "High-quality camera" ], "upgrade-reasons": [ "New features", "Longer battery life" ] }, { "overall-satisfaction": 2, "smartphone-features": [ "Plenty of storage capacity", "Long battery life", "Large screen size", "High-quality camera", "Powerful CPU", "Low price", "High durability" ], "upgrade-reasons": [ "Better camera", "Longer battery life" ] }, { "overall-satisfaction": 4, "smartphone-features": [ "Powerful CPU", "High-quality camera", "High durability", "Low price", "Long battery life", "Plenty of storage capacity", "Large screen size" ], "upgrade-reasons": ["Better camera", "New features"] }, { "overall-satisfaction": 3, "smartphone-features": [ "Low price", "High durability", "Large screen size", "Long battery life", "Powerful CPU", "High-quality camera", "Plenty of storage capacity" ], "upgrade-reasons": ["More storage", "Better display"] }, { "overall-satisfaction": 5, "smartphone-features": [ "High-quality camera", "Long battery life", "Powerful CPU", "Large screen size", "Low price", "High durability", "Plenty of storage capacity" ], "upgrade-reasons": ["5G support"] }, { "overall-satisfaction": 2, "smartphone-features": [ "Long battery life", "High durability", "Low price", "High-quality camera", "Plenty of storage capacity", "Powerful CPU", "Large screen size" ], "upgrade-reasons": ["Faster performance", "Longer battery life"] }, { "overall-satisfaction": 4, "smartphone-features": [ "Large screen size", "Plenty of storage capacity", "Long battery life", "Low price", "High-quality camera", "Powerful CPU", "High durability" ], "upgrade-reasons": ["New features", "More storage"] }, { "overall-satisfaction": 1, "smartphone-features": [ "Low price", "Large screen size", "High-quality camera", "Powerful CPU", "High durability", "Plenty of storage capacity", "Long battery life" ], "upgrade-reasons": ["Better camera", "Better display", "5G support"] }, { "overall-satisfaction": 5, "smartphone-features": [ "Plenty of storage capacity", "Long battery life", "Large screen size", "Powerful CPU", "High-quality camera", "High durability", "Low price" ], "upgrade-reasons": ["Better camera"] }, { "overall-satisfaction": 3, "smartphone-features": [ "Long battery life", "Low price", "High-quality camera", "High durability", "Powerful CPU", "Large screen size", "Plenty of storage capacity" ], "upgrade-reasons": ["New features"] }, { "overall-satisfaction": 4, "smartphone-features": [ "High durability", "Powerful CPU", "High-quality camera", "Large screen size", "Long battery life", "Plenty of storage capacity", "Low price" ], "upgrade-reasons": ["Faster performance", "More storage"] }, { "overall-satisfaction": 2, "smartphone-features": [ "High-quality camera", "Large screen size", "Low price", "High durability", "Long battery life", "Powerful CPU", "Plenty of storage capacity" ], "upgrade-reasons": ["Better display"] }, { "overall-satisfaction": 5, "smartphone-features": [ "Powerful CPU", "Long battery life", "High durability", "Plenty of storage capacity", "High-quality camera", "Large screen size", "Low price" ], "upgrade-reasons": ["New features", "5G support"] }, { "overall-satisfaction": 3, "smartphone-features": [ "Powerful CPU", "Low price", "High durability", "Long battery life", "Plenty of storage capacity", "High-quality camera", "Large screen size" ], "upgrade-reasons": ["Better camera"] }, { "overall-satisfaction": 4, "smartphone-features": [ "High durability", "Low price", "Powerful CPU", "Large screen size", "High-quality camera", "Plenty of storage capacity", "Long battery life" ], "upgrade-reasons": ["Better display", "New features"] }, { "overall-satisfaction": 1, "smartphone-features": [ "High-quality camera", "Powerful CPU", "Long battery life", "Plenty of storage capacity", "Low price", "High durability", "Large screen size" ], "upgrade-reasons": ["Faster performance", "More storage"] }, { "overall-satisfaction": 2, "smartphone-features": [ "Low price", "High durability", "Plenty of storage capacity", "Powerful CPU", "Large screen size", "Long battery life", "High-quality camera" ], "upgrade-reasons": ["New features"] }, { "overall-satisfaction": 5, "smartphone-features": [ "High-quality camera", "Large screen size", "Long battery life", "Plenty of storage capacity", "High durability", "Low price", "Powerful CPU" ], "upgrade-reasons": ["Better camera", "Better display"] }, { "overall-satisfaction": 3, "smartphone-features": [ "Low price", "Plenty of storage capacity", "Powerful CPU", "Large screen size", "High-quality camera", "Long battery life", "High durability" ], "upgrade-reasons": ["More storage"] }, { "overall-satisfaction": 4, "smartphone-features": [ "Large screen size", "High durability", "Long battery life", "High-quality camera", "Plenty of storage capacity", "Powerful CPU", "Low price" ], "upgrade-reasons": ["Better display"] }, { "overall-satisfaction": 2, "smartphone-features": [ "Plenty of storage capacity", "Powerful CPU", "Low price", "High-quality camera", "Long battery life", "Large screen size", "High durability" ], "upgrade-reasons": ["Longer battery life", "Faster performance"] }, { "overall-satisfaction": 4, "smartphone-features": [ "High-quality camera", "Powerful CPU", "Large screen size", "Long battery life", "Plenty of storage capacity", "Low price", "High durability" ], "upgrade-reasons": ["Better camera", "5G support"] }, { "overall-satisfaction": 5, "smartphone-features": [ "Plenty of storage capacity", "Long battery life", "High durability", "Low price", "Powerful CPU", "Large screen size", "High-quality camera" ], "upgrade-reasons": ["New features"] }, { "overall-satisfaction": 3, "smartphone-features": [ "High-quality camera", "Plenty of storage capacity", "Low price", "Long battery life", "Powerful CPU", "High durability", "Large screen size" ], "upgrade-reasons": ["More storage", "Better display"] }, { "overall-satisfaction": 4, "smartphone-features": [ "Powerful CPU", "Long battery life", "Low price", "Plenty of storage capacity", "High durability", "High-quality camera", "Large screen size" ], "upgrade-reasons": ["Better camera"] }, { "overall-satisfaction": 2, "smartphone-features": [ "Large screen size", "Long battery life", "High durability", "Powerful CPU", "Low price", "High-quality camera", "Plenty of storage capacity" ], "upgrade-reasons": ["New features", "Faster performance"] }, { "overall-satisfaction": 5, "smartphone-features": [ "High durability", "Powerful CPU", "Plenty of storage capacity", "Long battery life", "High-quality camera", "Large screen size", "Low price" ], "upgrade-reasons": ["Better display"] }, { "overall-satisfaction": 3, "smartphone-features": [ "Long battery life", "Powerful CPU", "Plenty of storage capacity", "Low price", "High-quality camera", "High durability", "Large screen size" ], "upgrade-reasons": ["Better camera", "More storage"] }, { "overall-satisfaction": 4, "smartphone-features": [ "Large screen size", "High-quality camera", "Low price", "Long battery life", "High durability", "Powerful CPU", "Plenty of storage capacity" ], "upgrade-reasons": ["5G support"] }, { "overall-satisfaction": 1, "smartphone-features": [ "Powerful CPU", "Long battery life", "High-quality camera", "Low price", "Large screen size", "High durability", "Plenty of storage capacity" ], "upgrade-reasons": ["Faster performance"] }, { "overall-satisfaction": 2, "smartphone-features": [ "Low price", "Large screen size", "Long battery life", "High-quality camera", "Plenty of storage capacity", "High durability", "Powerful CPU" ], "upgrade-reasons": ["Better camera", "More storage"] }, { "overall-satisfaction": 5, "smartphone-features": [ "High durability", "High-quality camera", "Long battery life", "Powerful CPU", "Plenty of storage capacity", "Large screen size", "Low price" ], "upgrade-reasons": ["Better display", "New features"] }, { "overall-satisfaction": 4, "smartphone-features": [ "Low price", "Plenty of storage capacity", "High durability", "High-quality camera", "Large screen size", "Long battery life", "Powerful CPU" ], "upgrade-reasons": ["More storage"] }, { "overall-satisfaction": 3, "smartphone-features": [ "Powerful CPU", "Long battery life", "Low price", "Large screen size", "High-quality camera", "High durability", "Plenty of storage capacity" ], "upgrade-reasons": ["5G support"] }, { "overall-satisfaction": 4, "smartphone-features": [ "High durability", "Long battery life", "Large screen size", "Powerful CPU", "Plenty of storage capacity", "High-quality camera", "Low price" ], "upgrade-reasons": ["Better camera", "Better display"] }, { "overall-satisfaction": 2, "smartphone-features": [ "High-quality camera", "Powerful CPU", "Plenty of storage capacity", "Low price", "Large screen size", "High durability", "Long battery life" ], "upgrade-reasons": ["New features"] }, { "overall-satisfaction": 5, "smartphone-features": [ "Powerful CPU", "High-quality camera", "Plenty of storage capacity", "High durability", "Large screen size", "Low price", "Long battery life" ], "upgrade-reasons": ["Better camera"] }, { "overall-satisfaction": 4, "smartphone-features": [ "Long battery life", "Large screen size", "High durability", "Powerful CPU", "Low price", "Plenty of storage capacity", "High-quality camera" ], "upgrade-reasons": ["Better display", "5G support"] } ]; 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", items: [ { name: "overall-satisfaction", type: "gauge" }, { name: "smartphone-features", type: "radar", allowChangeType: false }, "upgrade-reasons" ] }); 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": "Smartphone Feature Experience Assessment", "pages": [ { "name": "page1", "elements": [ { "type": "rating", "name": "overall-satisfaction", "title": "How satisfied are you with your smartphone overall?", "minRateDescription": "Very dissatisfied", "maxRateDescription": "Very satisfied" }, { "type": "ranking", "name": "smartphone-features", "title": "Please rank the following smartphone features from the most important to the least", "choices": [ "Long battery life", "Plenty of storage capacity", "High-quality camera", "Powerful CPU", "Large screen size", "High durability", "Low price" ] }, { "type": "checkbox", "name": "upgrade-reasons", "title": "Which reasons would motivate you to upgrade your phone?", "choices": [ "Better camera", "Longer battery life", "Faster performance", "More storage", "Better display", "5G support", "New features", "Lower price" ] } ] } ] } ; ``` ### `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/smartphone-user-experience-survey-analysis/angular.md) - [Vue 3](https://surveyjs.io/dashboard/examples/smartphone-user-experience-survey-analysis/vue3js.md) - [jQuery](https://surveyjs.io/dashboard/examples/smartphone-user-experience-survey-analysis/jquery.md) - [Vanilla JS](https://surveyjs.io/dashboard/examples/smartphone-user-experience-survey-analysis/vanillajs.md)