Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.44

Poll visualizer

loading...

                        


        
            var json = {
  "pages": [
    {
      "name": "page_info",
      "elements": [
        {
          "type": "radiogroup",
          "name": "organization_type",
          "title": "Which of the following best describes you or your organization?",
          "hasOther": true,
          "choices": [
            {
              "value": "ISV",
              "text": "ISV (building commercial/shrink wrapped software)"
            },
            {
              "value": "Consulting",
              "text": "Software consulting firm (provide development services to other organizations)"
            },
            {
              "value": "Custom",
              "text": "Custom software development (as a freelancer/contractor)"
            },
            {
              "value": "In-house",
              "text": "In-house software development"
            },
            {
              "value": "Hobbyist",
              "text": "Hobbyist (develop apps for personal use)"
            }
          ],
          "colCount": 2
        }
      ]
    }
  ]
};
        

// Custom visualizer for poll results
function PollVisualizer(question, data) {

    var renderContent = function (contentContainer, visualizer) {
        var answersData = visualizer.getAnswersData();
        var datasets = answersData.datasets;
        var labels = answersData.labels;
        var colors = answersData.colors;
        var texts = answersData.texts;
        var seriesLabels = answersData.seriesLabels;
        var hasSeries = seriesLabels.length > 1;

        var emptyTextNode = SurveyAnalytics.DocumentHelper.createElement("p", "", {
        innerHTML: SurveyAnalytics.localization.getString("noResults"),
        });

        if (datasets.length === 0 || datasets[0].length === 0) {
            contentContainer.appendChild(emptyTextNode);
            return;
        }

        datasets.forEach(function(data, idx) {
            var tableNode = (
                SurveyAnalytics.DocumentHelper.createElement("table", "sa-poll-table")
            );

            tableNode.style.backgroundColor = visualizer.backgroundColor;

            data.forEach(function(rowData, index) {
                var row = SurveyAnalytics.DocumentHelper.createElement("tr");
                var labelCell = SurveyAnalytics.DocumentHelper.createElement("td", "sa-poll-table__cell", {
                textContent: labels[index] + " - " + texts[idx][index] + "%" + " (" + rowData + " votes)",
                });
                row.appendChild(labelCell);
                tableNode.appendChild(row);

                row = SurveyAnalytics.DocumentHelper.createElement("tr");
                var sparklineCell = SurveyAnalytics.DocumentHelper.createElement("td", "sa-poll-table__cell");
                sparklineCell.colspan="3";
                var outerBar = SurveyAnalytics.DocumentHelper.createElement("div", "sa-poll-sparkline");
                var innerBar = SurveyAnalytics.DocumentHelper.createElement("div", "sa-poll-sparkline-value");
                innerBar.style.width = texts[idx][index] + "%";
                outerBar.appendChild(innerBar);
                sparklineCell.appendChild(outerBar);
                row.appendChild(sparklineCell);
                tableNode.appendChild(row);
            });

            contentContainer.appendChild(tableNode);
        });
    };
    var visualizer = new SurveyAnalytics.SelectBase(question, data, {
        renderContent: renderContent
    }, "pollVisualizer");
    visualizer.answersOrder = "asc";
    visualizer.showPercentages = true;
    return visualizer;
}

// Unregister default radiogroup visualizer
SurveyAnalytics
    .VisualizationManager
    .unregisterVisualizer("radiogroup", SurveyAnalytics.SelectBasePlotly);

// Register custom visualizer for the given question type
SurveyAnalytics
    .VisualizationManager
    .registerVisualizer("radiogroup", PollVisualizer);

// Set localized title of this visualizer
SurveyAnalytics
    .localization
    .locales["en"]["visualizer_pollVisualizer"] = "Poll visualizer";

var survey = new Survey.Model(json);
var allQuestions = survey.getAllQuestions();

var panelNode = document.getElementById("vizPanel");
panelNode.innerHTML = "";

var data = [
    {
        organization_type: "In-house",
    }, {
        organization_type: "other",
    }, {
        organization_type: "Hobbyist",
    }, {
        organization_type: "Hobbyist",
    }, {
        organization_type: "Hobbyist",
    }, {
        organization_type: "Consulting",
    }, {
        organization_type: "In-house",
    }, {
        organization_type: "Consulting",
    }, {
        organization_type: "Hobbyist",
    }, {
        organization_type: "Hobbyist",
    }, {
        organization_type: "ISV",
    }, {
        organization_type: "ISV",
    }, {
        organization_type: "Custom",
    }, {
        organization_type: "ISV",
    }, {
        organization_type: "Custom",
    }
];

var visPanel = new SurveyAnalytics.VisualizationPanel(allQuestions, data, {allowDynamicLayout: false, allowHideQuestions: false});
visPanel.render(panelNode);
$("#loadingIndicator").hide();

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Poll visualizer, Reactjs Survey Library Example</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 id="loadingIndicator">
    <span>
        <div id="loading"><strong>loading...</strong><span></span></div>
    </span>
</div>
<div id="vizPanel"></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>

.sa-toolbar, .sa-visualizer__footer {
    display: none;
}

.sa-poll-table {
    width: 100%;
    font-family: SegoeUI, Arial, sans-serif;
    font-size: 14px;
    color: #404040;
    /* border-collapse: collapse; */
    background-color: #f7f7f7;
}

.sa-poll-table__cell {
    padding: 8px;
    min-height: 34px;
}

.sa-poll-table__cell-value {
    text-align: right;
    min-width: 30px;
}

.sa-poll-table__cell-header {
    font-weight: bold;
}

.sa-poll-sparkline {
    min-width: 100px;
    height: 24px;
    border: 1px solid #1ab394;
    ;
    border-radius: 5px;
}

.sa-poll-sparkline-value {
    height: 100%;
    background-color: #1ab394;
    ;
}

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.