Cedar Bar Example

Example of how to create a bar chart with Esri's Cedar charting library http://esri.github.io/cedar/

by tomwayson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.1/vega.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/cedar.js"></script>
<div id="chart"></div>

JavaScript

// see http://esri.github.io/cedar/api/ for an explanation of these properties

// create an instance of 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 = {
  "url": "https://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Education_WebMercator/MapServer/5",
  "query": {
    "groupByFieldsForStatistics": "ZIP_CODE",
    "outStatistics": [{
      "statisticType": "sum",
      "onStatisticField": "TOTAL_STUD",
      "outStatisticFieldName": "TOTAL_STUD_SUM"
    }]
  },
  "mappings": {
    "sort": "TOTAL_STUD_SUM DESC",
    "x": {
      "field": "ZIP_CODE",
      "label": "ZIP Code"
    },
    "y": {
      "field": "TOTAL_STUD_SUM",
      "label": "Total Students"
    }
  }
};

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

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