---
title: Visualize Survey Data from SurveyJS Demo Service
product: Dashboard
description: SurveyJS comes with a free full-scale demo for JavaScript that you can use to create test surveys and forms, collect responses, and save all survey data on SurveyJS servers. This example demonstrates how to visualize survey data acquired through this full-scale demo.
framework: jQuery
source: https://surveyjs.io/dashboard/examples/visualize-survey-data-from-survey-tool-with-dashboard-library/jquery
index: https://surveyjs.io/dashboard/examples/overview.md
---

# Visualize Survey Data from SurveyJS Demo Service (jQuery)

SurveyJS provides a [demo service](/create-free-survey) that allows you to create test surveys and forms, store their JSON schemas in our database, and collect test results. This example shows how you can use the Dashboard library to visualize survey data collected through the service.

> SurveyJS Demo Service is meant as a demonstration of what you can build with SurveyJS products. SurveyJS assumes no responsibility for any consequence of misusing or violating any sensitive data communicated via the service. In real-world applications, we strongly recommend storing survey results and JSON schemas [in your own database](https://surveyjs.io/form-library/documentation/handle-survey-results-store).

To configure SurveyJS Dashboard for work with SurveyJS Demo Service, follow the steps below:

1. Create an empty [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) instance.

1. Load your survey JSON schema from the SurveyJS storage.\
Implement a function that loads a survey JSON schema with a specified `surveyId` and assigns it to the `SurveyModel` instance (see the `loadSurvey()` function in code).

1. Fetch survey results from SurveyJS Demo Service.\
SurveyJS Demo Service exposes multiple [public](/help?apiType=public) and [private API endpoints](/help?apiType=private). To fetch survey results, make a request to the [`getSurveyPublicResults`](https://surveyjs.io/Help/Api/GET-api-Surveys-getSurveyPublicResults-id_from_till?apiType=private) API. Append your survey ID to the endpoint URL (see the `dataurl.js` file in code).

1. Create and render a Dashboard.\
Add a `<div>` element with an `id` attribute to your page. To instantiate a Dashboard, pass [survey questions](/form-library/documentation/api-reference/survey-data-model#getAllQuestions), survey results from step 3, and [optional settings](/dashboard/documentation/api-reference/idashboardoptions) to the [`Dashboard`](/dashboard/documentation/api-reference/dashboard) constructor. Call the [`render(containerId)`](/dashboard/documentation/api-reference/dashboard#render) method on the instance to render the Dashboard in the `div` element.

## Files

### `public/index.html`

```html
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:400,600&display=swap" rel="stylesheet">
<div id="loadingIndicator" class="data-loading-indicator-panel">
  <div class="data-loading-indicator">
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_17928_11482)">
        <path d="M32 64C14.36 64 0 49.65 0 32C0 14.35 14.36 0 32 0C49.64 0 64 14.35 64 32C64 49.65 49.64 64 32 64ZM32 4C16.56 4 4 16.56 4 32C4 47.44 16.56 60 32 60C47.44 60 60 47.44 60 32C60 16.56 47.44 4 32 4Z" fill="#E5E5E5" />
        <path d="M53.2101 55.2104C52.7001 55.2104 52.1901 55.0104 51.8001 54.6204C51.0201 53.8404 51.0201 52.5704 51.8001 51.7904C57.0901 46.5004 60.0001 39.4704 60.0001 31.9904C60.0001 24.5104 57.0901 17.4804 51.8001 12.1904C51.0201 11.4104 51.0201 10.1404 51.8001 9.36039C52.5801 8.58039 53.8501 8.58039 54.6301 9.36039C60.6701 15.4004 64.0001 23.4404 64.0001 31.9904C64.0001 40.5404 60.6701 48.5704 54.6301 54.6204C54.2401 55.0104 53.7301 55.2104 53.2201 55.2104H53.2101Z" fill="#19B394" />
      </g>
      <defs>
        <clipPath id="clip0_17928_11482">
          <rect width="64" height="64" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</div>
<div id="surveyDashboardContainer"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
.data-loading-indicator-panel {
    width: 100%;
    height: 400px;
}
.data-loading-indicator {
    position: relative;
    width: 64px;
    height: 64px;
    left: calc((100% - 64px)/ 2);
    top: calc((100% - 64px)/ 2);
    animation: data-loading-indicator-spinner 1s infinite linear;
}
@keyframes data-loading-indicator-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
```

### `src/dataurl.js`

```js
export const dataUrl = "https://api.surveyjs.io/private/Surveys/getSurveyPublicResults/5af48e08-a0a5-44a5-83f4-1c90e8e98de1";
```

### `src/surveyjs_service.js`

```js
export function loadSurvey(survey, surveyId) {
    const surveyServiceUrl = "https://api.surveyjs.io/public/v1/Survey";
    survey.beginLoading();
    fetch(surveyServiceUrl + "/getSurvey?surveyId=" + surveyId)
        .then(response => {
            if (response.ok) {
                return response.json();
            }
            throw new Error("Could not load the survey JSON schema");
        })
        .then(data => {
            survey.fromJSON(data);
            survey.endLoading();
        })
        .catch(error => console.log(error));
}
```

### `src/index.js`

```js
import { Model } from "survey-core";
import { VisualizationPanel } from "survey-analytics";
import "survey-analytics/survey.analytics.css";
import "./index.css";
import { json } from "./json";
import "survey-core/survey-core.min.css";
import { dataUrl } from "./dataurl";
import { loadSurvey } from "./surveyjs_service";


const survey = new Model();
loadSurvey(survey, json.surveyId)

fetch(dataUrl).then(response => response.json()).then(data => {
    const dataFromServer = data.Data;
    const dashboard = new Dashboard({
        questions: survey.getAllQuestions(),
        data: dataFromServer,
        
    });
    
    
    
    
    document.getElementById("loadingIndicator").style.display = "none";
    dashboard.render("surveyDashboardContainer");
    
});
```

### `src/json.js`

```js
export const json = { "surveyId": "5af48e08-a0a5-44a5-83f4-1c90e8e98de1" };
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "chart.js": "4.5.1",
    "survey-analytics": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/dashboard/examples/visualize-survey-data-from-survey-tool-with-dashboard-library/angular.md)
- [React](https://surveyjs.io/dashboard/examples/visualize-survey-data-from-survey-tool-with-dashboard-library/reactjs.md)
- [Vue 3](https://surveyjs.io/dashboard/examples/visualize-survey-data-from-survey-tool-with-dashboard-library/vue3js.md)
- [Vanilla JS](https://surveyjs.io/dashboard/examples/visualize-survey-data-from-survey-tool-with-dashboard-library/vanillajs.md)