.specification Property

Getter/Setter for the specification. Allows the developer to make changes to the specification, typically to the .template to make run-time changes to the chart appearance.

Getter Syntax

var spec = chart.specification;

or dig deeper into the spec object

var tmpl = chart.specification.template;

Setter Syntax

chart.specification = mySpecObject;

or set properties deeper in the spec object

chart.specification.template = myTmplObject;

Example Code

var chart = new Cedar();

//specification - usually this would be loaded from a file...
var spec =  {
  "inputs": [
    {"name": "count", "type": ["numeric","string"], "required": true},
    {"name": "group", "type": ["string"], "required": false}
  ],
  "template":{
    "height": 300,
    "width": 850,    
    "padding": {
      "bottom": 20,
      "left": 10,
      "right": 10,
      "top": 10
    },
    "axes": [
      {
        "type": "x",
        "scale": "x",
        "title": "X-Axis"
      }
    ],
    "data": [
      {
        "name": "table",
        "url": "{data}",
        "format": {
          "property": "features"
        }
      }
    ],    
    "marks": [
      {
        "from": {
          "data": "table"
        },
        "properties": {
          "enter": {
            "width": {
              "band": true,
              "offset": -1,
              "scale": "x"
            },
            "x": {
              "field": "attributes.{group.field}",
              "scale": "x"
            },
            "y": {
              "field": "attributes.{count.field}_SUM",
              "scale": "y"
            },
            "y2": {
              "scale": "y",
              "value": 0
            }
          },
          "hover": {
            "fill": {
              "value": "green"
            }
          },
          "update": {
            "fill": {
              "value": "#ccc"
            }
          }
        },
        "type": "rect"
      }
    ],    
    "scales": [
      {
        "domain": {
          "data": "table",
          "field": "attributes.{group.field}"
        },
        "name": "x",
        "range": "width",
        "type": "ordinal"
      },
      {
        "domain": {
          "data": "table",
          "field": "attributes.{count.field}_SUM"
        },
        "name": "y",
        "nice": true,
        "range": "height"
      }
    ]
  }
};

//create the dataset w/ mappings
var dataset = {
  "url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
  "mappings":{
    "group": {"field":"Zip","label":"ZIP Code"},
    "count": {"field":"Number_of","label":"Total Students"}
  }
};

//assign to the chart
chart.dataset = dataset;
chart.specification = spec;


// make the chart visible by attaching it to a DOM node
chart.show({
  elementId: "#chart"
});

Edit this page on GitHub