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?",
          "showOtherItem": 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, options) {

    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, dataProvider: options.dataProvider
    }, "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>
    <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 class="sv-loading-indicator"><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;
    ;
}
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

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.