Gauge Chart Customization

                        


        
            var json = {
  "elements": [
    {
      "type": "rating",
      "name": "nps_score",
      "title": "How likely are you to recommend SurveyJS to a friend or colleague?",
      "isRequired": true,
      "rateMin": 0,
      "rateMax": 10,
      "minRateDescription": "Most unlikely",
      "maxRateDescription": "Most likely"
    }
  ]
};
        

    var survey = new Survey.Model(json);

    var surveyResultNode = document.getElementById("surveyResult");
    surveyResultNode.innerHTML = "";

    SurveyAnalytics.VisualizationManager.unregisterVisualizer("rating", SurveyAnalytics.HistogramPlotly);


    $.get("https://api.surveyjs.io/private/Surveys/getSurveyNPCResults/", function (data) {
        function generateValues(maxValue, stepsCount) {
          const values = [];

          for (let i = 0; i < stepsCount; i++) {
            values.push(maxValue / stepsCount);
          }

          values.push(maxValue);

          return values;
        }

        function generateText(maxValue, minValue, stepsCount) {
          return [
            "very height (" + maxValue + ")",
            "height",
            "medium",
            "low",
            "very low (" + minValue + ")",
          ];
        }

        function getCustomData(model, level, arrowColor) {
          const question = model.question;
          const name = model.name;

          const maxValue = question.rateMax;
          const minValue = question.rateMin;
          const stepsCount = SurveyAnalytics.GaugePlotly.stepsCount;
          const values = generateValues(maxValue, stepsCount);
          const text = generateText(maxValue, minValue, stepsCount);
          const colors = model.generateColors(maxValue, minValue, stepsCount);

          return [
            {
              type: "scatter",
              x: [0],
              y: [0],
              marker: {
                size: 28,
                color: arrowColor,
              },
              name: name,
              text: level,
              showlegend: false,
              hoverinfo: "text+name",
            },
            {
              values: values,
              rotation: 90,
              text: text,
              textinfo: "text",
              textposition: "inside",
              // textfont: {
              //   size: 20
              // },
              marker: {
                colors: colors,
              },
              hoverinfo: "skip",
              hole: 0.5,
              type: "pie",
              showlegend: false,
            },
          ];
        }

        function getCustomLayout(model, level, arrowColor) {
          const maxValue = model.question.rateMax;
          const degrees = maxValue - level;
          const radius = 0.5;
          const radians = (degrees * Math.PI) / maxValue;
          const x = radius * Math.cos(radians);
          const y = radius * Math.sin(radians);

          // Path: may have to change to create a better triangle
          const mainPath = "M -.0 -0.025 L .0 0.025 L ",
            pathX = String(x),
            space = " ",
            pathY = String(y),
            pathEnd = " Z";
          const path = mainPath.concat(pathX, space, pathY, pathEnd);

          return {
            shapes: [
              {
                type: "path",
                path: path,
                fillcolor: arrowColor,
                line: {
                  color: arrowColor,
                },
              },
            ],
            title: Math.round(level),
            height: 600,
            width: 600,
            xaxis: {
              zeroline: false,
              showticklabels: false,
              showgrid: false,
              range: [-1, 1],
            },
            yaxis: {
              zeroline: false,
              showticklabels: false,
              showgrid: false,
              range: [-1, 1],
            },
            plot_bgcolor: model.backgroundColor,
            paper_bgcolor: model.backgroundColor,
          };
        }

        SurveyAnalytics.PlotlySetup.onPlotCreating.add((model, options) => {
          if (model.chartType !== "gauge") return;
          const arrowColor = "#4e6198";
          const level = options.data[0].value;
          options.data = getCustomData(model, level, arrowColor);
          options.layout = getCustomLayout(model, level, arrowColor);
        });
        var visPanel = new SurveyAnalytics.VisualizationPanel(
            survey.getAllQuestions(),
            data.Data,
            { labelTruncateLength: 27 }
        );
        visPanel.showHeader = true;

        $("#loadingIndicator").hide();

        visPanel.render(surveyResultNode);
    });

                    

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gauge Chart Customization, 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>

</div>

<div id="loadingIndicator">
    <span>
        <div class="sv-loading-indicator"><strong>loading...</strong><span></span></div>
    </span>
</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>