Charts from Data Tables
Turn your Memberstack Data Tables into beautiful, interactive visualizations. No coding experience required.
9 Chart Types
Bar, Line, Pie & More
No Code
Just HTML Attributes
Real-time
Auto Updates
Visualize Your Data Tables
Create charts and graphs from data stored in your Memberstack Data Tables. Display member data as colorful, interactive visualizations instead of boring tables.
Spending by category
Progress over time
Sales comparison
Completion rates
Phase 1
Quick Start Setup
Add Required Scripts
Add these to your page, ideally in the <head> or just before </body>:
<!-- Memberstack (you probably already have this) -->
<script data-memberstack-app="YOUR_APP_ID"
src="https://static.memberstack.com/scripts/v1/memberstack.js">
</script>
<!-- Chart.js - the charting library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js">
</script>
<!-- MemberScript #213 -->
<script src="memberscript213.js"></script>Add a Chart to Your Page
Add this HTML where you want your chart to appear:
<div data-ms-code="analytics-chart"
data-ms-code-table="your_table_name"
data-ms-code-chart-type="bar"
data-ms-code-label-field="name"
data-ms-code-value-field="amount">
<h3 data-ms-code="analytics-title">My Chart</h3>
<div data-ms-code="analytics-loading">Loading...</div>
<div data-ms-code="analytics-error" style="display:none;">
Could not load data.
</div>
<canvas data-ms-code="analytics-canvas"></canvas>
</div>Configure Your Data Table
Your Data Table must allow client-side reading:
- Go to your Memberstack Dashboard
- Click Data Tables in the sidebar
- Select your table (e.g., "orders", "workouts")
- Find Permissions settings
- Enable "Allow read (Public or Any Member)"
Without this, the chart will show an error instead of your data.
Phase 2
Chart Types
MemberScript #213 supports 9 different chart types. Click any chart below to see an interactive demo where you can edit the data and watch the chart update in real-time.
Bar Chart
Edit the data below to see the bar chart update instantly
Data Table
| Label | Value | |
|---|---|---|
Click on labels to edit. Changes update the chart instantly.
Live Preview
Code for Bar Chart
<div data-ms-code="analytics-chart"
data-ms-code-table="your_table"
data-ms-code-chart-type="bar"
data-ms-code-chart-name="Bar Chart"
data-ms-code-label-field="name"
data-ms-code-value-field="amount">
<h3 data-ms-code="analytics-title"></h3>
<div data-ms-code="analytics-loading">Loading...</div>
<div data-ms-code="analytics-error" style="display:none;">Error</div>
<canvas data-ms-code="analytics-canvas"></canvas>
</div>Phase 3
Attributes Reference
Your Data Table's name (must match exactly)
RequiredChart type: bar, line, pie, doughnut, polarArea, radar, bubble, scatter
RequiredTitle displayed above the chart
OptionalColumn containing names/labels for data points
Usually requiredColumn containing numbers to visualize
Usually requiredGrouping & Filtering
Group rows by this column (creates one data point per unique value)
OptionalHow to combine values: "sum" (add numbers) or "count" (count rows)
OptionalOnly show current member's records (specify member ID column)
OptionalMaximum records to fetch (default 100)
OptionalStyling
Custom color palette (comma-separated hex colors)
OptionalBar direction: "vertical" (default) or "horizontal"
OptionalBubble & Scatter Charts
Column for X-axis (horizontal) values (numbers only)
OptionalColumn for Y-axis (vertical) values (numbers only)
Optional(Bubble only) Column for bubble size (numbers only)
OptionalPhase 4
HTML Element Roles
Add elements with these data-ms-code values inside your chart container. The script finds and uses them automatically.
Main container — put all config attributes here
Shows the chart name from data-ms-code-chart-name
Where the chart is drawn (auto-created if missing)
Shown while data loads, hidden when ready
Shown if data fails to load
FAQ
Common Questions
Common Questions
Everything you need to know about charts
Add the data-ms-code-owner-field attribute with the column name that stores the member ID. For example: data-ms-code-owner-field="member_id". The chart will automatically filter to show only records where that column matches the logged-in member's ID.
Use data-ms-code-value-agg="count" along with the group attribute. For example: data-ms-code-group="status" and data-ms-code-value-agg="count". This counts how many records exist for each unique value in the group column.
Yes! Each chart is independent. Just make sure each has its own container with data-ms-code="analytics-chart". You can have as many charts as you need, each with different configurations.
Check these common issues: 1) Ensure your Data Table allows client-side reading in Memberstack settings. 2) Verify your table name matches exactly (it's case-sensitive). 3) Make sure column names in your attributes match your table's columns. 4) Open browser console (F12) to check for JavaScript errors.
In your CSS, override the variable: :root { --ms213-chart-height: 500; } (pixels). Or you can set a specific height on the canvas wrapper element in your HTML directly.
This means permission is denied and your Data Table doesn't allow client-side access. Go to Memberstack Dashboard → Data Tables → Select your table → Enable "Allow read from client" or similar setting in the permissions section.
Yes! Use the data-ms-code-colors attribute with comma-separated hex colors. For example: data-ms-code-colors="#4353FF,#10B981,#F59E0B". You can also use CSS variables in the memberscript213.css file.
Call the refresh method via JavaScript: if (window.ms213Charts) { window.ms213Charts.refresh(); }. This will re-fetch data from your Data Table and update all charts on the page.
Troubleshooting
Refreshing Charts
After adding new data to your table, refresh all charts with JavaScript:
if (window.ms213Charts) {
window.ms213Charts.refresh();
}Try Memberstack for free
100% free, unlimited trial — upgrade only when you're ready to launch. No credit card required.
