Interactive Survey Data Dashboard

Loading...
Loading...
Loading...

                        


        
            var json = {
  "elements": [{
    "type": "radiogroup",
    "name": "product_discovering",
    "title": "How did you first discover our product?",
    "choices": [
      "Search engine", "GitHub", "Friend or colleague",
      { "value": "Redit", "text": "Reddit" }, "Medium", "Twitter", "Facebook"
    ]
  }, {
    "type": "radiogroup",
    "name": "useproduct",
    "title": "Do you currently use our libraries?",
    "isRequired": true,
    "choices": [ "Yes", "No" ]
  }, {
    "type": "checkbox",
    "name": "uselibraries",
    "title": "Which libraries do you use?",
    "choices": [
      { "text": "Form Library", "value": "Survey Library (Runner)" },
      { "text": "Survey Creator", "value": "Survey Creator (Designer)" }
    ]
  }, {
    "type": "rating",
    "name": "nps_score",
    "title": "How likely are you to recommend our product to a friend or colleague?"
  }, {
    "type": "radiogroup",
    "name": "product_recommend",
    "title": "Have you recommended our product to anyone?",
    "choices": [ "Yes", "No" ]
  }, {
    "type": "checkbox",
    "name": "javascript_frameworks",
    "title": "Which JavaScript frameworks do you use?",
    "hasOther": true,
    "choices": [
      "React", "Angular", "jQuery", "Vue", "Meteor", "Ember",
      "Backbone", "Knockout", "Aurelia", "Polymer", "Mithril"
    ]
  }, {
    "type": "checkbox",
    "name": "backend_language",
    "title": "Which web backend programming languages do you use?",
    "hasOther": true,
    "choices": [
      "Java", "Python", "Node.js", "Go",
      "Django", { "value": "Asp.net", "text": "ASP.NET" }, "Ruby"
    ]
  }, {
    "type": "checkbox",
    "name": "supported_devices",
    "title": "Which device types do you need to support?",
    "isRequired": true,
    "choices": [
      "Desktop", { "value": "Tablete", "text": "Tablet" }, "Mobile"
    ]
  }]
};
        

const survey = new Survey.Model(json);
const npsQuestionNames = [ "product_recommend", "nps_score" ];
const customerSegmentationQuestionNames = [ "useproduct", "product_discovering", "uselibraries" ];
const frameworksQuestionNames = [ "javascript_frameworks", "backend_language", "supported_devices" ];

let vizPanels = [];

function createVizPanels(data, ...args) {
  const panels = [];
  args.forEach((questions) => {
    panels.push(new SurveyAnalytics.VisualizationPanel(questions, data));
  });
  return panels;
}

function renderVizPanels(panels) {
  for (let i = 0; i < panels.length; i++) {
    const node = document.getElementById(`vizPanel${i + 1}`);
    panels[i].render(node);
    document.getElementById(`loadingIndicator${i + 1}`).style.display = "none";
  }
}

fetch("https://api.surveyjs.io/private/surveys/nps/")
  .then(response => response.json())
  .then(data => {
    const allQuestions = survey.getAllQuestions();
    const customerSegmentationQuestions = allQuestions.filter(question => customerSegmentationQuestionNames.indexOf(question.name) > -1 );
    const npsQuestions = allQuestions.filter(question => npsQuestionNames.indexOf(question.name) > -1 );
    const frameworksQuestions = allQuestions.filter(question => frameworksQuestionNames.indexOf(question.name) > -1 );

    vizPanels = createVizPanels(
      data.Data,
      customerSegmentationQuestions,
      npsQuestions,
      frameworksQuestions
    );

    renderVizPanels(vizPanels);
  });

document.getElementsByClassName("tablinks")[0].click();

function openTabNo(evt, number) {
  const tabcontent = document.getElementsByClassName("tabcontent");
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  const tablinks = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(`tab${number}`).style.display = "block";
  const vizPanel = vizPanels[number-1];
  if (vizPanel) {
    vizPanel.refresh();
  }
  evt.currentTarget.className += " active";
}
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Interactive Survey Data Dashboard, Reactjs Example | SurveyJS</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://cdn.rawgit.com/inexorabletash/polyfill/master/typedarray.js"></script>

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script src="https://unpkg.com/wordcloud@1.1.0/src/wordcloud2.js"></script>        <link href="/DevBuilds/survey-analytics/survey.analytics.min.css" rel="stylesheet" />
        <script src="/DevBuilds/survey-analytics/survey.analytics.min.js"></script>

</head>
<body style="margin: 0">
    
<div class="tabs">
    <button class="tablinks" onclick="openTabNo(event, 1)">Customer Segmentation</button>
    <button class="tablinks" onclick="openTabNo(event, 2)">Net Promoter Score</button>
    <button class="tablinks" onclick="openTabNo(event, 3)">Frameworks and Devices</button>
</div>

<div id="tab1" class="tabcontent">
    <div id="loadingIndicator1">
        <div class="sv-loading-indicator">Loading...</div>
    </div>
    <div id="vizPanel1"></div>
</div>

<div id="tab2" class="tabcontent">
    <div id="loadingIndicator2">
        <div id="sv-loading-indicator">Loading...</div>
    </div>
    <div id="vizPanel2"></div>
</div>

<div id="tab3" class="tabcontent">
    <div id="loadingIndicator3">
        <div id="sv-loading-indicator">Loading...</div>
    </div>
    <div id="vizPanel3"></div>
</div>            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>

.tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tabs button:hover {
  background-color: #ddd;
}

.tabs button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

SurveyJS Dashboard is a GUI designed to simplify survey result analysis. End users can customize their survey data dashboards as they see fit: drag and drop charts to reorder them, click bars to filter chart data, change the sort order, hide unwanted charts, etc. All these customizations are reversible, which means that end users can undo a customization that they just did. However, SurveyJS Dashboard also supports permanent customizations that users cannot undo. This example demonstrates one of such customizations—charts that are grouped by type and displayed within different tabs.

Charts are rendered on Visualization Panels, where each chart visualizes answers to a single survey question. To group charts, create multiple Visualization Panels. The first argument of the VisualizationPanel constructor accepts an array of survey questions that this panel should visualize. Call the Survey's getAllQuestions() method to get an array of all survey questions. Pass only the needed questions to the VisualizationPanel constructor. Refer to the Fetch API call in the JavaScript tab for a code example.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.