You must be logged in to post your query.
Home › Forums › Chart Support › Error when i run with condition and without condition run fine
/* 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;
@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
Thanks But i was solved
You must be logged in to reply to this topic. Login/Register