@esri/cedar


JavaScript Charts for ArcGIS

!cedar

Cedar is a library for crafting and sharing data visualizations that:
- are powered by data from ArcGIS maps, scenes, and services
- include smart default visualization choices
- can be customized to meet your specific needs

See below for how to get started, understand cedar's core concepts, or see demos of cedar in action.

You are looking at the documentation for v1.x of cedar. You can also view the documentation for v0.x of cedar.

Getting Started

$3

NOTE: If you want to use cedar in an Ember.js application, see ember-cli-cedar instead.

You can install cedar and its dependencies with npm:
``bash
npm install --save @esri/arcgis-rest-feature-layer@^2.0.0 @esri/arcgis-rest-request@^2.0.0 amcharts3 @esri/cedar
`

or yarn:

`bash
yarn add @esri/arcgis-rest-feature-layer@^2.0.0 @esri/arcgis-rest-request@^2.0.0 amcharts3 @esri/cedar
`

Alternatively, you can get cedar from the unpkg.com CDN as shown below.

$3

If you're using Cedar in a modern web application built with a bundler like webpack, you can load Cedar and its dependencies using import statements.

`js
// import the amCharts base library
import "amcharts3/amcharts/amcharts";
// in this case, we only need bar charts, so we'll import the appropriate amCharts module
import "amcharts3/amcharts/serial";
// optionally import an amcharts theme; cedar provides a calcite theme
import "@esri/cedar/dist/umd/themes/amCharts/calcite.js";
// import the cedar Chart class
import { Chart } from "@esri/cedar"
`

If you need to use other chart types, or want to use amCharts plugins, import the appropriate amCharts modules _before importing cedar_:

`js
// for pie charts
import "amcharts3/amcharts/pie";
// for scatter and bubble charts
import "amcharts3/amcharts/xy";
// for radar charts
import "amcharts3/amcharts/radar";
`

See the amCharts documentation for more information on importing amCharts modules.

$3

Once cedar is loaded you can create and show the chart at a designated element. First create the element:

`html



`

Then add a script that will configure cedar and render the chart:

`js
// connect to the data
var datasets = [{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "schools",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
}
}];

// designate a one or more series to show the data on the chart
var series = [{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "schools"
}];

// optionally override any of the cart type's default styles
var overrides = {
"categoryAxis": {
"labelRotation": -45
}
}

//create a cedar chart using the known 'bar' type
var elementId = 'chart';
// NOTE: the following line assumes you've imported Chart like:
// import { Chart } from "@esri/cedar";
// if you've loaded the Cedar using script tags
// and are using the cedar global instead
// you should replace this line with:
// var chart = new cedar.Chart(elementId, {"type": "bar"})
var chart = new Chart(elementId, {"type": "bar"})
.datasets(datasets)
.series(series)
.overrides(overrides);

// render the chart
chart.show();
`

See the API documentation for further details on how to work with cedar charts.

See the Demos section below for examples of Cedar working with other libraries like ArcGIS API for JavaScript or React.

$3


You can configure cedar to use a custom implementation of fetch() by setting cedar.config.fetch = myCustomFetch.

Concepts

$3

Cedar charts are built from a definition, which consists of:
- an array of datasets, each has _either_:
- a url to an ArcGIS feature layer along with optional query parameters
- _or_ inline data, which can be a feature set, or an array of features or POJOs
- an array of series that bind that data to the plots (bars, lines, points, etc) on the chart
- and overrides that are specific modifications to the chart type's default styles

$3

Cedar currently provides a set of commonly used chart types including bar, line, area, scatter, bubble, pie, and radar. In the future it will be possible for developers to create custom charts types that can be used by other developers with their own data sources.

$3

#### Charts and Custom Visualizations Beyond the Map

Slides from the 2018 DevSummit

Video from the 2017 DevSummit

Demos

See this code pen to try creating a simple bar chart like the one above.

You can then see and modify the definitions for different types of charts.

You can also see how to use cedar with the ArcGIS API for JavaScript in these examples:
- A chart that aggregates map data
- A chart using layer features as inline data
- Using cedar w/ client-side LayerView queries

See this CodeSandbox for an example of how to use Cedar in React.

$3

Instead of installing and importing Cedar, you can load Cedar and its dependencies by including script tags that point to the CDN (or your locally installed versions of these libraries). This will make the cedar global available to your application.

#### From a CDN

`html











`

If you need to use other chart types, or want to use amCharts plugins, load the appropriate amCharts scripts before loading cedar:

`html









`

Dependencies

Cedar isn't yet another JavaScript charting library. Instead, cedar is a very thin wrapper around other libraries that do the heavy lifting. Cedar uses amCharts library as its charting engine. Cedar also uses @esri/arcgis-rest-feature-layer and @esri/arcgis-rest-request to query feature data. You will need to install these libraries along with cedar in your application. If you are loading cedar from a CDN, please refer to the loading cedar section above for the