Error when i run with condition and without condition run fine

[Friday096]

/* 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 2 years, 6 months ago by Friday096.

[Manoj Mohan]

@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

[Friday096]

Thanks But i was solved