Analytics & Visualizations ¶

markata-go provides several plugins for visualizing data directly in your markdown content. This guide covers the contribution graph and chart visualization plugins.

Contribution Graph ¶ #

The contribution_graph plugin renders GitHub-style calendar heatmaps showing activity over time. It uses the Cal-Heatmap library.

Configuration ¶ #

Enable the plugin in your configuration:

[markata-go]
hooks = ["default", "contribution_graph"]

[markata-go.contribution_graph]
enabled = true
cdn_url = "/assets/vendor/cal-heatmap"                # Cal-Heatmap base URL (local by default)
container_class = "contribution-graph-container"
theme = "light"

Configuration Options ¶ #

Basic Usage ¶ #

Add a contribution graph to your markdown using a fenced code block:

```contribution-graph
{
  "data": [
    {"date": "2024-01-01", "value": 5},
    {"date": "2024-01-02", "value": 3},
    {"date": "2024-01-03", "value": 8},
    {"date": "2024-01-04", "value": 2},
    {"date": "2024-01-05", "value": 10}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day"
  }
}
```

Data Format ¶ #

The data array contains objects with:

• date: Date string in ISO format (YYYY-MM-DD)
• value: Numeric value that determines cell color intensity

Options ¶ #

Examples ¶ #

Year View ¶ #

Show a full year of activity:

```contribution-graph
{
  "data": [
    {"date": "2024-01-15", "value": 5},
    {"date": "2024-02-20", "value": 8},
    {"date": "2024-03-10", "value": 3},
    {"date": "2024-06-01", "value": 12}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day",
    "range": 1
  }
}
```

Monthly View ¶ #

Show activity by month:

```contribution-graph
{
  "data": [
    {"date": "2024-01-01", "value": 5},
    {"date": "2024-01-15", "value": 8},
    {"date": "2024-02-01", "value": 3}
  ],
  "options": {
    "domain": "month",
    "subDomain": "day",
    "range": 3
  }
}
```

Tracking Blog Post Frequency ¶ #

Use Jinja templating to automatically generate data from your posts:

---
title: My Writing Activity
jinja: true
---

```contribution-graph
{
  "data": [
    {% for post in filter("published == true") %}
    {"date": "{{ post.Date.Format "2006-01-02" }}", "value": 1}{% if not loop.last %},{% endif %}
    {% endfor %}
  ],
  "options": {
    "domain": "year",
    "subDomain": "day"
  }
}
```

Styling ¶ #

Add custom CSS to style your contribution graphs:

.contribution-graph-container {
  margin: 2rem 0;
  overflow-x: auto;
}

/* Cal-Heatmap specific overrides */
.ch-domain-text {
  fill: var(--color-text-muted);
}

.ch-subdomain-bg {
  fill: var(--color-surface);
  stroke: var(--color-border);
}

Chart.js Charts ¶ #

The chartjs plugin lets you embed interactive charts using Chart.js.

Configuration ¶ #

[markata-go]
hooks = ["default", "chartjs"]

[markata-go.chartjs]
enabled = true
cdn_url = "/assets/vendor/chartjs/chart.min.js"
container_class = "chartjs-container"

Basic Usage ¶ #

Create charts with JSON configuration:

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March", "April", "May"],
    "datasets": [{
      "label": "Posts Published",
      "data": [3, 5, 2, 8, 4],
      "backgroundColor": "rgba(54, 162, 235, 0.7)"
    }]
  }
}
```

Supported Chart Types ¶ #

Examples ¶ #

Line Chart ¶ #

```chartjs
{
  "type": "line",
  "data": {
    "labels": ["Week 1", "Week 2", "Week 3", "Week 4"],
    "datasets": [{
      "label": "Page Views",
      "data": [1200, 1900, 1500, 2400],
      "borderColor": "rgb(75, 192, 192)",
      "fill": false,
      "tension": 0.3
    }]
  }
}
```

Pie Chart ¶ #

```chartjs
{
  "type": "pie",
  "data": {
    "labels": ["Tutorials", "Guides", "Reference", "Blog"],
    "datasets": [{
      "data": [35, 25, 20, 20],
      "backgroundColor": [
        "#ff6384",
        "#36a2eb",
        "#ffce56",
        "#4bc0c0"
      ]
    }]
  }
}
```

Advanced Options ¶ #

Chart.js supports extensive configuration. Add an options key for customization:

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{
      "label": "Revenue",
      "data": [12000, 19000, 15000, 22000]
    }]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "title": {
        "display": true,
        "text": "Quarterly Revenue"
      },
      "legend": {
        "position": "bottom"
      }
    },
    "scales": {
      "y": {
        "beginAtZero": true
      }
    }
  }
}
```

Use Cases ¶ #

Blog Statistics Dashboard ¶ #

Create a dedicated page showing your blog’s activity:

---
title: Blog Statistics
template: page.html
jinja: true
---

## Publishing Activity

```contribution-graph
{
  "data": [...generated from posts...],
  "options": {"domain": "year", "subDomain": "day"}
}

Content by Category ¶ #

### Project Documentation

Track development activity or feature completion:

```markdown
## Development Progress

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Features", "Bug Fixes", "Tests", "Docs"],
    "datasets": [{
      "label": "Completed",
      "data": [12, 8, 25, 15],
      "backgroundColor": "#4CAF50"
    }, {
      "label": "In Progress",
      "data": [3, 2, 5, 2],
      "backgroundColor": "#FFC107"
    }]
  },
  "options": {
    "indexAxis": "y"
  }
}

---

## Related

- [[configuration-guide|Configuration Guide]] - Full configuration reference
- <a href="/tags/markdown/" class="wikilink" data-title="Posts tagged: markdown" data-description="All posts with the tag &#34;markdown&#34;">Markdown Features</a> - Other markdown extensions
- <a href="/tags/templates/" class="wikilink" data-title="Posts tagged: templates" data-description="All posts with the tag &#34;templates&#34;">Templates</a> - Using Jinja in markdown