Forum Replies Created by Jeremy

Viewing 2 posts - 1 through 2 (of 2 total)
  • in reply to: Integrate performance chart with React #34845

    Cheers @adithya, that worked!

    in reply to: Integrate performance chart with React #34831

    Thank you for the help @Adithya.

    I was able to start up my project using that sample.
    I have another question regarding referencing the chart so that I can update it through functions.

    I call my chart component as such:

    <CanvasJSChart options = {options} onRef={ref => this.chart = ref}/>

    How do I then change the options and render the chart again?
    I have looked at the documentation and that doesn’t not show how to do it in JSX

    Here is my entire App.js for reference:

    import React, { Component } from “react”;
    import { render } from “react-dom”;
    import CanvasJSReact from “./canvasjs.react”;
    var CanvasJSChart = CanvasJSReact.CanvasJSChart;
    var startTime = 0, endTime = 0;

    const ChangeSize = (CanvasJSChart) => {
    CanvasJSChart.options.width = 326
    CanvasJSChart.render()
    }

    class App extends Component {
    componentDidMount() {
    endTime = new Date();
    // document.getElementById(“timeToRender”).innerHTML = “Time to Render: ” + (endTime – startTime) + “ms”;
    }

    render() {
    var limit = 100000;
    var y = 100;
    var data = [];
    var dataSeries = { type: “spline”, name: “first” };
    var dataPoints = [];

    for (var i = 0; i < limit; i += 1) {
    y += Math.round(Math.random() * 1000 – 500);
    dataPoints.push({
    x: i,
    y: y
    });
    }
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);

    const spanStyle = {
    position:’absolute’,
    top: ’10px’,
    fontSize: ’20px’,
    fontWeight: ‘bold’,
    backgroundColor: ‘#d85757’,
    padding: ‘0px 4px’,
    color: ‘#ffffff’
    }

    const options = {
    zoomEnabled: true,
    animationEnabled: true,
    title: {
    text: “Can bus log”
    },
    data: data // random data
    }

    startTime = new Date();

    return (
    <>
    <CanvasJSChart options = {options} onRef={ref => this.chart = ref}/>

    {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}

    <button onClick={this.handleClick}>{“Export Chart”}</button>

    <span id=”timeToRender” style={spanStyle}></span>

    </>
    );
    }
    }

    export default App

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