diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f9cab4f2..663820b81 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [1.11.14](https://github.com/surveyjs/survey-analytics/compare/v1.11.13...v1.11.14) (2024-09-04) + ### [1.11.13](https://github.com/surveyjs/survey-analytics/compare/v1.11.12...v1.11.13) (2024-08-27) ### [1.11.12](https://github.com/surveyjs/survey-analytics/compare/v1.11.11...v1.11.12) (2024-08-20) diff --git a/docs/chart-types.md b/docs/chart-types.md new file mode 100644 index 000000000..9264479fc --- /dev/null +++ b/docs/chart-types.md @@ -0,0 +1,201 @@ +--- +title: How to Analyze Survey Data - Chart Types | SurveyJS +description: SurveyJS Dashboard visualizes survey data using various chart types. This help topic provides an overview of the chart types supported by our survey results analysis tool and offers guidance on how to select the appropriate question types for each chart. +--- + +# Chart Types + +SurveyJS Dashboard visualizes survey data using different types of charts. This help topic gives a brief overview of the chart types included in the library. Each description includes illustrations and a list of supported question types. + +## Bar Chart + +A bar chart visualizes categorical data with rectangular bars. The length of each bar is proportional to the value it represents. SurveyJS Dashboard supports vertical and horizontal bar charts. + +SurveyJS Dashboard: Horizontal bar chart +SurveyJS Dashboard: Vertical bar chart + +Bar charts are supported by the question types listed below: + +- [Radio Button Group](https://surveyjs.io/form-library/examples/single-select-radio-button-group/) +- [Checkboxes](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/) +- [Dropdown](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) +- [Multi-Select Dropdown (Tag Box)](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) +- [Image Picker](https://surveyjs.io/form-library/examples/image-picker-question/) +- [Yes/No (Boolean)](https://surveyjs.io/form-library/examples/yes-no-question/) +- [Single-Select Matrix](https://surveyjs.io/form-library/examples/single-selection-matrix-table-question/) +- [Ranking](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +[View Demo](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/ (linkStyle)) + +## Pie Chart + +A pie chart is a circular graph divided into slices that represent proportions of a whole. Pie charts are great for visualizing how each category contributes to a total. They work best with fewer categories because a bigger number of slices can make chart interpretation difficult. + +SurveyJS Dashboard: Pie chart + +Pie charts are supported by the following question types: + +- [Radio Button Group](https://surveyjs.io/form-library/examples/single-select-radio-button-group/) +- [Checkboxes](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/) +- [Dropdown](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) +- [Multi-Select Dropdown (Tag Box)](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) +- [Image Picker](https://surveyjs.io/form-library/examples/image-picker-question/) +- [Yes/No (Boolean)](https://surveyjs.io/form-library/examples/yes-no-question/) +- [Ranking](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +## Doughnut Chart + +A doughnut chart is a pie chart but with a blank center. This shape may help reduce visual clutter and draw viewer's attention to the length of the arc rather than the area of the slices. + +SurveyJS Dashboard: Doughnut chart + +Doughnut charts are supported by the following question types: + +- [Radio Button Group](https://surveyjs.io/form-library/examples/single-select-radio-button-group/) +- [Checkboxes](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/) +- [Dropdown](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) +- [Multi-Select Dropdown (Tag Box)](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) +- [Image Picker](https://surveyjs.io/form-library/examples/image-picker-question/) +- [Yes/No (Boolean)](https://surveyjs.io/form-library/examples/yes-no-question/) +- [Ranking](https://surveyjs.io/form-library/examples/add-ranking-question-to-form/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +## Histogram + +A histogram is a chart type that visualizes the distribution of a dataset. It divides a continuous data range into intervals and shows how many data points fall within each interval. Histograms support both vertical and horizontal views. + +SurveyJS Dashboard: Vertical histogram +SurveyJS Dashboard: Horizontal histogram + +Histograms are supported by the following question types: + +- [Single-Line Input](https://surveyjs.io/form-library/examples/numeric-entry-question/) with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"number"`, `"date"`, or `"datetime"` +- [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +[View Demo](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/ (linkStyle)) + +## Gauge Chart + +A gauge chart is used to display a single numeric value, which is the average of a given dataset. The gauge chart takes the form of a semicircle with scale marks along the arc. Inside the arc is a needle or bar indicating the value. + +SurveyJS Dashboard: Gauge chart + +Gauge charts are supported by the following question types: + +- [Single-Line Input](https://surveyjs.io/form-library/examples/numeric-entry-question/) with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"number"` +- [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/) +- [Expression](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +[View Demo](https://surveyjs.io/dashboard/examples/how-to-customize-plotly-gauge-chart-javascript/ (linkStyle)) + +## Bullet Chart + +A bullet chart visualizes a single number on a horizontal strip. Similar to a gauge, it displays the average of a dataset, with the value indicated by a bar. The strip displays scale marks along its length, similar to the scale on a gauge's semicircle. + +SurveyJS Dashboard: Bullet chart + +Bullet charts are supported by the following question types: + +- [Single-Line Input](https://surveyjs.io/form-library/examples/numeric-entry-question/) with [`inputType`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#inputType) set to `"number"` +- [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/) +- [Expression](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +## Stacked Bar Chart + +A stacked bar chart displays each bar divided into multiple segments that visualize the percentage contribution of each category. The total length of bars represents 100%. Stacked bar charts are useful for showing the breakdown of a total into its individual components. + +SurveyJS Dashboard: Stacked bar chart + +Stacked bar charts are supported by the following question types: + +- [Single-Select Matrix](https://surveyjs.io/form-library/examples/single-selection-matrix-table-question/) + +## Word Cloud + +A word cloud (also "text cloud" or "tag cloud") visualizes textual data by adjusting the size of words based on their frequency. Word clouds are useful for analyzing large collections of textual data as they provide an immediate and illustrative summary of it. + +SurveyJS Dashboard: Word cloud + +Word clouds are supported by the following question types: + +- [Single-Line Input](https://surveyjs.io/form-library/examples/text-entry-question/) +- [Long Text](https://surveyjs.io/form-library/examples/add-open-ended-question-to-a-form/) +- [Multiple Textboxes](https://surveyjs.io/form-library/examples/multiple-text-box-question/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +## Text Table + +A text table is a visualization type that displays textual data in a simple table, without applying any data aggregation. + +SurveyJS Dashboard: Table visualizer + +Text tables are supported by the following question types: + +- [Single-Line Input](https://surveyjs.io/form-library/examples/text-entry-question/) +- [Long Text](https://surveyjs.io/form-library/examples/add-open-ended-question-to-a-form/) +- [Multiple Textboxes](https://surveyjs.io/form-library/examples/multiple-text-box-question/) +- Any of these question types used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) + +## Statistics Table + +A statistics table is a visualization type that aggregates data from single- and multi-select questions and displays it in a tabular format. + +SurveyJS Dashboard: Statistics table + +Statistics tables are supported by the following question types: + +- [Radio Button Group](https://surveyjs.io/form-library/examples/single-select-radio-button-group/) +- [Checkboxes](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/) +- [Dropdown](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) + +## NPS Visualizer + +An NPS visualizer is a chart designed specifically for Net Promoter Score (NPS) questions. NPS measures customer loyalty and identifies business growth opportunities. Respondents rate how likely they are to recommend your product or service on a scale from 0 to 10. + +- Promoters (score 9-10) are most likely keep buying your product and bring new customers. +- Passives (score 7-8) are overall satisfied with your product but may switch to your competitors if they come across a more attractive offering. +- Detractors (score 0-6) are unhappy with your product and may damage your brand through negative word-of-mouth. + +To calculate the NPS, the percentage of detractors should be subtracted from that of promoters. + +SurveyJS Dashboard: NPS visualizer + +The NPS visualizer is supported only by [Rating Scale](https://surveyjs.io/form-library/examples/rating-scale/) questions, standalone or used within a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/multi-select-matrix-question/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), or [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/). This visualizer is disabled by default. To enable it, use the following code: + +```js +import { VisualizationManager, NpsVisualizer } from "survey-analytics"; + +VisualizationManager.registerVisualizer("rating", NpsVisualizer); +``` + +[View Demo](https://surveyjs.io/dashboard/examples/how-to-visualize-net-promoter-score-results/ (linkStyle)) + + + diff --git a/docs/get-started-angular.md b/docs/get-started-angular.md index 9b14ee9ea..d05196a6d 100644 --- a/docs/get-started-angular.md +++ b/docs/get-started-angular.md @@ -31,10 +31,10 @@ SurveyJS Dashboard is distributed as a Plotly.js and Wordcloud libraries. Wordcloud is used to visualize the Text, Multiple Text, and Comment question types. Plotly.js is used to visualize the rest of the question types. Use the following commands to install type definitions for these libraries: +SurveyJS Dashboard depends on the Plotly.js library. Use the following commands to install type definitions for this library: ```cmd -npm i @types/plotly.js-dist-min @types/wordcloud --save-dev +npm i @types/plotly.js-dist-min --save-dev ``` Due to the design of Plotly.js exports, you should also open the `tsconfig.json` file and set the `allowSyntheticDefaultImports` flag to `true`: diff --git a/docs/get-started-html-css-javascript.md b/docs/get-started-html-css-javascript.md index beffe6333..5bf4014b5 100644 --- a/docs/get-started-html-css-javascript.md +++ b/docs/get-started-html-css-javascript.md @@ -20,11 +20,11 @@ SurveyJS Dashboard depends on other JavaScript libraries. Reference them on your 1. Survey Core A platform-independent part of [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview) that works with the survey model. SurveyJS Dashboard requires only this part, but if you also display the survey on the page, reference [the rest of the SurveyJS Form Library resources](/form-library/documentation/get-started-html-css-javascript#link-surveyjs-resources) as well. -1. Plotly.js and Wordcloud -Wordcloud (optional) is used to visualize the Text, Multiple Text, and Comment question types. Plotly.js (required) is used to visualize the rest of the question types. +1. Plotly.js +A third-party library used to render charts. 1. SurveyJS Dashboard -A library that integrates Survey Core with Plotly.js and Wordcloud. +A library that integrates Survey Core with Plotly.js. The following code shows how to reference these libraries: @@ -37,10 +37,8 @@ The following code shows how to reference these libraries: - + - - @@ -168,8 +166,6 @@ const vizPanel = new SurveyAnalytics.VisualizationPanel( - - @@ -271,8 +267,6 @@ document.addEventListener("DOMContentLoaded", function() { - - diff --git a/docs/get-started-react.md b/docs/get-started-react.md index c1ffa99d6..c3376e943 100644 --- a/docs/get-started-react.md +++ b/docs/get-started-react.md @@ -35,7 +35,7 @@ SurveyJS Dashboard is distributed as a Plotly.js and Wordcloud libraries. Wordcloud is used to visualize the Text, Multiple Text, and Comment question types. Plotly.js is used to visualize the rest of the question types. The command above installs both these libraries as dependencies. +SurveyJS Dashboard depends on the Plotly.js library. The command above installs this library as a dependency. ## Configure Styles diff --git a/docs/get-started-vue.md b/docs/get-started-vue.md index d4d4b2741..d27357165 100644 --- a/docs/get-started-vue.md +++ b/docs/get-started-vue.md @@ -34,7 +34,7 @@ SurveyJS Dashboard is distributed as a Plotly.js and Wordcloud libraries. Wordcloud is used to visualize the Text, Multiple Text, and Comment question types. Plotly.js is used to visualize the rest of the question types. The command above installs both these libraries as dependencies. +SurveyJS Dashboard depends on the Plotly.js library. The command above installs this library as a dependency. ## Configure Styles diff --git a/docs/images/chart-types-bar.png b/docs/images/chart-types-bar.png new file mode 100644 index 000000000..01454f576 Binary files /dev/null and b/docs/images/chart-types-bar.png differ diff --git a/docs/images/chart-types-bullet.png b/docs/images/chart-types-bullet.png new file mode 100644 index 000000000..d24a79da7 Binary files /dev/null and b/docs/images/chart-types-bullet.png differ diff --git a/docs/images/chart-types-doughnut.png b/docs/images/chart-types-doughnut.png new file mode 100644 index 000000000..5d6fbafef Binary files /dev/null and b/docs/images/chart-types-doughnut.png differ diff --git a/docs/images/chart-types-gauge.png b/docs/images/chart-types-gauge.png new file mode 100644 index 000000000..3e926ead7 Binary files /dev/null and b/docs/images/chart-types-gauge.png differ diff --git a/docs/images/chart-types-horizontal-histogram.png b/docs/images/chart-types-horizontal-histogram.png new file mode 100644 index 000000000..acc1a9c09 Binary files /dev/null and b/docs/images/chart-types-horizontal-histogram.png differ diff --git a/docs/images/chart-types-nps.png b/docs/images/chart-types-nps.png new file mode 100644 index 000000000..ae3179e89 Binary files /dev/null and b/docs/images/chart-types-nps.png differ diff --git a/docs/images/chart-types-pie.png b/docs/images/chart-types-pie.png new file mode 100644 index 000000000..2620f6dc0 Binary files /dev/null and b/docs/images/chart-types-pie.png differ diff --git a/docs/images/chart-types-stacked-bar.png b/docs/images/chart-types-stacked-bar.png new file mode 100644 index 000000000..1d50b3a05 Binary files /dev/null and b/docs/images/chart-types-stacked-bar.png differ diff --git a/docs/images/chart-types-statistics-table.png b/docs/images/chart-types-statistics-table.png new file mode 100644 index 000000000..8b356fd3b Binary files /dev/null and b/docs/images/chart-types-statistics-table.png differ diff --git a/docs/images/chart-types-table.png b/docs/images/chart-types-table.png new file mode 100644 index 000000000..cbbdd9de3 Binary files /dev/null and b/docs/images/chart-types-table.png differ diff --git a/docs/images/chart-types-vertical-bar.png b/docs/images/chart-types-vertical-bar.png new file mode 100644 index 000000000..58033bf11 Binary files /dev/null and b/docs/images/chart-types-vertical-bar.png differ diff --git a/docs/images/chart-types-vertical-histogram.png b/docs/images/chart-types-vertical-histogram.png new file mode 100644 index 000000000..12341897e Binary files /dev/null and b/docs/images/chart-types-vertical-histogram.png differ diff --git a/docs/images/chart-types-word-cloud.png b/docs/images/chart-types-word-cloud.png new file mode 100644 index 000000000..e508b7efa Binary files /dev/null and b/docs/images/chart-types-word-cloud.png differ diff --git a/docs/overview.md b/docs/overview.md index fd151063a..f835c5abf 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -11,13 +11,11 @@ SurveyJS Dashboard visualizes survey results and allows users to analyze them. ## Features -- Supported chart types: +- [Supported chart types](/dashboard/documentation/chart-types): - Bar - Pie - - Line - Gauge - Bullet - - Scatter - Word cloud - Interactive filtering - Customizable colors diff --git a/docs/sidebar.json b/docs/sidebar.json index 1050c4ae2..b3f5b69dc 100644 --- a/docs/sidebar.json +++ b/docs/sidebar.json @@ -26,6 +26,10 @@ } ] }, + { + "Name": "chart-types", + "Title": "Chart Types" + }, { "Name": "set-up-table-view", "Title": "Table View for Survey Results", diff --git a/package-lock.json b/package-lock.json index 56911fc8a..e197f4043 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "survey-analytics", - "version": "1.11.13", + "version": "1.11.14", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 81f7b6b52..0f00e5fa0 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "lint": "eslint ./src --quiet", "pre-push-check": "npm run lint && npm run test" }, - "version": "1.11.13", + "version": "1.11.14", "name": "survey-analytics", "description": "SurveyJS analytics Library.", "main": "survey.analytics.js",