Integrate performance chart with React

[Jeremy]

Hello,

I made a simple react application called webapp using “npx create-react-app webapp”.
I then copied the canvasjs.min.js and canvas.react.js files into the src directory.
Then I replaced the App.js with the code in this react gallery for the performance chart (https://canvasjs.com/react-charts/performance-demo-chart/)
However when I run “npm start”, the browser returns the error below:
===============================================
./src/index.js
Attempted import error: ‘./App’ does not contain a default export (imported as ‘App’).
===============================================

I am not sure how to use JSFiddle, so here is my App.js

/* App.js */
var React = require(‘react’);
var Component = React.Component;
var CanvasJSReact = require(‘./canvasjs.react’);
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

var startTime = 0, endTime = 0;

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

render() {
var limit = 50000;
var y = 100;
var data = [];
var dataSeries = { type: “line” };
var dataPoints = [];

for (var i = 0; i < limit; i += 1) {
y += Math.round(Math.random() * 10 – 5);
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: “Try Zooming – Panning”
},
data: data // random data
}

startTime = new Date();

return (
<div>
<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*/}
<span id=”timeToRender” style={spanStyle}></span>
</div>
);
}
}

module.exports = App;

[Adithya Menon]

@jeremy,

The issue seems to be due to the breaking changes of ES6 modules (import and export) made in Webpack that was introduced in v2.2.0-rc.5.

Please find a working sample project here.

—
Adithya Menon
Team CanvasJS

[Jeremy]

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

[Adithya Menon]

@jeremy,

You can get the reference to the chart instance using onRef. This allows you to access all chart properties and methods. Kindly take a look at the code snippet below for an example on exporting chart with a button click,

handleClick() {
   this.chart.exportChart({format:"png"});
}

Please find a working sample project here.

—
Adithya Menon
Team CanvasJS

[Jeremy]

Cheers @adithya, that worked!