VisualizationPanel Custom Visualizer filtered data not passed

Ondokuzon Yazılım AŞ

created 4 years ago

I'm trying to access some extra data I attached to answers and prepended to questions array before initialising a VisualizationPanel. After checking the docs and some examples it seemed to there was no callback for filtered data.

So I have added a custom visualizer for accessing filtered data by this example Custom visualizers

But after filtering by another input data provided to the visualizer is not filtered. So I'm not sure what to do in this scenario.

Basically what I did was,
Add an id to answer objects,
Add a question with name: "id" and type: "id"
Added a visualizer for type: "id"

What I want to do is after filtering data by any chart or something, getting a callback with the filtered data.

Comments (3)

Serge T 4 years ago

Hello,

Sorry, but I don't understand - what do you want to achieve. Could you describe your business case in greater details - what exact data do you want to pass into visualization panel and how do you want to use them?

Thanks, Serge
SurveyJS Team

Ondokuzon Yazılım AŞ 4 years ago

I would like to access who is the filtered people. I can add information about who they are in question and answers jsons and this information is visualized by word cloud or list if I left the default visualizers.

Filtering a chart by an option also filters other charts by default. I checked if there is a default callback for this filtered data and there was none. Then I tried to circumvent and created a visualizer for accessing data passed around VisualizerPanel which I thought was filtered by previous action. But data provided to this visualizer was not filtered out.

Editing survey

JavaScript
SurveyQuestions = {
        ...SurveyQuestions,
        pages: [
          {
            name: "page0",
            elements: [{
              "type": "id",
              "name": "id",
              "title": "ID",
              "visible": true
            },]
          },
          ...SurveyQuestions.pages
        ]
      }

Editing answers

JavaScript
rawAnswers->map(answer => ({id: answer.id, ...answer.json}));

Adding Visualizer

JavaScript
Survey.Serializer.addClass('id', [], null, "text");
function CustomVisualizer(question, data) {
  const getData = (visualizer) => {
    return visualizer.data.length;
  }

  const renderContent = (contentContainer, visualizer) => {
    const p = document.createElement('p');
    p.textContent = getData(visualizer);
    contentContainer.appendChild(p);
  }

  return new VisualizerBase(question, data, { renderContent: renderContent }, 'idVisualizer');
}

VisualizationManager.registerVisualizer('id', CustomVisualizer);

My problem is visualizer.data or visalizer.filteredData(?) provided to renderContent callback is not filtered by general filtering done to the VisualizationPanel

Serge T 4 years ago

Hello,

I'll see what we can do here and update this thread as soon as I'll get any results.

Thanks, Serge
SurveyJS Team

Answers approved by surveyjs Support

Serge T

created 4 years ago

Hello,

If I understand you right, you need a visualizer to show ids of filtered records.
Here is the working plunker sample - https://plnkr.co/edit/a3KxtlLOYgLVYpNR

You need to pass options in the custom visualizer:

JavaScript
Survey
    .Serializer
    .addClass("id", [], null, "text");

// Custom visualizer finds min and max values across all the answers on this question and shows them
function CustomVisualizer(question, data, options) {
    var getData = function (visualizer) {
        var result = [];
        visualizer
            .data
            .forEach(function (row) {
                var rowValue = row[visualizer.question.name];
                if (!!rowValue) {
                    result.push(rowValue);
                }
            });

        return result;
    };

    var renderContent = function (contentContainer, visualizer) {
        var data2render = getData(visualizer);
        var record = document.createElement("div");
        data2render.forEach(function(item) {
            var element = document.createElement("div");
            element.innerText = "id: " + item;
            record.appendChild(element)
        });
        var header = document.createElement("div");
        header.innerText = "Selected ids: ";
        contentContainer.appendChild(header);
        contentContainer.appendChild(record);
    };
    options.renderContent = renderContent;
    return new SurveyAnalytics.VisualizerBase(question, data, options, "idVisualizer");
}

// Register custom visualizer for the given question type
SurveyAnalytics
    .VisualizationManager
    .registerVisualizer("id", CustomVisualizer);

Thanks, Serge
SurveyJS Team

VisualizationPanel Custom Visualizer filtered data not passed

Answers approved by surveyjs Support

Recently viewed tickets