Home Forums Chart Support Error when i run with condition and without condition run fine

Error when i run with condition and without condition run fine

Viewing 3 posts - 1 through 3 (of 3 total)
  • #38096

    /* eslint-disable */

    import Container from “react-bootstrap/Container”;
    import { useState, useEffect, createRef, useRef } 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 { randomBustabit } from “./utils/api”;
    import ‘chartjs-adapter-luxon’;
    import StreamingPlugin from ‘chartjs-plugin-streaming’;
    import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
    import {
    Table,
    Tab,
    Tabs,
    Button,
    InputGroup,
    FormControl,
    FloatingLabel,
    Form,
    } from “react-bootstrap”;

    import CanvasJSReact from “./assets/canvas/canvasjs.react”;
    var CanvasJSChart = CanvasJSReact.CanvasJSChart;
    var dps = []; //dataPoints.
    var xVal = dps.length + 1;
    var yVal = 0;
    var updateInterval = 300;
    function App() {
    const [key, setKey] = useState(“active”);
    const [key1, setKey1] = useState(“Manual”);

    const [timeLeft, setTimeLeft] = useState(5);

    const [busted, setBusted] = useState();

    const [dekho, setDekho] = useState(0);
    // const [startcount, setStartCount] = useState(100);
    let [startpoint, setStartPoint] = useState(100);
    const [endcount, setEndCount] = useState();

    const [dataPoints, setDataPoints] = useState([{ x: 0, y: 0 }]);

    // const [options, setOptions] = useState({

    // });

    var chartRef = useRef();
    var chart = chartRef.current;

    var options = {
    title: {
    verticalAlign: “center”,
    },title: {
    text: timeLeft
    ? “Next round start in ” + timeLeft
    : busted == true
    ? “! Oops Busted ” + ((dekho/100).toFixed(2)) + ” x ”
    : ((startpoint/100).toFixed(2)) + ” x “,
    verticalAlign: “center”,
    },
    axisX: {
    labelAutoFit: false,
    labelAngle: 0,
    minimum: 0,
    },
    axisY: {
    labelAutoFit: false,
    gridThickness: 0,
    },
    data: [{
    type: “line”,
    dataPoints : dps
    }]
    }

    const updateChart = () =>{

    yVal = xVal**2;
    dps.push({x: xVal,y: yVal});
    xVal++;
    console.log(chart,’chart+++’)
    chart.render();
    chart.axisY[0].set(“maximum”, yVal+1);
    setTimeout(updateChart, updateInterval);

    }

    useEffect(() => {
    if (timeLeft > 0) {
    setTimeout(() => setTimeLeft(timeLeft – 1), 1000);
    } else {
    setTimeLeft(0);
    }
    });
    useEffect(()=>{
    if(timeLeft == 0){
    console.log(‘timeup’)
    var abc = chartRef.current;

    console.log(abc,’——‘)
    // setTimeout(updateChart, updateInterval); when u uncomment then other is comment below and its not work fine

    }
    },[timeLeft])

    useEffect(()=>{
    setTimeout(updateChart, updateInterval); //Here is run fine
    })

    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}>

    <CanvasJSChart options = {options}
    onRef={ref => chart = ref}
    // ref={chartRef}
    />

    {/* <canvas

    ref={canvasRef}
    width={500}
    height={300}
    style={{ backgroundColor: “white” }}
    /> */}
    <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;

    • This topic was modified 1 year, 9 months ago by Friday096.
    #38154

    @friday096,

    You can use useRef hook for getting the chart object reference as shown in the code snippet below.

    <CanvasJSChart
            options={options}
            onRef={(ref) => {
              chartRef.current = ref;
            }}
    />

    Also, check out this StackBlitz project for an example on the same.

    If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can understand your scenario better and help you out.

    —-
    Manoj Mohan
    Team CanvasJS

    #38164

    Thanks But i was solved

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

You must be logged in to reply to this topic.