Esri / cedar

JavaScript Charts for ArcGIS
https://esri.github.io/cedar
257 stars 238 forks source link

Cedar with React #475

Open kpermenter opened 3 years ago

kpermenter commented 3 years ago

I'm trying to render a Cedar chart as a React component and am a bit lost. I'm using create-react-app and have installed @esri/cedar and the mentioned dependencies.

Is there anyway you could give a simple example of how to convert a basic Cedar chart like the one below into a React component?

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ]
}
tomwayson commented 3 years ago

@kpermenter

I've created an example code sandbox with comments here: https://codesandbox.io/s/esri-cedar-in-react-forked-kyoc2?file=/src/App.js

Let me know if you have further questions.

tomwayson commented 3 years ago

Also, I've made proposed updates to the README to show how to import Cedar and amCharts in modern web applications that use bundlers like webpack: #476

I'm assuming that would have been helpful. I welcome your input on that.

kpermenter commented 3 years ago

@tomwayson this is so helpful! Thank you!