How to generate chart from api?

Question

Im using https://www.amcharts.com/docs/v3/ for create chart on my page. and the data come from api.

after i generate the datas to amchart, it give me error message Uncaught TypeError: Cannot read property 'write' of undefined

the data when i cosole to browser:

and the code for generate the data:

getting data from api

generateChart() {
    const { priceItem } = this.state
    let dataProvider = []
    priceItem.forEach(item => {
      dataProvider.push({
        "date": moment(new Date(item.date)).format('DD-MM-YYYY'),
        "value": item.amount
      })
    })

    var result = simpleConfig(dataProvider)
    this.setState({ config: result })
  }

and i create config in another file:

export const simpleConfig = (dataProvider) => {
  dataProvider.map(data => {
    console.log(data)
    let config = {
      "type": "stock",
      "theme": "light",
      "dataDateFormat": "DD-MM-YYYY",
      "dataSets": [{
        "title": "first data set",
        "fieldMappings": [{
          "fromField": "value",
          "toField": "value"
        }, {
          "fromField": "volume",
          "toField": "volume"
        }],
        "dataProvider": data,
        "categoryField": "date"
      }],

      "panels": [{
        "showCategoryAxis": false,
        "title": "value",
        "percentHeight": 70,
        "stockGraphs": [{
          "id": "g1",
          "valueField": "value",
          "comparable": false,
          "compareField": "value",
          "balloonText": "[[title]]:<b>[[value]]</b>",
          "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
        }],
        "stockLegend": {
          "periodValueTextComparing": "[[percents.value.close]]%",
          "periodValueTextRegular": "[[value.close]]"
        }
      }],

      "chartCursorSettings": {
        "valueBalloonsEnabled": true,
        "fullWidth": true,
        "cursorAlpha": 0.1,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "valueLineAlpha": 0.5
      },

      "export": {
        "enabled": false
      },

      "responsive": {
        "enabled": true
      }
    }
    return config;
  })
}

then for showing the chart:

<AmCharts.React
  style={{
    width: "100%",
    height: "500px"
  }}
  options={config}
/>

Is there anything i do wrongly?

Answer 1

Mapping your dataProvider in your config method isn't correct. What your code is doing is generating an array of config objects with a single data item in the dataProvider property instead of assigning the entire array to the dataProvider. Just assign your dataProvider variable to your config instead of looping through it:

export const simpleConfig = (dataProvider) => {
    let config = {
      "type": "stock",
      "theme": "light",
      "dataDateFormat": "DD-MM-YYYY",
      "dataSets": [{
        "title": "first data set",
        "fieldMappings": [{
          "fromField": "value",
          "toField": "value"
        }, {
          "fromField": "volume",
          "toField": "volume"
        }],
        "dataProvider": dataProvider,
        "categoryField": "date"
      }],

      "panels": [{
        "showCategoryAxis": false,
        "title": "value",
        "percentHeight": 70,
        "stockGraphs": [{
          "id": "g1",
          "valueField": "value",
          "comparable": false,
          "compareField": "value",
          "balloonText": "[[title]]:<b>[[value]]</b>",
          "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
        }],
        "stockLegend": {
          "periodValueTextComparing": "[[percents.value.close]]%",
          "periodValueTextRegular": "[[value.close]]"
        }
      }],

      "chartCursorSettings": {
        "valueBalloonsEnabled": true,
        "fullWidth": true,
        "cursorAlpha": 0.1,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "valueLineAlpha": 0.5
      },

      "export": {
        "enabled": false
      },

      "responsive": {
        "enabled": true
      }
    }
    return config;
}