Gauge Chart Customization
loading...
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>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.