Sjabloon:GraphChart
Parameters
- width: width of the chart
- height: height of the chart
- type: type of the chart: line for line charts, area for area charts, and rect for (column) bar charts. Multiple series can stacked using the stacked prefix, e.g. stackedarea.
- interpolate: interpolation method for line and area charts. It is recommended to use monotone for a monotone cubic interpolation – further supported values are listed at https://github.com/vega/vega/wiki/Marks#area.
- colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as #rgb/#rrggbb/#aarrggbb or by a CSS color name. For #aarrggbb the aa component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette is category10).
- xAxisTitle and yAxisTitle: captions of the × and y axes
- xAxisMin, xAxisMax, yAxisMin, and yAxisMax: minimum and maximum values of the × and y axes
- xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values are listed at https://github.com/mbostock/d3/wiki/Formatting. For example, the format d can be used to suppress the separators for year numbers.
- x: the x-values as a comma-separated list
- y or y1, y2, …: the y-values for one or several data series, respectively
- legend: show legend (only works in case of multiple data series)
- y1Title, y2Title, …: defines the label of the respective data series in the legend
Note: In the editor preview the graph extension creates a canvas element with vector graphics. However, when saving the page a PNG raster graphics is generated instead.
Examples
Line Chart:
{{GraphChart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
<graph>{"legends":[],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":100,"axes":[{"scale":"x","type":"x","format":"d"},{"scale":"y","type":"y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.
Area chart:
{{GraphChart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
<graph>{"legends":[],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"area","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"scale":"x","type":"x","format":"d"},{"scale":"y","type":"y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>
Note: The y-axis starts from zero
Bar chart:
{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10, 12, 6, 14, 2, 10, 7, 9}}
<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"scale":"x","type":"x","title":"X","format":"d"},{"scale":"y","type":"y","title":"Y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>
Line chart with more than one data series, using colors:
{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=line|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}
<graph>{"legends":[{"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"scale":"x","type":"x","title":"X","format":"d"},{"scale":"y","type":"y","title":"Y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>
Area chart with more than one data series showing blended overlap:
{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
<graph>{"legends":[{"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"scale":"x","type":"x","title":"X","format":"d"},{"scale":"y","type":"y","title":"Y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>
Bar chart with multiple data series:
{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
<graph>{"legends":[{"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","from":{"data":"chart","transform":[{"groupby":"x","type":"facet"}]},"properties":{"enter":{"width":{"scale":"x","band":true},"x":{"scale":"x","field":"key"}}},"marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"series","field":"series"},"y2":{"scale":"y","value":0},"width":{"scale":"series","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"scales":[{"domain":{"field":"series"},"type":"ordinal","name":"series","range":"width"}]}],"height":100,"axes":[{"scale":"x","type":"x","title":"X","format":"d"},{"scale":"y","type":"y","title":"Y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>
Area chart with smoothed data values:
{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}
<graph>{"legends":[{"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"layout_end"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["series"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"scale":"x","type":"x","title":"X","format":"d"},{"scale":"y","type":"y","title":"Y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>
Bar chart with stacked data series:
{{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}}
<graph>{"legends":[{"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","field":"layout_end"},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["series"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"scale":"x","type":"x","title":"X","format":"d"},{"scale":"y","type":"y","title":"Y","format":"d"}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Data A","x":1},{"y":12,"series":"Data A","x":2},{"y":6,"series":"Data A","x":3},{"y":14,"series":"Data A","x":4},{"y":2,"series":"Data A","x":5},{"y":10,"series":"Data A","x":6},{"y":7,"series":"Data A","x":7},{"y":9,"series":"Data A","x":8},{"y":2,"series":"Data B","x":1},{"y":4,"series":"Data B","x":2},{"y":6,"series":"Data B","x":3},{"y":8,"series":"Data B","x":4},{"y":13,"series":"Data B","x":5},{"y":11,"series":"Data B","x":6},{"y":9,"series":"Data B","x":7},{"y":2,"series":"Data B","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>
