Home Forums Chart Support Animation not working after render. I want after 5 seconds animation show from 0

Animation not working after render. I want after 5 seconds animation show from 0

Viewing 6 posts - 1 through 6 (of 6 total)
  • #37923

    /* eslint-disable */

    import Container from ‘react-bootstrap/Container’;
    import { useState,useEffect } from ‘react’;
    import Row from ‘react-bootstrap/Row’;
    import Col from ‘react-bootstrap/Col’;
    import ‘./App.css’;
    import ‘./assets/css/style.css’;
    import ‘bootstrap/dist/css/bootstrap.min.css’;
    import Header from ‘./Component/Header/header’;
    import { faPaperPlane } from ‘@fortawesome/free-solid-svg-icons’;

    import { Table, Tab, Tabs,Button, InputGroup, FormControl, FloatingLabel, Form } from ‘react-bootstrap’;

    import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’;
    // import ApexCharts from ‘apexcharts’;
    function App() {
    const [key, setKey] = useState(‘active’);
    const [key1, setKey1] = useState(‘Manual’);
    const [xval, setXval] = useState(20);
    const [yval, setYval] = useState(30);

    var CanvasJSReact = require(‘./assets/canvas/canvasjs.react’);
    var CanvasJS = CanvasJSReact.CanvasJS;
    var CanvasJSChart = CanvasJSReact.default.CanvasJSChart

    useEffect(() => {

    setInterval(() => {
    var xval = setXval(Math.floor(Math.random() * 20));
    var yval = setYval(Math.floor(Math.random() * 30));
    console.log(‘xval’, xval, yval);
    }, 5000);
    }, []);

    // setXval()
    // setYval()
    var points_val = [{ x: 0, y: 0 }, { x: xval, y: yval}]
    var options = {
    animationEnabled: true,
    animationDuration: 4000,
    title: {
    text: “Line Chart”
    },
    axisX: {
    title: “Axis X Title”,
    labelAngle: 0,
    minimum: 0
    },
    axisY: {
    title: “Axis Y Title”,
    gridThickness: 0,
    },
    data: [{
    type: “line”,
    dataPoints: points_val
    }]
    }

    return (
    <div className=”App “>
    <Header />
    <Container fluid className=’mt-2′>

    <Row >
    <Col xs={12} md={3}>
    <div className=’chatbox’>
    <div className=’text-center chatbox-head’>
    <h4>Chat</h4>
    </div>
    <div className=’inputboxs’>
    <form>
    <InputGroup >
    <FormControl
    placeholder=”Message or /help”
    aria-label=”Message or /help”
    aria-describedby=”basic-addon2″
    />
    <Button variant=”primary”><FontAwesomeIcon icon={faPaperPlane}/></Button>
    </InputGroup>
    </form>

    </div>
    </div>
    </Col>
    <Col xs={12} md={5}>
    {/* <div id=”chart”>
    </div> */}
    <CanvasJSChart options = {options}
    /* onRef={ref => this.chart = ref} */
    />
    <div className=’bits’>
    <Tabs
    id=”controlled-tab-example”
    activeKey={key1}
    onSelect={(k) => setKey1(k)}
    className=”my-3″
    >
    <Tab eventKey=”Manual” title=”Manual”>
    <div className=’activechart’>
    <Button variant=”primary” className=’buts’>Bet</Button>
    </div>
    <div className=’Base my-3′>
    <Row className=”g-2″>
    <Col md={8}>
    <Form.Label className=’text-left’>Bet</Form.Label>
    <InputGroup className=”mb-3″>
    <Form.Select id=”button-addon1″ style={{paddingRight:0}} >
    <option value=”btc”>BTC</option>
    <option value=”etc”>ETC</option>
    <option value=”bnb”>BNB</option>
    </Form.Select>
    <FormControl
    placeholder=”bet”
    aria-label=”bet”
    type=’number’
    aria-describedby=”basic-addon1″
    />
    </InputGroup>

    </Col>
    <Col md={4}>
    <Form.Label className=’text-left’>Auto Cash Out</Form.Label>
    <Form.Control type=”number” placeholder=’auto cash out’ />

    </Col>
    </Row>
    <Row>
    <Col md>
    <Button variant=”outline-primary” className=’form-control buts’>5%</Button>
    </Col>
    <Col md>
    <Button variant=”outline-primary” className=’form-control buts’>10%</Button>
    </Col>
    <Col md>
    <Button variant=”outline-primary” className=’form-control buts’>25%</Button>
    </Col>
    <Col md>
    <Button variant=”outline-primary” className=’form-control buts’>50%</Button>
    </Col>
    </Row>

    </div>
    </Tab>
    <Tab eventKey=”Auto” title=”Auto”>
    <div className=’activechart’>
    <div className=’activechart’>
    <Button variant=”primary” className=’buts’>Bet</Button>
    </div>
    <div className=’Base my-3′>
    <Row className=”g-2″>
    <Col md={8}>
    <Form.Label className=’text-left’>Bet</Form.Label>
    <InputGroup className=”mb-3″>
    <Form.Select id=”button-addon1″ style={{paddingRight:0}} >
    <option value=”btc”>BTC</option>
    <option value=”etc”>ETC</option>
    <option value=”bnb”>BNB</option>
    </Form.Select>
    <FormControl
    placeholder=”bet”
    aria-label=”bet”
    type=’number’
    aria-describedby=”basic-addon1″
    />
    </InputGroup>

    </Col>
    <Col md={4}>
    <Form.Label className=’text-left’>Auto Cash Out</Form.Label>
    <Form.Control type=”number” placeholder=’auto cash out’ />

    </Col>
    </Row>
    <Row>
    <Col md>
    <Form.Label className=’text-left’>On Win :</Form.Label>
    <div >
    <Form.Check
    inline
    label=”Base Bet ”
    name=”win”
    type=”radio”
    />
    <Form.Check
    inline
    label=”Increase Bet”
    name=”win”
    type=”radio”
    />
    </div>
    <Form.Control type=”number” placeholder=”Bet” />
    </Col>
    <Col md>
    <Form.Label className=’text-left’>On Loss :</Form.Label>
    <div >
    <Form.Check
    inline
    label=”Base Bet ”
    name=”loss”
    type=”radio”
    />
    <Form.Check
    inline
    label=”Increase Bet”
    name=”loss”
    type=”radio”
    />
    </div>
    <Form.Control type=”number” placeholder=”Bet” />
    </Col>
    </Row>

    </div>
    </div>
    </Tab>
    </Tabs>
    </div>
    </Col>
    {/* ————Bet table and history table Start ——————*/}
    <Col xs={12} md={4} className=”tabbet”>
    <Tabs
    id=”controlled-tab-example”
    activeKey={key}
    onSelect={(k) => setKey(k)}
    className=”mb-3″
    >
    <Tab eventKey=”active” title=”Active Bet”>
    <Table responsive >
    <thead variant=”dark”>
    <tr>
    <th>Player</th>
    <th>@ </th>
    <th>Bet</th>
    <th>Profit</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <td>3</td>
    <td >Larry the Bird</td>
    <td>@twitter</td>
    <td>@mdo</td>
    </tr>
    </tbody>
    </Table>
    </Tab>
    <Tab eventKey=”history” title=”History”>
    <Table responsive >
    <thead variant=”dark”>
    <tr>
    <th>Player</th>
    <th>@ </th>
    <th>Bet</th>
    <th>Profit</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <td>3</td>
    <td >Larry the Bird</td>
    <td>@twitter</td>
    <td>@mdo</td>
    </tr>
    </tbody>
    </Table>
    </Tab>
    </Tabs>

    </Col>
    </Row>
    </Container>
    </div>
    );
    }

    export default App;

    #37939

    @friday096,

    Sorry, it’s not possible to animate the chart every 5 seconds as the chart animates only on the first render, as of now.

    —-
    Manoj Mohan
    Team CanvasJS

    #37952

    https://www.bustabit.com/play
    You look this website and i want like that graph.
    Its possible in this?

    #37970

    @friday096,

    You can create similar graph that you are referring in the link shared above by creating a dynamic chart and by setting labelAutoFit to false as well as setting y-axis maximum. Please take a look at this StackBlitz project for an example on the same in React.

    Dynamic Live Chart in React

    —-
    Manoj Mohan
    Team CanvasJS

    #37975

    Thanks I want Like That. Can we remove that Canvas Trial on above written?

    #37992

    @friday096,

    CanvasJS commercial version doesn’t carry any watermark or credit link. You can purchase commercial version from the license page.

    For further queries regarding commercial version, you can write to us at sales@canvasjs.com.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.