What We’ll Be Building
Today we’re going to introduce a series on data visualization with ReactJS and Progress KendoReact. React makes it a breeze to move data around within a web app and to produce multiple views that the data requires. KendoReact is a suite of 80+ UI components, including a rich set of React data visualization components that work right out of the box.
The app that we’ll be building is a simple rating tracker for an imaginary Pizza company. The final product will be a web application that lets us cycle between two different data display styles. We’ll show our ratings data as either a table akin to Microsoft Excel or as a series of related, interactive bar charts. Additionally, we’ll set up our layout to show different subsets of the data, representing stores in other regions for the company. The final app will look something like this:
Chart View
Table View
Setting up the React App
I will build our application with NodeJS and KendoReact. There are many ways to do data visualization with React or JavaScript. KendoReact offers certain advantages for organizations that want to standardize components for a common API, theme, and dependencies. To install NodeJS, head over to the NodeJS website, and follow their installation instructions.
After that, please run the following commands that’ll verify NodeJS and npm are correctly installed:
node -v
npm -v I’m currently running Node version 12.16.1 and npm version 6.14.4 at the time of writing.
From here, we can get started creating the foundation of our application by using create-react-app. The ReactJS website has a great primer on using create-react-app and several other ways to create a React application. For simplicity’s sake, I’ll just be using their creation steps:
npx create-react-app pizza-o-matic And that’s it! You can make sure the application was created successfully by running:
cd pizza-o-matic
npm run start You should then see a browser window open to http://localhost:3000 with some basic React boilerplate indicating that all is well.
We can then strip all but a single React fragment out of src/App.js:
import React from 'react';
import './App.css';
function App() {
return (
<>
Hello
</>
);
}
export default App; Setting up Visualization with Kendo UI React Components
Next, we’ll install KendoReact components. We can install everything we need for data visualization for this project by running the following:
npm install @progress/kendo-data-query @progress/kendo-drawing @progress/kendo-file-saver @progress/kendo-react-charts @progress/kendo-react-data-tools @progress/kendo-react-dateinputs @progress/kendo-react-dropdowns @progress/kendo-react-excel-export @progress/kendo-react-grid @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-layout @progress/kendo-react-progressbars @progress/kendo-theme-material Additionally, we’ll need to install HammerJS, a required dependency enabling Chart events. We can do that with npm:
npm install hammerjs Let’s get our KendoReact theme working by editing index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@progress/kendo-theme-material/dist/all.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
serviceWorker.unregister(); Awesome, now we can create a rudimentary chart example in App.js:
import React from 'react';
import {
Chart,
ChartTitle,
ChartSeries,
ChartLegend,
ChartSeriesItem,
ChartCategoryAxis,
ChartCategoryAxisItem,
} from "@progress/kendo-react-charts";
import "hammerjs";
import './App.css';
function App() {
return (
<>
<Chart>
<ChartTitle text={"Test Chart Title"} />
<ChartCategoryAxis>
<ChartCategoryAxisItem
categories={["category1", "category2", "category3"]}
/>
</ChartCategoryAxis>
<ChartLegend position="bottom" orientation="horizontal" />
<ChartSeries>
<ChartSeriesItem
type="column"
data={[1,1,1]}
/>
<ChartSeriesItem
type="column"
data={[2,2,2]}
/>
<ChartSeriesItem
type="column"
data={[3,3,3]}
/>
</ChartSeries>
</Chart>
</>
);
}
export default App; And that’s all you need to set up the basics for a React application with KendoReact for data visualization! Our next installment will go over how to layout the app to allow multiple views using Kendo’s layout features.
