Analytics Sample Project (survey.analytics.js)(MVC)

Yes, we would love to participate in that. What are the next steps in setting this up? Even some rough documentation on how you are intending clients using it could get us started.

getSurveyNPCResults seems to format the responses in a special format. How is this accomplished? Normally when we save the survey results it doesn't look like that. Is that transformation done in your API? Or on save?

getSurveyNPCResults - it the list of Survey JSON results as it is. If I am not mistaken. They are taken from our Azure database, from the real survey.
I asked a developer who is working on SurveyJS Analytics Library to work with you in this ticket.

Thank you,
Andrew
SurveyJS Team

Hello! Thank you for the interest. As Andrew said above getSurveyNPCResults api request just returns the array of survey result JSON objects. We are going to release the analytics library as npm package ( or script from our cdn) and create a standalone example.

Thank you,
Dmitry
SurveyJS Team

We may put our library into our cdn. Will it work for you?

Thank you,
Andrew
SurveyJS Team

I've put the analytics library to our cdn and created the standalone example: https://plnkr.co/edit/bCk64wdvOLShXkPyvGfk?p=preview. Please feel free to fork, modify it and ask additional questions.

Dmitry,

I have tried to recreate this example in Angular 8 but I get stuck at some point with the error:
'core.js:3926 ERROR TypeError: Cannot read property 'ItemValue' of undefined
at selectBase.ts:88'

Also I have some errors in the .ts file such as 'cannot find the name SurveyAnalytics' but this does not result in an error while running 'ng serve'.

To improve the import possibilities into Angular project, I was wondering if you are planning to upload this library as npm package?

Hello! I've managed to reproduce the bug in the plunker above. The survey.analytics.js script should runs after the survey.core.js script.

HTML
<link href="https://surveyjs.azureedge.net/1.1.1/survey.css" type="text/css" rel="stylesheet"/>
<link href="https://surveyjs.azureedge.net/1.1.1/survey.analytics.css" rel="stylesheet"/>

<script src="https://surveyjs.azureedge.net/1.1.1/survey.core.js"></script>

<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>

<script src="https://surveyjs.azureedge.net/1.1.1/survey.analytics.js"></script>

Could you please check it? Probably it will help.

Thanks.

I tried but I could not manage. I am loading the survey-core via npm package. If I try to include another script tag with survey.core.js I get an error:

'ERROR ReferenceError: $ is not defined
at Object.widgetIsLoaded (surveyjs-widgets.js:8599)
at QuestionCustomWidget.isLibraryLoaded'

Dmitry,

Finally got around the issues of loading the external libraries. This involved implementing the following post:
Angular: Load External JavaScript File Dynamically

I noticed that the results loaded in some cases incorrectly. Then I tried to wait until each external library was done loading, instead of using the Promise.all() approach from the post I mentioned:

return scripts.reduce((p, script) => {
return p.then(() => this.loadScript(script));
}, Promise.resolve());

Now I can use the survey-analytics without errors on every time loading the page.

The two most important things I am trying now:

• customize the colors
• text on some charts is not readable (see screenshot)

If you have any suggestions, please let me know

Hello! We've fixed our build and released it on NPM. So now you can use it like this without any tricks:

Code
npm i survey-analytics

JavaScript
import * as SurveyAnalytics from "survey-analytics";

Also I've added an example of using to our angular-cli exaple, please check: https://github.com/surveyjs/surveyjs_angular_cli/blob/master/src/app/survey.analytics.component.ts

As for you suggestions. I will work on it and let you know. Thank you.

We've fixed the problem with long labels and implented customColors property:

JavaScript
SurveyAnalytics.VisualizerBase.customColors = ["red", "green", "blue"];

var visPanel = new SurveyAnalytics.VisualizationPanel( ... );

The changes will be available in the next minor update. Thank you.

Thanks, this is nice to be able to set custom colors!

It would also be nice to be able to customize (or better said, localize) the text on the gauge charts (the five standard text labels).

Hello,

I've added callback for label texts:

TypeScript
generateText(maxValue: number, minValue: number, stepsCount: number) {
  let texts: any = [];

  if (stepsCount === 5) {
    texts = [
      "very high (" + maxValue + ")",
      "high",
      "medium",
      "low",
      "very low (" + minValue + ")"
    ];
  } else {
    texts.push(maxValue);
    for (let i = 0; i < stepsCount - 2; i++) {
      texts.push("");
    }
    texts.push(minValue);
  }

  if (!!GaugePlotly.generateTextsCallback) {
    return GaugePlotly.generateTextsCallback(
      this.question,
      maxValue,
      minValue,
      stepsCount,
      texts
    );
  }

  return texts;
}

It will be available in the nearest update.

Thanks, Serge
SurveyJS Team

Hello Roeland, after the investigation we are going to change that gauge to another one:

In fact that new type of gauge has a lot of configs we can provide. What do you think?

And also please check the corresponding doc page of the PlotlyJS https://plot.ly/javascript/indicator/ There are some other gauge/indicator types there.

Hi Dmitry,

I haven't responded quickly because I'm out of office currently. I like the new gauge chart also. This one will not have any text labels then? That will be easier to handle in many different countries, and not knowing how many steps people have used in the question (the standard is 5, but it can be changed). Maybe the lowest and highest value can take the label from the question definition, if it was provided.

I presume that you are now calculating an average over all responses on this question and displaying it on gauge. There is another interesting chart to be made from the data, namely the distribution of different responses. Say we would like to see how many times the question was answered with 1,2,3,4 or 5. Charts would be similar to the other "choice" questions. So then you can choose between gauge (showing average) and bar/pie chart for distribution.

I have some additional comments & questions:

• there does not seem to be a visualization for boolean questions. Can it be represented as pie chart? (% response yes/no)
• if you set the custom colors for the charts, does this also affect the colors of the word cloud?
• would it be possible, with some setting in your library, to disable the "mode bar" in the charts? Some people may like to have it, I personally don't like to present it to users because they start to ask about all these options they have and they get so confused (can be set in chart configuration with {displayModeBar: false} )

Hello Roeland,

Thank you for the valuable feedback.

Probably we'll be able to implement text labels in this gauge. As for answers distribution - how many people answered 1,2,3,4 or 5 - I think we can represent the range question answers distribution using an ordinary chart with values 1…5 (range start … range end). We're added this feature in our TODO list.

Answering your additional comments and questions:

1. Yes we should implement it if hasn't implemented yet. It will be done via a chart (pie by default). We're added this feature in our TODO list.
2. Yes. We've fixed it. Fix be available in the nearest update.
3. We've implemented this behavior. You can use the following code to set available chart types: SurveyAnalytics.SelectBasePlotly.types = ["pie", "scatter"];

Thanks, Serge
SurveyJS Team

Does the SurveyAnalytics have an API document for all the rendering/misc options?

Also is there an example project taking real data results into the analytics engine?

Thanks for all your help!