I am trying to display Linechart using chartist.js. I have used reduce() to extract data from props. I have keys as year and values as average value in averages object. But I am not able to display the line chart as I am not able to see any lines on chart I am getting type error. I have created React ponent and inside ponentDidMount() I have added my line chart code. I think the issue is related to javascript/reactjs and not chartist.js

Code:

class Linechart extends Component {

  constructor(props){
    super(props);
  }

  ponentDidMount(){

        const totals = this.props.bowldata.reduce((a, {season, econ})  => {

          if (!a[season]) {
            a[season] = {sum: 0, count: 0};
          }

          if(econ !== null){
            a[season].count++;
            a[season].sum += parseInt(econ);

          }

          return a; 

      }, {});

        const averages = {};

        Object.keys(totals).forEach(key => {   

          averages[key] = totals[key].sum / totals[key].count;

        });

      console.log(averages);

      const series = Object.values(averages);

      const labels = Object.keys(averages);

        const data = {
            series:series,
            labels:labels
        }

        this.linechart = new Chartist.Line('.ct-line-chart', data, options);
  }

  render(){
    return(
      <div>
          <div className="col-md-3 col-xs-6 ct-line-chart">
              {this.linechart}
          </div>
        </div>
    )}
}

export default Linechart ;

Using .forEach() I am trying to create new array of objects with sum/count as a value and key as year.

Screenshot:

I am trying to display Linechart using chartist.js. I have used reduce() to extract data from props. I have keys as year and values as average value in averages object. But I am not able to display the line chart as I am not able to see any lines on chart I am getting type error. I have created React ponent and inside ponentDidMount() I have added my line chart code. I think the issue is related to javascript/reactjs and not chartist.js

Code:

class Linechart extends Component {

  constructor(props){
    super(props);
  }

  ponentDidMount(){

        const totals = this.props.bowldata.reduce((a, {season, econ})  => {

          if (!a[season]) {
            a[season] = {sum: 0, count: 0};
          }

          if(econ !== null){
            a[season].count++;
            a[season].sum += parseInt(econ);

          }

          return a; 

      }, {});

        const averages = {};

        Object.keys(totals).forEach(key => {   

          averages[key] = totals[key].sum / totals[key].count;

        });

      console.log(averages);

      const series = Object.values(averages);

      const labels = Object.keys(averages);

        const data = {
            series:series,
            labels:labels
        }

        this.linechart = new Chartist.Line('.ct-line-chart', data, options);
  }

  render(){
    return(
      <div>
          <div className="col-md-3 col-xs-6 ct-line-chart">
              {this.linechart}
          </div>
        </div>
    )}
}

export default Linechart ;

Using .forEach() I am trying to create new array of objects with sum/count as a value and key as year.

Screenshot:

• javascript
• reactjs

• 3 The line indicated in the OP is not the line giving the error that is in the console image, which is something like data.normalized[seriesIndex].forEach is not a function. – RobG Commented Jun 24, 2018 at 9:26
• @RobG How can I find average ? I want sum/count as a value and key as year. – stone rock Commented Jun 24, 2018 at 9:32
• @RobG I have edited my question please see it. – stone rock Commented Jun 24, 2018 at 9:37

1 Answer 1

Change your code like this see if the problem is gone. In docs it shows series should be a multidimensional array.

 const data = {
     series:[series],
     labels:labels
 }