Cedar

Integrated with ArcGIS

Use url / query or featureSet

Smart Defaults

(with overrides)

Extend, re-use, share

Process

{}
definition

Getting started

Let's build this chart

Install with package manager

npm install --save @esri/cedar

or yarn add @esri/cedar

Or from CDN

<!-- load the amCharts base library -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<!-- for bar, line, and area charts -->
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- optionally load calcite theme -->
<script src="https://unpkg.com/@esri/cedar/dist/umd/themes/amCharts/calcite.js"></script>
<!-- load cedar -->
<script src="https://unpkg.com/@esri/cedar"></script>

Build definition

var definition = {};

Just a POJO
Minimum: type, datasets, series

Definition `type`

definition.type = 'bar';

Predefined: 'bar', 'line', 'scatter', 'pie'
Or provide your own: specification: {...}

Definition `datasets`

definition.datatsets = [{
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0",
  query: { orderByFields: "POPULATION DESC" }
}]

Definition `series`

definition.series = [
  {
    category: {field:"STATE_NAME",label:"US State"},
    value: {field:"POPULATION",label:"Population"}
  }
]

Create chart instance (ESM)

import { Chart } from '@esri/cedar';

// create a new cedar chart at a specified element
const myChart = new Chart('elementId', definition)

Create chart instance (global)

// create a new cedar chart at a specified element
var myChart = new cedar.Chart('elementId', definition)

Show the chart

// execute query and render chart
cedarChart.show()

See the complete Chart API

Working with maps

Charting features

Dataset `data`

definition.datatsets = [{
  data: { features: graphics }
}]

Expects a FeatureSet

Use JavaScript to filter/sort

graphics.sort(function(a, b) {
  return b.attributes.POPULATION - a.attributes.POPULATION;
});

Aggregating map data

Dataset `url` with aggregate `query`

definition.datasets: [{
  url: "https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/It's_a_Tornado_Map/FeatureServer/0",
  query: {
    groupByFieldsForStatistics: "state",
    outStatistics: [{
      statisticType: "sum",
      onStatisticField: "injuries",
      outStatisticFieldName: "injuries_SUM"
    }]
  }
}]

Accepts any valid query parameters

Client-side queries

Update the chart `data` and re-`render()`

// Query the features on the client using FeatureLayerView.queryFeatures
return featureLayerView.queryFeatures(query).then(function(results) {
  chart.datasets('tracts').data = results;
  chart.render();
}

Chart types

Overriding chart defaults

definition.overrides = {
  categoryAxis: {
    labelRotation: -45
  },
  legend: {
    enabled: true
  }
}

Accepts any amCharts config parameters

Better to use cedar API

definition.overrides = {
  categoryAxis: {
    labelRotation: -45
  }
}

definition.legend = {
  visible: true
}

Decoding domain values

"domains": {
  "sheltstat": {
    "type": "codedValue",
    "name": "ShelterCode",
    "description": "Shelter Codes",
    "codedValues": [
      {
        "name": "Open",
        "code": 1
      },
      {
        "name": "Closed",
        "code": 2
      },
      {
        "name": "Full",
        "code": 3
      }
    ]
  }
}