Dynamic Charts

Hi @cokicoki,

In the examples you have written, you must use the same code as in the sample I wrote above.

You need to use state:

 state = {
    yourVariableName: 10
  };

Function to change the state.

  handleChange = e => {
    this.setState({
      yourVariableName: e.target.value
    });
  };

Charts props:

percent={this.state.yourVariableName}

That's all you need to do to make your charts dynamic.

Best Regards,

Kuba

Hi @cokicoki,

Unfortunately, I can not help you with your database but I wrote a simple snippet to show you how to change dynamically value of the MDBSimpleChart. You should only replace my variable to your data from MySql.

import React from 'react';
import {
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBSimpleChart,
  MDBInput
} from 'mdbreact';

class ChartsPagePro extends React.Component {
  state = {
    variable: 10
  };

  handleChange = e => {
    console.log(e.target.value);
    this.setState({
      variable: e.target.value
    });
  };

  render() {
    return (
      <MDBContainer>
        <h3 className='mt-5'>Minimalistic charts</h3>
        <div style={{ marginTop: '100px' }}>
          <MDBContainer>
            <MDBRow className='text-center'>
              <MDBCol sm='4'>
                <MDBSimpleChart
                  width={100}
                  height={100}
                  strokeWidth={3}
                  percent={this.state.variable}
                  strokeColor='#4FB64E'
                  labelFontWeight='300'
                  labelColor='#000'
                />
                <MDBInput type='number' onChange={this.handleChange}></MDBInput>
              </MDBCol>
            </MDBRow>
          </MDBContainer>
        </div>
      </MDBContainer>
    );
  }
}

export default ChartsPagePro;

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

Hi Kuba,

Thanks so much for your reply and minimalist chart snippet given.

Would you mind and please also give the other snippet charts for : Line chart, Radar chart, Bar chart, Polar Area Chart, Pie Chart, Doughnut Chart as I use them a lot on my web.

I wish that all my charts can perform dynamically and real-time based on the database I have.Thank you very much.