Scribd
Upload
3 views

Experiment_8_record_format

The document outlines the steps to create a React service that fetches weather information from openweathermap.org and displays it graphically using Chart.js. It includes installation instructions, code snippets for the main components, and functions for fetching and processing weather data. The experiment concludes with the successful implementation of the service.

Uploaded by

dandamshravanthi0205
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Experiment_8_record_format

The document outlines the steps to create a React service that fetches weather information from openweathermap.org and displays it graphically using Chart.js. It includes installation instructions, code snippets for the main components, and functions for fetching and processing weather data. The experiment concludes with the successful implementation of the service.

Uploaded by

dandamshravanthi0205
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Experiment 8

Create a service in react that fetches the weather information from open weathermap.org and the
display the current and historical weather information using graphical representation using chart.js

Aim:

To create a React service that fetches weather information from openweathermap.org and displays
current and historical weather data using Chart.js.

Objective:

1. To call APIs into a React application.


2. To display weather data graphically using Chart.js.

Procedure:

Step 1:
Install Node.js from https://nodejs.org/en.

Step 2:

Create a new folder and open that folder in VS code.

Step 3:

Open the terminal in VS Code and install react by typing “npx create-react-app weather-info”.

Step 4:

Install chart.js by typing “npm install react-chartjs-2 chart.js”.

Step 5:

Remove the code in App.js and write the corresponding code and create separate components.

Step 6:

Register all the required components (like scales, elements, plugins) by typing
“Chart.register(...registerables)” in the functional component.

Step 6:

Open the terminal and run the program by typing “npm start”.
Code Snippet:

App.js:

import logo from './logo.svg';

import './App.css';

import WeatherInfo from './WeatherInfo';

function App() {

return (

<div className="App">

<WeatherInfo/>

</div>

);

export default App;

WeatherInfo.js :

import React, { useState } from 'react'

import { Chart, registerables } from 'chart.js'

const WeatherInfo = () => {

let [city,setCity]=useState('')

Chart.register(...registerables);

async function weatherInfo (event) {

event.preventDefault()

console.log("hi")

let data = await weatherData(city)

if(data!== null) {

let [time,temp]=weatherParameters(data)

displayData(time,temp)

}
}

function displayData(time,temp) {

const ctx = document.getElementById('myChart');

new Chart(ctx, {

type: 'line',

data: {

labels: time,

datasets: [{

label: 'temperature',

data: temp,

borderWidth: 1

}]

},

options: {

scales: {

y: {

beginAtZero: false

});

function weatherParameters (data) {

let time = data.list.map((item)=> new Date(item.dt_txt).toLocaleTimeString())

let temp = data.list.map((item)=>item.main.temp)


console.log(time)

console.log(temp)

return [time,temp]

async function weatherData (city) {

console.log(city)

let url = `http://api.openweathermap.org/data/2.5/forecast?q=$


{city}&appid=5b94931e44a65712481859273e13a972&units=metric`;

try {

let response = await fetch(url)

let data = await response.json()

if (data.cod == '200') {

return data

else {

alert("city not found")

return null

} catch (error) {

console.error("error",error)

return null

function updateCity (e) {

setCity(e.target.value)

return (
<div>

<h1>Weather Report</h1>

<form>

<input type='text' onChange={updateCity}/>

<button onClick={weatherInfo}>Get Weather Report</button>

</form>

<canvas id='myChart'></canvas>

</div>

export default WeatherInfo

Conclusion:

Successfully implemented a React service to fetch weather data and displayed using Chart.js.

You might also like