Example

Code

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
    #resizable { width: 750px; height: 550px; padding: 0.5em; }
  </style>

<script>
  //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 datasets = [
    {
      "url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "query": {
        "groupByFieldsForStatistics": "Type",
        "orderByFields": "Number_of_SUM DESC",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      }
    }
  ];

  var series = [
    {
      "category": { "field": "Type", "label": "Facility Use" },
      "value": { "field":"Number_of_SUM","label":"Total Students" }
    }
  ];


  chart.tooltip = {
    "title": "{Type}",
    "content": "{Number_of_SUM} Students in {Type}"
  }

  //assign to the chart
  chart.datasets = datasets;
  chart.series = series;

  //show the chart
  chart.show({
    elementId: "#chart-url"
  });

  $(function() {
    $( "#resizable" ).resizable({
      resize: function() { chart.update(); }
    });
  });
</script>

Example: Inline Data

Code

<script>

  var chart2 = new Cedar({"type": "bar"});

  var datasets2 = [
    {
      "data": {
        "features":[{"attributes":{"Zip":20005,"Number_of_SUM":327}},{"attributes":{"Zip":20024,"Number_of_SUM":517}},{"attributes":{"Zip":20017,"Number_of_SUM":597}},{"attributes":{"Zip":20015,"Number_of_SUM":707}},{"attributes":{"Zip":20037,"Number_of_SUM":760}},{"attributes":{"Zip":20018,"Number_of_SUM":1052}},{"attributes":{"Zip":20012,"Number_of_SUM":1184}},{"attributes":{"Zip":20007,"Number_of_SUM":1584}},{"attributes":{"Zip":20008,"Number_of_SUM":1625}},{"attributes":{"Zip":20003,"Number_of_SUM":1869}},{"attributes":{"Zip":20009,"Number_of_SUM":1945}},{"attributes":{"Zip":20001,"Number_of_SUM":2164}},{"attributes":{"Zip":20010,"Number_of_SUM":2282}},{"attributes":{"Zip":20019,"Number_of_SUM":3278}},{"attributes":{"Zip":20011,"Number_of_SUM":3817}},{"attributes":{"Zip":20020,"Number_of_SUM":3901}},{"attributes":{"Zip":20032,"Number_of_SUM":4360}},{"attributes":{"Zip":20016,"Number_of_SUM":4681}},{"attributes":{"Zip":20002,"Number_of_SUM":5590}}]
      }
    }
  ];

  var series2 = [
    {
      "category": { "field": "Zip", "label": "Zip Code" },
      "value": { "field":"Number_of_SUM","label":"Total Students" }
    }
  ];

  chart2.tooltip = {
    "title": "{Zip}",
    "content": "{Number_of_SUM} Students in {Zip}"
  }

  //assign to the chart
  chart2.datasets = datasets2;
  chart2.series = series2;

  //show the chart
  chart2.show({
    elementId: "#chart-data",
    renderer: "svg"
  });

</script>