Survey.StylesManager.applyTheme("modern");
var json = {
"completedHtml": "<p style='font-size:24px;'>Thank you for completing the survey! (please wait for analytics to load ...)<p>",
"pages": [
{
"name": "page_info",
"elements": [
{
"type": "custom-question",
"name": "custom",
"title": "This is a custom question with two values - min and max"
},
{
"type": "matrix",
"name": "Quality",
"title": "Please indicate if you agree or disagree with the following statements",
"columns": [
{
"value": 1,
"text": "Strongly Disagree"
},
{
"value": 2,
"text": "Disagree"
},
{
"value": 3,
"text": "Neutral"
},
{
"value": 4,
"text": "Agree"
},
{
"value": 5,
"text": "Strongly Agree"
}
],
"rows": [
{
"value": "affordable",
"text": "Product is affordable"
},
{
"value": "does what it claims",
"text": "Product does what it claims"
},
{
"value": "better then others",
"text": "Product is better than other products on the market"
},
{
"value": "easy to use",
"text": "Product is easy to use"
}
]
},
{
"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
},
{
"type": "radiogroup",
"name": "developer_count",
"visibleIf": "{organization_type} != 'Hobbyist'",
"title": "How many software developers are in your organization?",
"choices": [ "1", "2", "3-5", "6-10", "> 10" ]
}
]
}
]
};
var survey = new Survey.Model(json);
var allQuestions = survey.getAllQuestions();
var data = [
{
Quality: {
affordable: "3",
"does what it claims": "4",
"better then others": "5",
"easy to use": "1" },
custom: { min: 4, max: 10 },
bool: true,
organization_type: "In-house",
developer_count: "6-10"
},
{
Quality: {
affordable: "3",
"does what it claims": "4",
"better then others": "2",
"easy to use": "3",
},
custom: { min: 3, max: 9 },
bool: true,
organization_type: "other",
developer_count: "3-5",
}
];
var visPanel = new SurveyAnalytics.VisualizationPanel(
allQuestions,
data,
{labelTruncateLength: 27}
);
visPanel.showHeader = true;
visPanel.render(surveyResult);
<!DOCTYPE html>
<html lang="en">
<head>
<title>initialization with locale data, jQuery Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
<link href="/DevBuilds/survey-knockout/modern.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>
<div>
</div> <div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>