Disable the Layout Engine


                        


        
            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 style="margin: 0">
    
<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;
}

SurveyJS Analytics includes a layout engine that arranges analytics charts on a page. This engine is designed to use screen space efficiently. If you disable the engine, charts are displayed one under the other.

To disable the built-in layout engine, override it with a custom engine that implements the start, stop, update, and destroy functions, but these functions should be empty. You can refer to the LayoutEngine function for a code example. To apply the custom engine, assign its instance to the VisualizationPanel's layoutEngine configuration property.

If you disable the built-in layout engine, users cannot drag and drop charts to change the layout. Set the allowDynamicLayout configuration property to false to hide the drag-and-drop icon.

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.