Template:Graph:PageViews/sandbox

This is the template sandbox page for Template:Graph:PageViews (diff).

Template documentation

This graph's main version resides at mediawiki Template:Graph:PageViews. Please make all the changes there and copy it everywhere else (until the copying is automated)

{{ Graph:PageViews }}
30 days for the current page (if there is data)

{{ Graph:PageViews | 90 | Main Page | en.wikipedia.org }}
90 days for Main Page on English Wikipedia

{{ Graph:PageViews | 180 | _ }}
Monthly visitors to the current wiki (last 6 months)

{{ Graph:PageViews | 180 | _ | all-projects | granularity = daily }}
Daily visitors to all worldwide wikis (last 6 months)

{{ Graph:PageViews | 30 | Main Page | en.wikipedia.org}}
30 days for Main Page on English Wikipedia

{{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | platform = desktop}}
30 days for Main Page on English Wikipedia - desktop computer browsers

{{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | platform = mobile-web}}
30 days for Main Page on English Wikipedia - mobile browsers

{{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | platform = mobile-app}}
30 days for Main Page on English Wikipedia - mobile applications

{{ Graph:PageViews | 30 | Main Page | en.wikipedia.org | agent = spider}}
30 days for Main Page on English Wikipedia - 'spider' agent

Template may be used with different parameter order. For example, in English Wikipedia

{{Graph:PageViews|90|Main Page}}
{{Graph:PageViews|Main Page|90}}
{{Graph:PageViews|Main Page|en.wikipedia.org|90}}

will give the same output.

TemplateData

Inserts a graph with the page views statistics for the past N days of a page.

Template parameters[Edit template data]
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Number of days back	`1`	Number of days back to show in the chart Default 30	Number	optional
Page Title	`2`	Title of the page, with namespace, including needed spaces. If '_' is given, shows the total for the whole site Default Name of the current article page (even if on talk page) Example Main Page	Page name	optional
Domain	`3`	Domain from which to find page views for the given title, if not this wiki. If '_' is given as parameter 2, 'all-projects' can be used here for all wiki sites summary data Default Current wiki Example en.wikipedia.org	Line	optional
Agent	`agent`	If you want to filter by agent type, use one of user, automated or spider. If you are interested in pageviews regardless of agent type, use all-agents. Suggested values `user` `spider` `automated` `all-agents` Default user	Line	optional
Graph color	`color`	Shade with which to highlight the data in the chart Default #00f Example #f00	Line	optional
Graph scale	`scale`	Scaling could be one of these: linear, log, pow, sqrt, quantile, quantize, and threshold Default linear Example log	Line	optional
Maximum Y value axis	`max`	This optional value might be useful to align multiple graphs side-by-side Default Automatically scaled to the data. Example 10000	Number	optional
Width	`width`	Width for the chart in pixels, if different from the default. Default 800	Number	optional
Height	`height`	Height for the chart in pixels, if different from the default. Default 200	Number	optional
Platform	`platform`	Computer platform could be one of these: all-access (all platforms together), desktop (regular browsers), mobile-web (mobile browsers), mobile-app (mobile wiki applications) Default all-access	Line	optional
Granularity	`granularity`	If the 2nd parameter is '_' (shows site stats), set data granularity monthly, daily, or hourly Default monthly	Line	optional
Interpolate	`interpolate`	Type of line interpolation. See https://vega.github.io/vega/docs/marks/line/ Suggested values `linear` `monotone` `basis` `bundle` `cardinal` `catmull-rom` `natural` `step` `step-before` `step-after` Default monotone	Line	optional

<graph>

{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:PageViews
  //            Please do not modify it anywhere else, as it may get copied and override your changes.
  //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:PageViews
  //            The graph uses PageViews API https://wikitech.wikimedia.org/wiki/Analytics/PageviewAPI
  //

  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 800,
  "height": 200,
  "autosize": {
    "type": "fit",
    "resize": false,
    "contains": "padding"
  },

  // The data for this graph comes from the PageView API.  The request is made for N days back up to now.
  "data": [
    {
      "name": "pageviews",
      "url": "https://wikimedia.org/api/rest_v1/metrics/pageviews/per-article/mediawiki.org/all-access/user/Template%3AGraph%3APageViews%2Fsandbox/daily/2024110300/2024120300",
      "format": {
        "type": "json",
        "property": "items"
      },

      // The response is parsed here, converting date strings of form "20160223" into date 2016-02-23
     "transform": [
        {
          "type": "formula",
          "expr": "parseInt(substring(datum.timestamp,0,4))",
          "as": "year"
        },
        {
          "type": "formula",
          "expr": "parseInt(substring(datum.timestamp,4,6))",
          "as": "month"
        },
        {
          "type": "formula",
          "expr": "parseInt(substring(datum.timestamp,6,8))",
          "as": "day"
        },
        {
          "type": "formula",
          "expr": "datetime(datum.year,datum.month-1,datum.day)",
          "as": "date"
        }
      ]
    }
  ],

  "scales": [
    // The dates are scaled to the "x" axis - the width of the graph
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "pageviews","fields": [ "date" ] }
    },
    // The pageviews are scaled to the "y" axis - the height of the graph
    // Optional scale parameter can change "linear" to other scales like log
    // Optional max parameter can fix the upper bound of the graph
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "pageviews","fields": ["views"] },
      "clamp": true,

      "nice": true
    }
  ],

  // Simple axis with horizontal grid lines
  "axes": [
    {
      "scale": "x",
      "orient": "bottom",
       "encode": {
        "ticks": {
          "update": {
            "stroke": {
              "value": "#54595d"
            }
          }
        },
        "labels": {
          "update": {
            "fill": {
              "value": "#54595d"
            }
          }
        },
        "axis": {
          "update": {
            "stroke": {
              "value": "#54595d"
            },
            "strokeWidth": {
              "value": 2
            }
          }
        }
      }
    },
    {
      "orient": "left",
      "scale": "y",
      "grid": true,
      "encode": {
        "ticks": {
          "update": {
            "stroke": {
              "value": "#54595d"
            }
          }
        },
        "labels": {
          "update": {
            "fill": {
              "value": "#54595d"
            }
          }
        },
        "grid": {
          "update": {
            "stroke": {
              "value": "#54595d"
            },
            "strokeWidth": {
              "value": 2
            }
          }
        },
        "axis": {
          "update": {
            "stroke": {
              "value": "#54595d"
            },
            "strokeWidth": {
              "value": 2
            }
          }
        }
      }
    }
  ],

  // The graph is drawn with two elements a thick line at the top, and a semi-transparent area below
  "marks": [
    {
      "type": "line",
      "from": {"data": "pageviews"},
      "encode": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","field": "views"},
          "stroke": {"value": "#36c"},
          "strokeWidth": {"value": 3},
          "interpolate": {"value": "monotone"}
        }
      }
    },
    {
      "type": "area",
      "from": {"data": "pageviews"},
      "encode": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","value": 0},
          "y2": {"scale": "y","field": "views"},
          "fill": {"value": "#36c"},
          "fillOpacity": {"value": 0.35},
          "interpolate": {"value": "monotone"}
        }
      }
    }
  ]
}

</graph>