new Cedar( opts )

Create a new chart using an object that can include specification from a template, dataset and mappings, and style overrides. This is optional and any of the parameters can be later specified through accessors as chart.dataset is shown in the example below.

The chart will not appear until .show() is called.

new Cedar( opts )


Name Type Required? Description
definition <string or object> no URL to a complete chart definition (dataset + specification) or an inline definition object.
specification <string or object> no URL to a Cedar specification or an inline specification object.
dataset <object> no dataset object.
type <string> no Shorthand for specifying a URL to a Cedar specification. Can be one of the pre-defined types ('bar', 'bar-horizontal', 'bubble', 'pie', 'scatter', 'time') or a URL to a secificatin JSON file.
baseUrl <string> no The URL of the folder which contains the Cedar script file (cedar.js or cedar.min.js).*
timeout <number> no The maximum amount of time (in milliseconds) to wait for response to asynchronous requests.


  //create a cedar chart using the known 'bar' type
  // this is the same as passing {"specification": "path/to/cedar/charts/bar.json"}
  var chart = new Cedar({"type": "bar"});

  //create the dataset w/ mappings
  var dataset = {
    "query": {
      "groupByFieldsForStatistics": "Zip",
      "outStatistics": [{
        "statisticType": "sum",
        "onStatisticField": "Number_of",
        "outStatisticFieldName": "Number_of_SUM"
      "sort": "Number_of_SUM DESC",
      "x": {"field":"Zip","label":"ZIP Code"},
      "y": {"field":"Number_of_SUM","label":"Total Students"}

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

  //show the chart{
    elementId: "#chart"

* You should not need to set the baseUrl unless you are using Internet Explorer, which is not able to determine this location automatically, and defaults to using as the baseUrl when loading chart pre-defined chart specification JSON files. To prevent this behavior in Internet Explorer, set this to the same URL of the folder where you loaded the Cedar script (cedar.js or cedar.min.js). Example: baseUrl:./js`

Edit this page on GitHub