|
|
Linha 143: |
Linha 143: |
| Teste de gráficos com dados JSON. | | Teste de gráficos com dados JSON. |
|
| |
|
| '''Gráfico de barras'''
| | (TESTE) |
| <graph>
| |
| {
| |
| "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",
| |
| "type": "linear",
| |
| "range": "height",
| |
| "domain": {"data": "table", "field": "y"},
| |
| "nice": true
| |
| }
| |
| ],
| |
| "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"}
| |
| }
| |
| }
| |
| }
| |
| ]
| |
| }
| |
| </graph>
| |
| | |
| <br>'''Gráfico de áreas'''
| |
| <graph>
| |
| {
| |
| "width": 500,
| |
| "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": "linear",
| |
| "range": "width",
| |
| "zero": false,
| |
| "domain": {"data": "table", "field": "x"}
| |
| },
| |
| {
| |
| "name": "y",
| |
| "type": "linear",
| |
| "range": "height",
| |
| "nice": true,
| |
| "domain": {"data": "table", "field": "y"}
| |
| }
| |
| ],
| |
| "axes": [
| |
| {"type": "x", "scale": "x", "ticks": 20},
| |
| {"type": "y", "scale": "y"}
| |
| ],
| |
| "marks": [
| |
| {
| |
| "type": "area",
| |
| "from": {"data": "table"},
| |
| "properties": {
| |
| "enter": {
| |
| "interpolate": {"value": "monotone"},
| |
| "x": {"scale": "x", "field": "x"},
| |
| "y": {"scale": "y", "field": "y"},
| |
| "y2": {"scale": "y", "value": 0},
| |
| "fill": {"value": "steelblue"}
| |
| },
| |
| "update": {
| |
| "fillOpacity": {"value": 1}
| |
| },
| |
| "hover": {
| |
| "fillOpacity": {"value": 0.5}
| |
| }
| |
| }
| |
| }
| |
| ]
| |
| }
| |
| </graph>
| |
| | |
| | |
| '''Gráfico de linhas'''<graph>{
| |
| "version": 2,
| |
| "width": 400,
| |
| "height": 200,
| |
| "data": [
| |
| {
| |
| "name": "table",
| |
| "values": [
| |
| {
| |
| "x": 0,
| |
| "y": 1
| |
| },
| |
| {
| |
| "x": 1,
| |
| "y": 3
| |
| },
| |
| {
| |
| "x": 2,
| |
| "y": 2
| |
| },
| |
| {
| |
| "x": 3,
| |
| "y": 4
| |
| }
| |
| ]
| |
| }
| |
| ],
| |
| "scales": [
| |
| {
| |
| "name": "x",
| |
| "type": "linear",
| |
| "range": "width",
| |
| "zero": false,
| |
| "domain": {
| |
| "data": "table",
| |
| "field": "x"
| |
| }
| |
| },
| |
| {
| |
| "name": "y",
| |
| "type": "linear",
| |
| "range": "height",
| |
| "nice": true,
| |
| "domain": {
| |
| "data": "table",
| |
| "field": "y"
| |
| }
| |
| }
| |
| ],
| |
| "axes": [
| |
| {
| |
| "type": "x",
| |
| "scale": "x"
| |
| },
| |
| {
| |
| "type": "y",
| |
| "scale": "y"
| |
| }
| |
| ],
| |
| "marks": [
| |
| {
| |
| "type": "line",
| |
| "from": {
| |
| "data": "table"
| |
| },
| |
| "properties": {
| |
| "enter": {
| |
| "x": {
| |
| "scale": "x",
| |
| "field": "x"
| |
| },
| |
| "y": {
| |
| "scale": "y",
| |
| "field": "y"
| |
| },
| |
| "y2": {
| |
| "scale": "y",
| |
| "value": 0
| |
| },
| |
| "interpolate": {
| |
| "value": "monotone"
| |
| },
| |
| "stroke": {
| |
| "value": "steelblue"
| |
| },
| |
| "strokeWidth": {
| |
| "value": 3
| |
| }
| |
| }
| |
| }
| |
| }
| |
| ]
| |
| }</graph>
| |
| | |
| | |
| '''Gráfico interativo'''
| |
| <graph mode=interactive>
| |
| {
| |
| // We want to use Vega 2, and specify image size
| |
| "version": 2, "width": 300, "height": 80,
| |
| // Set padding to the same value on all sides
| |
| "padding": 12,
| |
| // By default the background is transparent
| |
| "background": "#edf1f7",
| |
| "marks": [
| |
| {
| |
| // Draw a horizontal line
| |
| "name": "scrollLine",
| |
| "type": "rule",
| |
| "properties": {
| |
| "enter": {
| |
| "x": {"value": 0},
| |
| "y": {"value": 40},
| |
| "x2": {"value": 300},
| |
| "stroke": {"value": "#000"},
| |
| "strokeWidth": {"value": 2}
| |
| }
| |
| }
| |
| },
| |
| {
| |
| // Draw a triangle shape with a hover effect
| |
| // naming objects allows us to reference them later
| |
| "name": "handle",
| |
| "type": "path",
| |
| "properties": {
| |
| "enter": {
| |
| "x": {"value": 200},
| |
| "y": {"value": 40},
| |
| // path syntax is the same as SVG's path tag
| |
| "path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"},
| |
| "stroke": {"value": "#880"},
| |
| "strokeWidth": {"value": 2.5}
| |
| },
| |
| "update": {"fill": {"value": "#fff"} },
| |
| // Change fill color of the object on mouse hover
| |
| "hover": {"fill": {"value": "#f00"} }
| |
| }
| |
| }
| |
| ]
| |
| }
| |
| </graph>
| |
|
| |
|
|
| |
|