Diagnostics/Javascript/Graph/v2

From XOWA: the free, open-source, offline wiki application

From https://www.mediawiki.org/wiki/Extension:Graph/Demo

Graph templates

Pie chart

{ "scales": [ { "type":"ordinal" , "name":"color" , "range":"category10" , "domain":{ "data":"chart" , "field":"x" } } , { "type":"linear" , "name":"r" , "domain":{ "data":"chart" , "field":"r" } , "range": [ 0 , 100 ] } ] , "version":2 , "height":100 , "legends": [ { "stroke":"color" , "properties":{ "legend":{ "y":{ "value":-100 } } } , "title":"Legende" , "fill":"color" } ] , "axes": [ ] , "data": [ { "format":{ "type":"json" , "parse":{ "y":"integer" , "x":"string" , "r":"integer" } } , "name":"chart" , "values": [ { "y":100 , "x":"A" , "r":7 } , { "y":200 , "x":"B" , "r":8 } , { "y":150 , "x":"C" , "r":9 } , { "y":300 , "x":"D" , "r":8 } , { "y":100 , "x":"E" , "r":8 } , { "y":100 , "x":"F" , "r":9 } , { "y":150 , "x":"G" , "r":10 } , { "y":50 , "x":"H" , "r":9 } , { "y":200 , "x":"I" , "r":5 } ] } ] , "marks": [ { "type":"arc" , "properties":{ "hover":{ "fill":{ "value":"red" } } , "enter":{ "endAngle":{ "field":"layout_end" } , "innerRadius":{ "value":0 } , "outerRadius":{ "scale":"r" , "field":"r" } , "startAngle":{ "field":"layout_start" } , "stroke":{ "value":"white" } , "strokeWidth":{ "value":1 } , "fill":{ "scale":"color" , "field":"x" } } , "update":{ "fill":{ "scale":"color" , "field":"x" } } } , "from":{ "data":"chart" , "transform": [ { "field":"y" , "type":"pie" } ] } } , { "properties":{ "enter":{ "theta":{ "field":"layout_mid" } , "fontSize":{ "value":10 } , "baseline":{ "value":"top" } , "radius":{ "scale":"r" , "offset":-4 , "field":"r" } , "align":{ "value":"center" } , "text":{ "field":"y" } , "y":{ "group":"height" , "mult":0.5 } , "x":{ "group":"width" , "mult":0.5 } , "angle":{ "field":"layout_mid" , "mult":57.29577951308232 } , "fill":{ "value":"white" } } } , "type":"text" , "from":{ "data":"chart" , "transform": [ { "field":"y" , "type":"pie" } ] } } ] , "width":100 }

Stacked area

{ "scales": [ { "type":"linear" , "name":"x" , "zero":false , "range":"width" , "domain":{ "data":"chart" , "field":"x" } , "nice":true } , { "type":"linear" , "name":"y" , "zero":true , "range":"height" , "domain":{ "data":"stats" , "field":"sum_y" } , "nice":true } , { "type":"ordinal" , "name":"color" , "range": [ "seagreen" , "orchid" ] , "domain":{ "data":"chart" , "field":"series" } } ] , "version":2 , "height":100 , "legends": [ { "stroke":"color" , "title":"Legend" , "fill":"color" } ] , "axes": [ { "scale":"x" , "type":"x" , "format":"d" , "title":"X" } , { "scale":"y" , "type":"y" , "format":"d" , "title":"Y" } ] , "data": [ { "format":{ "type":"json" , "parse":{ "y":"integer" , "x":"integer" } } , "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":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 } ] } , { "transform": [ { "type":"aggregate" , "summarize":{ "y":"sum" } , "groupby": [ "x" ] } ] , "name":"stats" , "source":"chart" } ] , "marks": [ { "type":"group" , "marks": [ { "type":"area" , "properties":{ "hover":{ "fill":{ "value":"red" } } , "enter":{ "y":{ "scale":"y" , "field":"layout_start" } , "interpolate":{ "value":"monotone" } , "x":{ "scale":"x" , "field":"x" } , "y2":{ "scale":"y" , "field":"layout_end" } , "fill":{ "scale":"color" , "field":"series" } } , "update":{ "fill":{ "scale":"color" , "field":"series" } } } } ] , "from":{ "data":"chart" , "transform": [ { "type":"stack" , "sortby": [ "series" ] , "groupby": [ "x" ] , "field":"y" } , { "type":"facet" , "groupby": [ "series" ] } ] } } ] , "width":400 }


Timeline

{ "width": 800, "height": 200, "data": [ { "name": "people", "values": [ {"label":"Washington", "born":-7506057600000, "died":-5366196000000, "enter":-5701424400000, "leave":-5453884800000}, {"label":"Adams", "born":-7389766800000, "died":-4528285200000, "enter":-5453884800000, "leave":-5327740800000}, {"label":"Jefferson", "born":-7154586000000, "died":-4528285200000, "enter":-5327740800000, "leave":-5075280000000}, {"label":"Madison", "born":-6904544400000, "died":-4213184400000, "enter":-5075280000000, "leave":-4822819200000}, {"label":"Monroe", "born":-6679904400000, "died":-4370518800000, "enter":-4822819200000, "leave":-4570358400000} ] }, { "name": "events", "format": {"type":"json", "parse":{"when":"date"}}, "values": [ {"name":"Decl. of Independence", "when":"July 4, 1776"}, {"name":"U.S. Constitution", "when":"3/4/1789"}, {"name":"Louisiana Purchase", "when":"April 30, 1803"}, {"name":"Monroe Doctrine", "when":"Dec 2, 1823"} ] } ], "scales": [ { "name": "y", "type": "ordinal", "range": "height", "domain": {"data": "people", "field": "label"} }, { "name": "x", "type": "time", "range": "width", "round": true, "nice": "year", "domain": {"data": "people", "field": ["born", "died"]} } ], "axes": [ { "type": "x", "scale": "x", "properties": {"labels": {"fontSize": {"value": 18}}} } ], "marks": [ { "type": "text", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -10}, "angle": {"value": -25}, "fill": {"value": "#000"}, "text": {"field": "name"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} } } }, { "type": "rect", "from": {"data": "events"}, "properties": { "enter": { "x": {"scale": "x", "field": "when"}, "y": {"value": -8}, "width": {"value": 1}, "height": {"field": {"group": "height"}, "offset": 8}, "fill": {"value": "#888"} } } }, { "type": "text", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "y": {"scale": "y", "field": "label", "offset": -3}, "fill": {"value": "#000"}, "text": {"field": "label"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 20} } } }, { "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "born"}, "x2": {"scale": "x", "field": "died"}, "y": {"scale": "y", "field": "label"}, "height": {"value": 2}, "fill": {"value": "#557"} } } }, { "type": "rect", "from": {"data": "people"}, "properties": { "enter": { "x": {"scale": "x", "field": "enter"}, "x2": {"scale": "x", "field": "leave"}, "y": {"scale": "y", "field": "label", "offset":-1}, "height": {"value": 4}, "fill": {"value": "#e44"} } } } ] }

Embedded directly with <graph>

Bar chart

{ "version": 2, "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ { "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2, "y": 55}, {"x": 3, "y": 43}, {"x": 4, "y": 91}, {"x": 5, "y": 81}, {"x": 6, "y": 53}, {"x": 7, "y": 19}, {"x": 8, "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ] } ], "scales": [ { "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "y"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } } ] }

Horizontal

{ "version": 2, "width": 400, "height": 400, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ { "name": "table", "values": [ {"t": "a", "v": 28}, {"t": "b", "v": 55}, {"t": "c", "v": 43}, {"t": "d", "v": 91}, {"t": "e", "v": 81}, {"t": "f", "v": 53}, {"t": "g", "v": 19}, {"t": "h", "v": 87}, {"t": "i", "v": 52}, {"t": "j", "v": 48}, {"t": "k", "v": 24}, {"t": "l", "v": 49}, {"t": "m", "v": 87}, {"t": "n", "v": 66}, {"t": "o", "v": 17}, {"t": "p", "v": 27}, {"t": "q", "v": 68}, {"t": "r", "v": 16}, {"t": "s", "v": 49}, {"t": "t", "v": 15} ] } ], "scales": [ { "name": "x", "range": "width", "domain": {"data": "table", "field": "v"} }, { "name": "y", "range": "height", "type": "ordinal", "domain": {"data": "table", "field": "t"} } ], "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "y": {"scale": "y", "field": "t"}, "height": {"scale": "y", "band": true, "offset": -1}, "x": {"scale": "x", "value": 0}, "x2": {"scale": "x", "field": "v"} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } } ] }

Namespaces

XOWA

Getting started

Android

Help

Blog

Donate