Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cedar with React #475

Open
kpermenter opened this issue Nov 11, 2020 · 3 comments
Open

Cedar with React #475

kpermenter opened this issue Nov 11, 2020 · 3 comments
Assignees

Comments

@kpermenter
Copy link

kpermenter commented Nov 11, 2020

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
Copy link
Member

@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
Copy link
Member

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
Copy link
Author

@tomwayson this is so helpful! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants