Template:Sparkline: Difference between revisions

From Bonkipedia
[[mw:]]>Yurik
(simplified graph)
 
m (1 revision imported: Template documentation pages)
 
(No difference)

Latest revision as of 18:05, 12 November 2022

Template documentation


Example

<graph> {

  "version": 2,
  "width": 100,
  "height": 25,
  "data": [ {
     "name": "data",
     "values": 
     [ 
       { "x": 1388534400, "y": 24962 }
     , { "x": 1391212800, "y": 26242 }
     , { "x": 1393632000, "y": 24888 }
     , { "x": 1396310400, "y": 24618 }
     , { "x": 1398902400, "y": 25975 }
     , { "x": 1401580800, "y": 24688 }
     , { "x": 1404172800, "y": 24619 }
     , { "x": 1406851200, "y": 28620 }
     , { "x": 1409529600, "y": 25260 }
     , { "x": 1412121600, "y": 25910 }
     , { "x": 1414800000, "y": 25376 }
     , { "x": 1417392000, "y": 22640 }
     , { "x": 1420070400, "y": 26165 }
     , { "x": 1422748800, "y": 26111 }
     , { "x": 1425168000, "y": 27648 }
     , { "x": 1427846400, "y": 26412 }
     , { "x": 1430438400, "y": 27040 }
     , { "x": 1433116800, "y": 25861 }
     , { "x": 1435708800, "y": 24654 }
     , { "x": 1438387200, "y": 25510 }
     , { "x": 1441065600, "y": 27943 }
     , { "x": 1443657600, "y": 28411 }
     , { "x": 1446336000, "y": 28411 }
     , { "x": 1448928000, "y": 29136 }
     ]
  } ],
  "scales": [
  {
     "name": "xscale",
     "type": "time",
     "range": "width",
     "domain": {"data": "data", "field": "x"}
  },
  {
     "name": "yscale",
     "type": "linear",
     "range": "height",
     "domain": {"data": "data", "field": "y"}
   }
 ],
 "marks": [
   {
     "from": {"data": "data"},
     "type": "line",
     "properties": {
       "enter": {
         "x": {"scale": "xscale", "field": "x"},
         "y": {"scale": "yscale", "field": "y"},
         "stroke": {"value": "grey"},
         "strokeWidth": {"value": 2}
       }
     }
   }
 ]

} </graph>

TemplateData

Create a sparkline graph of at least 2 and up to 24 values; x values should be Unix epoch timestamps, y values should be numbers. Values can be in any order.

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
x1x1

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numberrequired
y1y1

Y value at the corresponding time

Example
35
Numberrequired
x2x2

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numberrequired
y2y2

Y value at the corresponding time

Example
35
Numberrequired
x3x3

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y3y3

Y value at the corresponding time

Example
35
Numbersuggested
x4x4

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y4y4

Y value at the corresponding time

Example
35
Numbersuggested
x5x5

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y5y5

Y value at the corresponding time

Example
35
Numbersuggested
x6x6

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y6y6

Y value at the corresponding time

Example
35
Numbersuggested
x7x7

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y7y7

Y value at the corresponding time

Example
35
Numbersuggested
x8x8

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y8y8

Y value at the corresponding time

Example
35
Numbersuggested
x9x9

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y9y9

Y value at the corresponding time

Example
35
Numbersuggested
x10x10

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y10y10

Y value at the corresponding time

Example
35
Numbersuggested
x11x11

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y11y11

Y value at the corresponding time

Example
35
Numbersuggested
x12x12

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y12y12

Y value at the corresponding time

Example
35
Numbersuggested
x13x13

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y13y13

Y value at the corresponding time

Example
35
Numbersuggested
x14x14

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y14y14

Y value at the corresponding time

Example
35
Numbersuggested
x15x15

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y15y15

Y value at the corresponding time

Example
35
Numbersuggested
x16x16

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y16y16

Y value at the corresponding time

Example
35
Numbersuggested
x17x17

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y17y17

Y value at the corresponding time

Example
35
Numbersuggested
x18x18

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y18y18

Y value at the corresponding time

Example
35
Numbersuggested
x19x19

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y19y19

Y value at the corresponding time

Example
35
Numbersuggested
x20x20

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y20y20

Y value at the corresponding time

Example
35
Numbersuggested
x21x21

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y21y21

Y value at the corresponding time

Example
35
Numbersuggested
x22x22

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y22y22

Y value at the corresponding time

Example
35
Numbersuggested
x23x23

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y23y23

Y value at the corresponding time

Example
35
Numbersuggested
x24x24

Time value for one of the points, as a Unix timestamp

Example
1446336000
Numbersuggested
y24y24

Y value at the corresponding time

Example
35
Numbersuggested
Image Widthwidth

Width of the image in pixels

Default
100
Numberoptional
Image Heightheight

Height of the image in pixels

Default
25
Unknownoptional
Line colorcolor

no description

Default
gray
Stringoptional


<graph>

{
   "version": 2,
   "width": 100,
   "height": 25,
   "data": [ {
      "name": "data",
      "values": 
      [ 
        { "x": 10, "y": 100 }
      , { "x": 20, "y": 200 }
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      ]
   } ],
   "scales": [
   {
      "name": "xscale",
      "type": "time",
      "range": "width",
      "domain": {"data": "data", "field": "x"}
   },
   {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "domain": {"data": "data", "field": "y"}
    }
  ],
  "marks": [
    {
      "from": {"data": "data"},
      "type": "line",
      "properties": {
        "enter": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "grey"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}

</graph>