Before starting on this tutorial, see Loading Cedar for details on how to load Cedar and its dependencies on the page.

Cedar Properties

A Cedar chart needs four things: Chart Type, Data, Mappings, DOM Element. First we create a new Cedar object and specify we want a bar chart. In this example we simply use `type: "bar"`, but instead we could refer to the full URL to a chart specification.
var chart = new Cedar({
  "type":"bar"
});
Now we need to define the data. We can either use an array of data that we have calculated in our code, or we can refer to an ArcGIS GeoServices layer. For the GeoServices Layer, Cedar will make the HTTP API calls to request data for us.
chart.datasets = [{
  "url":"https://server.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/4",
  "query": {
    "orderByFields": "TotPop DESC"
  };
}],
Third, we now create a series to plot the dataset on the chart
chart.series = [
  {
    "category": {"field":"STATE_NAME","label":"US State"},
    "value": {"field":"TotPop","label":"Population"}
  }
]
Lastly, we now show the chart and bind it to an HTML DOM element.
chart.show({
  elementId: "#chart"
});
And that's it, we now have a chart! See the API documentation to learn more about the above properties.

Constructor Options

We could also create the instance of the Cedar chart by passing those properties as options to the constructor:
  var chart = new Cedar({
    "type": "bar",
    "datasets": [{
        "url":"https://maps7.arcgisonline.com/arcgis/rest/services/Veterans_Proportion_From_Population/MapServer/0",
      "query": {
        "orderByFields": "TotPop DESC"
      }
    }],
    "series": [
      {
        "category": {"field":"STATE_NAME","label":"US State"},
        "value": {"field":"TotPop","label":"Population"}
      }
    ]
  });

  // show the chart and bind it to the DOM
  chart.show({
    elementId: '#chart'
  });

Learn more

You can play around with this chart in a JSFiddle:

Then explore the Examples to see how to use other chart types, override chart defaults and styles, handle events, and integrate charts with ArcGIS maps.