Graph: Difference between revisions

From RAJ INFO
Jump to navigation Jump to search
Created page with "{{Graph:Chart|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:Chart|width=100|height=100|type=pie|legend=Legende..."
 
No edit summary
Line 1: Line 1:
{{Graph:Chart|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}}
  "width": 400,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 20, "right": 10},


{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
  "data": [
|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
    {
|y2=7,8,9,8,8,9,10,9,5|showValues=}}
      "name": "table",
      "values": [
        {"category":"A", "amount":28},
        {"category":"B", "amount":55},
        {"category":"C", "amount":43},
        {"category":"D", "amount":91},
        {"category":"E", "amount":81},
        {"category":"F", "amount":53},
        {"category":"G", "amount":19},
        {"category":"H", "amount":87},
        {"category":"I", "amount":52}
      ]
    }
  ],


{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
  "signals": [
|legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
    {
|y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}
      "name": "tooltip",
      "init": {},
      "streams": [
        {"type": "rect:mouseover", "expr": "datum"},
        {"type": "rect:mouseout", "expr": "{}"}
      ]
    }
  ],
 
  "predicates": [
    {
      "name": "tooltip", "type": "==",
      "operands": [{"signal": "tooltip._id"}, {"arg": "id"}]
    }
  ],
 
  "scales": [
    { "name": "xscale", "type": "ordinal", "range": "width",
      "domain": {"data": "table", "field": "category"} },
    { "name": "yscale", "range": "height", "nice": true,
      "domain": {"data": "table", "field": "amount"} }
  ],
 
  "axes": [
    { "type": "x", "scale": "xscale" },
    { "type": "y", "scale": "yscale" }
  ],
 
  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "properties": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": true, "offset": -1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value":0}
        },
        "update": { "fill": {"value": "steelblue"} },
        "hover": { "fill": {"value": "red"} }
      }
    },
    {
      "type": "text",
      "properties": {
        "enter": {
          "align": {"value": "center"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.category"},
          "dx": {"scale": "xscale", "band": true, "mult": 0.5},
          "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -5},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": {
            "rule": [
              {
                "predicate": {"name": "tooltip", "id": {"value": null}},
                "value": 0
              },
              {"value": 1}
            ]
          }
        }
      }
    }
  ]
}

Revision as of 15:00, 14 May 2016

{

 "width": 400,
 "height": 200,
 "padding": {"top": 10, "left": 30, "bottom": 20, "right": 10},
 "data": [
   {
     "name": "table",
     "values": [
       {"category":"A", "amount":28},
       {"category":"B", "amount":55},
       {"category":"C", "amount":43},
       {"category":"D", "amount":91},
       {"category":"E", "amount":81},
       {"category":"F", "amount":53},
       {"category":"G", "amount":19},
       {"category":"H", "amount":87},
       {"category":"I", "amount":52}
     ]
   }
 ],
 "signals": [
   {
     "name": "tooltip",
     "init": {},
     "streams": [
       {"type": "rect:mouseover", "expr": "datum"},
       {"type": "rect:mouseout", "expr": "{}"}
     ]
   }
 ],
 "predicates": [
   {
     "name": "tooltip", "type": "==", 
     "operands": [{"signal": "tooltip._id"}, {"arg": "id"}]
   }
 ],
 "scales": [
   { "name": "xscale", "type": "ordinal", "range": "width",
     "domain": {"data": "table", "field": "category"} },
   { "name": "yscale", "range": "height", "nice": true,
     "domain": {"data": "table", "field": "amount"} }
 ],
 "axes": [
   { "type": "x", "scale": "xscale" },
   { "type": "y", "scale": "yscale" }
 ],
 "marks": [
   {
     "type": "rect",
     "from": {"data":"table"},
     "properties": {
       "enter": {
         "x": {"scale": "xscale", "field": "category"},
         "width": {"scale": "xscale", "band": true, "offset": -1},
         "y": {"scale": "yscale", "field": "amount"},
         "y2": {"scale": "yscale", "value":0}
       },
       "update": { "fill": {"value": "steelblue"} },
       "hover": { "fill": {"value": "red"} }
     }
   },
   {
     "type": "text",
     "properties": {
       "enter": {
         "align": {"value": "center"},
         "fill": {"value": "#333"}
       },
       "update": {
         "x": {"scale": "xscale", "signal": "tooltip.category"},
         "dx": {"scale": "xscale", "band": true, "mult": 0.5},
         "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -5},
         "text": {"signal": "tooltip.amount"},
         "fillOpacity": {
           "rule": [
             {
               "predicate": {"name": "tooltip", "id": {"value": null}},
               "value": 0
             },
             {"value": 1}
           ]
         }
       }
     }
   }
 ]

}