I need to load my SQL server data using react-native-chart-kit, but when I use this code I get this error :
Error while updating property 'd' of a view managed by: RNSVGPath null InvalidNumber
import React from "react";
import { Text, View, Dimensions } from "react-native";
import { LineChart } from "react-native-chart-kit";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
data: {
labels: [
"Gen",
"Feb",
"Mar",
"Apr",
"Mag",
"Giu",
"Lug",
"Ago",
"Set",
"Ott",
"Nov",
"Dic",
],
datasets: [
{
data: [],
},
],
},
};
}
GetData = () => {
const self = this;
return fetch("http://192.168.1.5:80/graph.php")
.then((response) => response.json())
.then((responseJson) => {
// clone the data from the state
const dataClone = { ...self.state.data };
const values = responseJson.map((value) => value.ChiffreAffaire);
dataClone.datasets[0].data = values;
self.setState({
isLoading: false,
data: dataClone,
});
})
.catch((error) => {
console.error(error);
});
};
render() {
return (
<View>
<LineChart
data={this.state.data}
width={Dimensions.get("window").width} // from react-native
height={220}
yAxisLabel={"$"}
chartConfig={chartConfig}
bezier
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
);
}
}
The data I get from my php file is like :[{"ChiffreAffaire":"4800.00"},{"ChiffreAffaire":"12000.00"}]
<?php
$serverName="DESKTOP-T5SLVUB\SQL2008R2";
$connectionInfo=array("Database"=>"Netos_DB","UID"=>"sa","PWD"=>"123");
$conn=sqlsrv_connect($serverName,$connectionInfo);
$sql = "select ChiffreAffaire from V502_client where Mois=2 and Annee=2020 ";
$stmt = sqlsrv_query( $conn, $sql );
while( $row[] = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ){
$Item = $row;
$json = json_encode($Item);
}
echo $json;
?>
I don't know what is the problem and why I m getting this error; please if you have any Idea
This works for me:
{
this.state.loadComplete &&
(<LineChart
data={this.state.dt}
width={Dimensions.get("window").width} // from react-native
height={this.height}
yAxisLabel=""
yAxisSuffix="b"
yAxisInterval={1} // optional, defaults to 1
chartConfig={this.config}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>)
}