ZingChart: Getting started with React
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. In recent years, its popularity has soared. This is a guide written to allow a user to get started with using React with Zingchart easily.
Let's get started. Make sure you have a recent version of node installed.
We can start by creating a react app by using npm. In your CLI, install by typing
npm install -g create-react-appThen create the app
create-react-app zingchart-appnow change into the app directory cd zingchart-app
Now if you run npm start it will open the default react app on a local port. Close the running app and lets remove the default pages so we can replace them with our new code. Remove everything in the source file by typing this into the CLI: rm -f src/* .
Now lets create two new files in the src/ files: index.css and index.js . We will be putting most of our code into index.js .
Let's import our libraries. At the top of index.js add:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';Now we have to add our Zingchart library. Inside the app folder type npm install zingchart in the CLI. Now that we have it installed, lets import the library. Under the other imports in index.js add import zingchart from 'zingchart'; .
Your index.js should look like this now:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import zingchart from 'zingchart';
React adds to html using components. This means we need to make a chart component so that it gets added to the page. There will be two parts that are important in our JS file. Creating a Zingchart component and rendering the component.
This is how we can make a component:
class Zingchart extends React.Component {
render() {
return (
);
}
}Note that what is returned is what is injected into the index.html page which is the content that we actually see on the browser. So with this code we are looking to inject a div with an id of the chart to link it to a chart configuration (normal way Zingchart works). The code id={this.props.id} will make more sense when we get into the render. Essentially, it will grab the id you set in the React render method.
Inside of our component we will add a method componentDidMount() which will fire when the component mounts the page. This is useful so that we can call our methods, events and most importantly our Zingchart render method once our component loads.
class Zingchart extends React.Component {
render() {
return (
);
}
componentDidMount() {
zingchart.render({
id : this.props.id,
width: (this.props.width || 600),
height: (this.props.height || 400),
data : this.props.data
});
}
}As you can see we place our Zingchart method into the componentDidMount() method with the id, width, height and data all taken from when we call the component class in the React render method. The width and height have a fallback value if none is set in the React render method. Now we can set our Zingchart myConfig right under the Zingchart component like so:
var myConfig = {
"graphset": [{
"type" : "bar",
"series": [{
"values" : [35,42,67,89,25,34,67,85]
}]
}]
};Since we have our data, we can now work on plugging it into the React render method. Okay, now onto the React render method. It looks something like this:
ReactDOM.render(
document.getElementById('chart-1')
);So there are a few things we should notice when looking at this code. First, notice how the class Zingchart that we created is now being used. Next, this.props.id, this.props.width , this.props.height, and this.props.data is set in the React render method. Importantly, we pull in our configuration by using {myConfig} to equal data. The id that is set here will be used in our Zingchart render and or div injection. Notice how the document.getElementById('chart-1') targets an element with chart-1 as the id. This chart-1 id also needs to be set in the index.html file that is in the public folder.
Take a look at the index.html file in our public folder. You will notice a div in the body that has the id="root" . Change this to be a div with id="chart-1" . Now this div will get the React component injected in. Nice! Your chart is now displayed!
Your index.js file should look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import zingchart from 'zingchart';
import './index.css';
class Zingchart extends React.Component {
render() {
return (
);
}
componentDidMount() {
zingchart.render({
id : this.props.id,
width: (this.props.width || 600),
height: (this.props.height || 400),
data : this.props.data
});
}
}
var myConfig = {
"graphset": [{
"type" : "bar",
"series": [{
"values" : [35,42,67,89,25,34,67,85]
}]
}]
};
// ========================================
ReactDOM.render(
document.getElementById('chart-1')
);Congratulations! But we should not stop here as what makes Zingchart truly customizable and interactive is the ability to use events and methods. Luckily, this is easy to work with in React. I would place events and methods inside the componentDidMount(). Here is an example of how to setup an event and method using React!
import React from 'react';
import ReactDOM from 'react-dom';
import zingchart from 'zingchart';
import './index.css';
class Zingchart extends React.Component {
render() {
return (
);
}
componentDidMount() {
zingchart.click = function(p) {
alert('click');
}
zingchart.render({
id : this.props.id,
width: (this.props.width || 600),
height: (this.props.height || 400),
data : this.props.data
});
setTimeout(function(){
zingchart.exec('newChart', 'setseriesvalues', {
plotindex : 0,
values : [1,1,1,1,1,1,1,1]
});
}, 3000);
}
}
var myConfig = {
"graphset": [{
"type" : "bar",
"series": [{
"values" : [35,42,67,89,25,34,67,85]
}]
}]
};
// ========================================
ReactDOM.render(
document.getElementById('chart-1')
);Notice how the methods and events both get set inside the componentDidMount() function. This means that the methods and events are applied once the component loads which is how vanilla Zingchart behaves. Great job! We now have a working version of React with Zingchart! Now you can customize to your heart's content!