CODEWITHSUNDEEP
reactjs
Divya
Divya

Reputation: 31

user input to create pie chart using reactjs from form

how to create chart taking input from the user from a form in reactjs

I made a form and pie chart not getting an idea of how to access data from a form

chartData:{
        datasets:[{
              data:[10,20,30,40,50]
                  }]
           }

i want the chart to be created by the inputs form the form

Upvotes: 2

Views: 1184

Answers (3)

Sanaullah
Sanaullah

Reputation: 374

Use the following code will generate a dynamic chart

import React, { Component } from "react";
import {  Pie } from "react-chartjs-2";


export default class App extends Component {
    state = {
        dataPie: {
            datasets: [{
                data: [10, 20, 30]
            }],

        },
        first: "",
        second: "",
    }
    handleSubmit = () => {
        const { dataPie } = this.state;
        this.setState({
            dataPie: {
                ...dataPie,
                datasets: [{
                    ...dataPie.datasets,
                    data: [
                    this.state.first,
                     this.state.second
                       ]
                }]
            }
        })
    }
    handleChange = (evt) => {
        let a = parseInt(evt.target.value)
        this.setState({
            [evt.target.name]: a,
        })
    }
    render() {


        const { data, dataPie } = this.state;
        console.log(dataPie);
        return (
            <React.Fragment>
                <input type="number"
                    value={this.state.first}
                    name="first"
                    onChange={(evt) => this.handleChange(evt)} />
                <input type="number"
                    value={this.state.second}
                    name="second" onChange={(evt) => this.handleChange(evt)} />
                <button onClick={() => this.handleSubmit()}>add data to chart</button>
                <h1>pie chart</h1>
                <Pie data={dataPie} />
            </React.Fragment>

        )
    }
}

Upvotes: 1

Divya
Divya

Reputation: 31

data: [...dataPie.datasets[0].data, this.state.first, this.state.second] }]change this to data: [ this.state.first, this.state.second] }]

Upvotes: 0

Divya
Divya

Reputation: 31

export default class App extends Component {
    state = {
        dataPie: {
            datasets: [{
                data: [10, 20, 30]
            }],

        },
        first: "",
        second: "",
    }
    handleSubmit = () => {
        const { dataPie } = this.state;
        this.setState({
            dataPie: {
                ...dataPie,
                datasets: [{
                    ...dataPie.datasets,
                    data: [...dataPie.datasets[0].data,
                    this.state.first, this.state.second]
                }]
            }
        })
    }
    handleChange = (evt) => {
        let a = parseInt(evt.target.value)
        this.setState({
            [evt.target.name]: a,
        })
    }
    render() {


        const { data, dataPie } = this.state;
        console.log(dataPie);
        return (
            <React.Fragment>
                <input type="number"
                    value={this.state.first}
                    name="first"
                    onChange={(evt) => this.handleChange(evt)} />
                <input type="number"
                    value={this.state.second}
                    name="second" onChange={(evt) => this.handleChange(evt)} />
                <button onClick={() => this.handleSubmit()}>add data to chart</button>
                <h1>pie chart</h1>
                <Pie data={dataPie} />
            </React.Fragment>

        )
    }
}

Upvotes: 1

Related Questions