• Latest
Create Spider Chart With ReactJS

Create Spider Chart With ReactJS

March 15, 2023
MAINO ACCUSED OF WEARING TROY AVE’S FAKE CHAIN FOR VIDEO SH00T! PLUS MORE! 🤯 #ShowfaceNews

MAINO ACCUSED OF WEARING TROY AVE’S FAKE CHAIN FOR VIDEO SH00T! PLUS MORE! 🤯 #ShowfaceNews

April 2, 2023
🤩 Oppo Find X6 Pro: The Fastest Android Phone Yet? 🚀 #shorts #oppofindx6pro

🤩 Oppo Find X6 Pro: The Fastest Android Phone Yet? 🚀 #shorts #oppofindx6pro

April 2, 2023
The Tragic Tale of Jackie Chan's Son

The Tragic Tale of Jackie Chan's Son

April 2, 2023
#Chutkula #comedy #funny #jokes #trending #new #viral #shortjokes #Shorts #ytshorts #comedyclub

#Chutkula #comedy #funny #jokes #trending #new #viral #shortjokes #Shorts #ytshorts #comedyclub

April 2, 2023
This GENIUS Youtube Advice Will Change EVERYTHING!

This GENIUS Youtube Advice Will Change EVERYTHING!

April 2, 2023
1 апреля 2023 г.

1 апреля 2023 г.

April 2, 2023
Factors that have contributed to Marques Brownlee’s success? #shorts #marquesbrownlee

Factors that have contributed to Marques Brownlee’s success? #shorts #marquesbrownlee

April 2, 2023
Weekly poll results: Oppo Find X6 and Find X6 Pro get the thumbs up from fans

Weekly poll results: Oppo Find X6 and Find X6 Pro get the thumbs up from fans

April 2, 2023
Marques Brownlee Talks to Simone Giertz About her Tesla Truck

Marques Brownlee Talks to Simone Giertz About her Tesla Truck

April 2, 2023
iPad OS Impressions: They Listened!

iPad OS Impressions: They Listened!

April 2, 2023
Random: Bitmap Is Bringing Xeno Crisis To N64 And GameCube

Random: Bitmap Is Bringing Xeno Crisis To N64 And GameCube

April 2, 2023

The Voice Assistant Battle! (2023)

April 2, 2023
Advertise with us
Sunday, April 2, 2023
Bookmarks
  • Login
  • Register
GetUpdated
  • Game Updates
  • Mobile Gaming
  • Playstation News
  • Xbox News
  • Switch News
  • MMORPG
  • Game News
  • IGN
  • Retro Gaming
  • Tech News
  • Apple Updates
  • Jailbreak News
  • Mobile News
  • Software Development
  • Photography
  • Contact
No Result
View All Result
GetUpdated
No Result
View All Result
GetUpdated
No Result
View All Result
ADVERTISEMENT

Create Spider Chart With ReactJS

March 15, 2023
in Software Development
Reading Time:8 mins read
0 0
0
Share on FacebookShare on WhatsAppShare on Twitter


Hi again!

I’ve been publishing new data visualization content here in DZone but never published anything about React. 

So, now let’s see how to create the following JavaScript Spider Chart using ReactJS and the LightningChart JS (LC JS) library.

JavaScript-Spider-Chart

What Is ReactJS?react-js-logo

Well, ReactJS is a framework created by Facebook, developed with great emphasis on implementing user interfaces.  

With more focus on user interfaces, it is recommended to use ReactJS for the view layer, making use of a model-view-controller pattern.

So, for this article, we will do the initial setup of our React project and a brief implementation of LightningChart to show the use of libraries within this project. Let’s begin…

1. Installing ReactJS

In order to install ReactJS using commands, you will need to have Node JS and the NPM command interface installed. Additionally, you can visit the official NPM documentation page.

So, already having NPM installed, we can execute the ReactJS installation command. First, we need to open a command prompt as administrator and run the following command:

npm i -g create-react-app 

The above command will download the complete React library. Once React is installed, we will see a list of React commands that serve as a confirmation of successful installation.

Successful-React-JS-Installation

Now we will create a React project. We will execute the following command from the command prompt:

npx create-react-app lc-react-app

 The lc-react-app will be the default name of our project, but you can change the name without problems.

React-Project-Name

When the project has been created, the path where the project has been stored will be displayed. I recommend cutting and pasting the project into an easily accessible path.

Project-Path

For more information about installing react as either a create-react-app command or as a Webpack and Babe, check out this Angular vs. React vs. Vue article.

2. Configuring the Project

Before we begin, we’ll need to install the LightningChart JS (@arction/lcjs) library. Download the ReactJS Spider Chart project template and open it with Visual Studio Code:

Spider-Char-Project-Visual-Studio

Your project should look the same or similar to the image above. Now open a new terminal so you can install LightningChart JS. The following command npm i @arction/lcjs will install the LightningChart JS library into our project.

Now, if we execute the npm start command, we will be able to compile and view our page on a local server:

npm-start-command

ReactJS project compilation on a local server

3. Creating the Spider Chart

Before we start with the code for our chart, we have to understand the files we will work with. 

Unlike Angular where our views and logic are grouped by component, React starts with a simpler structure. The first thing we will see will be two JS files: index.js and App.js.

These files have a default naming but can be renamed according to your needs. The index file will contain the code that allows us to render the view created by the App.js file.

App.js contains our logic in charge of building the object that will be rendered. The CSS files will modify the style of the objects generated in their corresponding JS files. 

When we create a React project, an App.test.js file is generated. This file corresponds to our App.js file and can be used to test our code using the npm test command.

The basic idea is that there is a .test file for each generated JS file. For this project, we will create a new file called SpiderChart.js.

This file will contain the code that will generate our spider chart. We will do it separately in order to keep our chart code organized, instead of embedding everything within the App.js file.

Spider-Chart-Project-files

A) Importing Necessary Classes

We’ll start by importing the necessary LightningChart JS classes. The way to import components is the same as that used in Angular. 

import { lightningChart,LegendBoxBuilders, Themes } from '@arction/lcjs'
import React, { useRef, useEffect } from 'react'

Now we have to create an object that contains our chart and in turn, can be exported to other instances.

const Chart = (props) => {
    const { data, id } = props
    const chartRef = useRef(undefined)
  
    useEffect(() => {

Using the Effect Hook allows you to run side effects like fetching, direct DOM updating, and timers. Inside the useEffect function, we’ll encapsulate all of our spider chart logic.

Now, we will assign the object type “Spider” to the constant “chart”. When specifying the chart type, we can assign properties as well. For instance, we can specify the look and feel of the component as well as the container where the chart will be displayed.

const chart = lightningChart().Spider({
            theme: Themes.auroraBorealis, 
            container: id
        })
            .setTitle('Company branch efficiency')
            .setAxisInterval(100)
            .setScaleLabelStrategy(undefined)
            .setPadding({ top: 100 })

        const series = [
            chart.addSeries()
                .setName('Sydney'),
            chart.addSeries()
                .setName('Kuopio'),
            chart.addSeries()
                .setName('New York')
        ]

B) Reviewing Properties

  • setTitle: The title for the chart. The title will be displayed by default at the top of the chart.
  • setAxisInterval: Sets the interval of the Charts Axes. Read more in the setAxisInterval documentation.
  • setScaleLabelStrategy: Sets the strategy for drawing scale labels. It defines which position labels are drawn and whether they are flipped or not. Read more in the setScaleLabelStrategy documentation.
  • addSeries: The addSeries function will allow us to create an independent series of data to be displayed on the chart. These series may have independent visual properties and values.
series.forEach((value, i) => {
            value
                .setPointSize(10)
                .setCursorResultTableFormatter((builder, series, value, axis) =>
                    builder.addRow(`${series.getName()} ${axis}`)
                )
        })

  • setCursorResultTableFormatter: It allows displaying values in the series when the cursor is positioned over the series. 
  • setPointSize: specifies the size in pixels of each point.

C) Adding Labels to Each Point

const categories = ['Pre-planning', 'Customer contacts', 'Meetings', 'Development time', 'Releases',]

D) Assigning Values to the Series

series[0].addPoints(
            { axis: categories[0], value: 6 },
            { axis: categories[1], value: 22 },
            { axis: categories[2], value: 61 },
            { axis: categories[3], value: 76 },
            { axis: categories[4], value: 100 },
        )

Depending on the series, the number of indexes must be changed.

E) Create LegendBox

Create LegendBox as part of SpiderChart.

const legend = chart.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
            // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
            .setAutoDispose({
                type: 'max-width',
                maxWidth: 0.80,
            })
        // Add SpiderChart to LegendBox
        legend.add(chart)

  • setAutoDispose: Dispose of sample UI elements automatically if they take up too much space. This is to avoid bad UI on mobile, etc.
  • legend.add: Adding the legend box to the chart.

F) Return Function

Return function will destroy the graphic when the component is unmounted. The chart will be stored inside a container (id). The class name “chart” will be used to apply the CSS class located in the App.css file. 

}

export default Chart” data-lang=”text/javascript”>

return () => {
        // Destroy chart.
        console.log('destroy chart')
        chartRef.current = undefined
        }
    }, [id])
  
    return <div id={id} className="chart"></div>
}

export default Chart



Source link

ShareSendTweet
Previous Post

What is Happening with Samsung's Camera?

Next Post

Valheim Devs Have No Current Plans to Release on PlayStation

Related Posts

How To Perform Sentiment Analysis and Classification on Text (In Java)

April 1, 2023
0
0
How To Perform Sentiment Analysis and Classification on Text (In Java)
Software Development

In much the same way mutual empathy defines the development of long-term relationships with our friends, it also plays a...

Read more

Dependency Poker for Scrum Teams

April 1, 2023
0
0
Dependency Poker for Scrum Teams
Software Development

Dependency Poker is an Agile game — similar to planning poker — that enables teams to identify and manage dependencies in...

Read more
Next Post
Valheim Devs Have No Current Plans to Release on PlayStation

Valheim Devs Have No Current Plans to Release on PlayStation

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© 2021 GetUpdated – MW.

  • About
  • Advertise
  • Privacy & Policy
  • Terms & Conditions
  • Contact

No Result
View All Result
  • Game Updates
  • Mobile Gaming
  • Playstation News
  • Xbox News
  • Switch News
  • MMORPG
  • Game News
  • IGN
  • Retro Gaming
  • Tech News
  • Apple Updates
  • Jailbreak News
  • Mobile News
  • Software Development
  • Photography
  • Contact

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?