0

I am Using React and chartjs for the project. where I receive data for chartjs from API call. There are radio buttons on screen when user selects any radio button API call is made and new data is displayed on chart. But the issue is when ever one hover over chart it toggles between previews data and recent data. I know that update() function will help it but I am not sure where to call update() in my case.

class CountByUserGraph extends React.Component {
  constructor() {
    super();
    this.state = { selectedOption: "A" };
  }

  componentDidMount() {
    this.makeApiCall();
  }

  makeApiCall = () => {
    countByUserGraph(this.state.selectedOption) // API CALL
      .then(response => {
        // recieves data
        this.getChartData(data);
      })
      .catch(err => console.log(err));
  };
  getChartData = data => {
    let myChart = document.getElementById("myChart0").getContext("2d");
    const CountValue = data.map(a => a.countValue);
    const CountMonth = data.map(a => a.month);
    var data = {
      labels: CountMonth,
      datasets: [
        {
          label: "Count",
          data: CountValue
        }
      ]
    };

    var option = {
      responsive: true
      // Options
    };

    let massPopChart = new Chart.Line(myChart, { data: data, options: option });
  };

  handleOptionChange = changeEvent => {
    this.setState({ selectedOption: changeEvent.target.value }, function() {
      this.makeApiCall();
    });
  };

  render() {
    return (
      <div>
        <form className="graph-filter">
          <div>
            <input
              type="radio"
              id="A"
              name="A"
              checked={this.state.selectedOption === "A"}
              onClick={this.handleOptionChange}
              value="A"
            />
            <label htmlFor="A">A</label>
          </div>

          <div>
            <input
              type="radio"
              id="B"
              name="B"
              checked={this.state.selectedOption === "B"}
              onClick={this.handleOptionChange}
              value="B"
            />
            <label htmlFor="B">B</label>
          </div>
        </form>
        <canvas id="myChart0"></canvas>
      </div>
    );
  }
}
2
  • Probably you will be creating two cart objects by initializing it twice. Why can't you use update() function.? Commented Dec 17, 2019 at 5:57
  • @JohnsonCherian that is where I am having hard time to figure it out where and how call update() Commented Dec 17, 2019 at 6:03

2 Answers 2

1

You can attach the map referance to the class and once data changes use this referance. Modified your code.

class CountByUserGraph extends React.Component {

  this.massPopChart;

  constructor() {
    super();
    this.state = { selectedOption: "A" };
  }

  componentDidMount() {
    this.makeApiCall();
  }

  makeApiCall = () => {
    countByUserGraph(this.state.selectedOption) // API CALL
      .then(response => {
        // recieves data
        this.getChartData(data);
      })
      .catch(err => console.log(err));
  };
  getChartData = data => {
    let myChart = document.getElementById("myChart0").getContext("2d");
    const CountValue = data.map(a => a.countValue);
    const CountMonth = data.map(a => a.month);
    var data = {
      labels: CountMonth,
      datasets: [
        {
          label: "Count",
          data: CountValue
        }
      ]
    };

    var option = {
      responsive: true
      // Options
    };

    if(this.massPopChart){
       massPopChart.data = data;
       //massPopChart.config.data = data; //use this if above code does not work
       massPopChart.update();
    }
    else{
       this.massPopChart = new Chart.Line(myChart, { data: data, options: option });
    } 
  };

  handleOptionChange = changeEvent => {
    this.setState({ selectedOption: changeEvent.target.value }, function() {
      this.makeApiCall();
    });
  };

  render() {
    return (
      <div>
        <form className="graph-filter">
          <div>
            <input
              type="radio"
              id="A"
              name="A"
              checked={this.state.selectedOption === "A"}
              onClick={this.handleOptionChange}
              value="A"
            />
            <label htmlFor="A">A</label>
          </div>

          <div>
            <input
              type="radio"
              id="B"
              name="B"
              checked={this.state.selectedOption === "B"}
              onClick={this.handleOptionChange}
              value="B"
            />
            <label htmlFor="B">B</label>
          </div>
        </form>
        <canvas id="myChart0"></canvas>
      </div>
    );
  }
}
Sign up to request clarification or add additional context in comments.

Comments

0

you can call the update function, see the docs here

so in your codesnippet you can update the chart as shown below

let massPopChart = new Chart.Line(myChart, { data: data, options: option });
// for example 
massPopChart.options.title.text = 'new title';
massPopChart.update()

similar way you can update the data also.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.