Cart Licenses Contact Support Online Creator Login/Register
Try
Buy
v 1.9.32

Disable the Layout Engine

When the layout engine is disabled, analytics charts are displayed one under another. To view the rest of the charts, scroll the page down.


                        


        
            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",
    }
];

function LayoutEngine() {
    return {
        start: function() {},
        stop: function() {},
        update: function() {},
        destroy: function() {}
    };
}


var visPanel = new SurveyAnalytics.VisualizationPanel(
    allQuestions,
    data,
    {
        labelTruncateLength: 27,
        layoutEngine: new LayoutEngine(),
        allowDynamicLayout: false
    }
);
visPanel.showHeader = true;
visPanel.render(surveyResult);

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Disable the Layout Engine, 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>
    
<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>

.sa-question-layouted {
    width: 100%;
    position: relative;
}
; ; ;