Guides/How to visualize form data in a dashboard

How to visualize form data in a dashboard

Submissions to live charts. One JSON payload.

Updated March 2026

You have form data. You want charts. Why set up a charting library for this? Sutrena dashboards are defined with a JSON DSL. Seven widget types. Point them at form fields. You get a live dashboard that auto-refreshes every 30 seconds. No frontend code. No database queries.

1. Create a form with data to visualize

Start with a form that has structured fields. Select fields work well for pie and bar charts. Timestamps drive line charts. Text fields show up in data tables.

curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_abc123" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Product Feedback",
    "fields": [
      { "name": "email", "label": "Email", "type": "email", "required": true },
      { "name": "category", "label": "Category", "type": "select",
        "options": ["Bug", "Feature", "UX", "Performance"], "required": true },
      { "name": "rating", "label": "Rating", "type": "select",
        "options": ["1", "2", "3", "4", "5"], "required": true },
      { "name": "comment", "label": "Comment", "type": "textarea" }
    ]
  }'

2. Create a dashboard with the DSL

POST a dashboard definition. Seven widget types: metric_card, data_table, text_block, pie_chart, bar_chart, line_chart, action_table. Use groupBy for aggregation and timeBucket with $submitted_at for time-series.

curl -X POST https://sutrena.com/api/dashboards \
  -H "Authorization: Bearer st_trial_abc123" \
  -H "Content-Type: application/json" \
  -d '{
    "formId": "frm_xyz789",
    "name": "Feedback Analytics",
    "isPublic": true,
    "dsl": {
      "version": 1,
      "widgets": [
        {
          "type": "metric_card",
          "title": "Total Responses",
          "value": "count(*)"
        },
        {
          "type": "pie_chart",
          "title": "By Category",
          "groupBy": "category"
        },
        {
          "type": "bar_chart",
          "title": "Rating Distribution",
          "groupBy": "rating"
        },
        {
          "type": "line_chart",
          "title": "Responses Per Day",
          "groupBy": "$submitted_at:day"
        },
        {
          "type": "data_table",
          "title": "Recent Feedback",
          "columns": ["email", "category", "rating", "comment"],
          "limit": 25
        }
      ]
    }
  }'

# Response:
# {
#   "id": "dsh_fb01",
#   "publicUrl": "https://sutrena.com/d/dsh_fb01"
# }

3. Share the public URL

When isPublic is true, anyone with the URL can view it. Refreshes every 30 seconds. Embed it in Notion, share in Slack, link from your docs. Set isPublic to false if you want it behind auth only.

# The public dashboard URL:
# https://sutrena.com/d/dsh_fb01

# Update visibility later:
curl -X PATCH https://sutrena.com/api/dashboards/dsh_fb01 \
  -H "Authorization: Bearer st_trial_abc123" \
  -H "Content-Type: application/json" \
  -d '{"isPublic": false}'

FAQ

What chart types are available?

Seven: metric_card (single number), data_table (rows and columns), text_block (static text), pie_chart, bar_chart, line_chart, action_table (interactive editable table). Recharts under the hood.

Can I group data by time periods?

Yes. Use $submitted_at:day, $submitted_at:week, or $submitted_at:month for form data. For CSV or inline data with date columns, use $column_name:day (e.g. $date:day, $created_at:month).

How often does the dashboard refresh?

Every 30 seconds. Public and authenticated views, same thing.

Can I have multiple dashboards for one form?

Yes. As many as your plan allows. Free: 3, Builder: 10, Pro: 50, Scale: unlimited. Each can have different widget configurations.

What is the DSL version?

Currently 1. Required field. Future versions may add new widget types or aggregation options.

Can I create a dashboard without a form?

Yes. Pass a data array instead of formId for inline JSON (up to 1000 rows), or upload a CSV via POST /api/dashboards/upload for larger datasets. See the data dashboard guide.

Related

Build an NPS dashboard →Collect form data via API →Dashboards from CSV or JSON data →Blueprint: Feature voting board →Sutrena vs Google Forms →

What is Sutrena?

Sutrena is the web runtime for AI agents. Three primitives — pages, forms, and dashboards — accessible through one API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Framework-agnostic. Works from any MCP client or HTTP client.

Get started in two API calls

1. Get a trial key (no auth, no signup)

curl -X POST https://sutrena.com/api/trial

2. Create a form + dashboard from a template

curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_xxx" \
  -H "Content-Type: application/json" \
  -d '{"templateId": "waitlist", "createDashboard": true}'
/llms.txt/api/schema/llms-full.txt/.well-known/mcp.json

Ready to build?

Get a trial API key instantly with no signup, or create an account for the full experience.

Start buildingAgent docs
How to visualize form data in a dashboard — Sutrena | Sutrena