I am tying to create a graph using ChartJS and ReactJS. The issue that I am experiencing is that I cannot load my data array onto the graph.
There are no logged errors and this is how my chart looks currently:
I think that the mistake might be chartData
object that I am using to pass the data:
chartData:{
labels: this.timeDataArray,
datasets: this.priceDataArray,
backgroundColor:['rgba(255,99,132,0.6)']
}
I am using react-chartjs-2 as module for my charts and fetch for the http request.
Here is my full code:
export class Chart extends Component{
constructor(props){
super(props);
this.state = {
isLoading: false,
data: [],
chartData:{
labels: this.timeDataArray,
datasets: this.priceDataArray,
backgroundColor:['rgba(255,99,132,0.6)']
}
}
}
componentDidMount(){
this.fetchData();
}
fetchData(){
fetch("https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=600")
.then(response => response.json())
.then(data=>{
var fetchedData = data.Data;
var timeDataArray = [];
var priceDataArray = [];
console.log(timeDataArray)
console.log(priceDataArray)
for(var x = 0; x < fetchedData.length;x++){
var exampleTimeData = fetchedData[x].time
var examplePriceData = fetchedData[x].high
timeDataArray.push(exampleTimeData)
priceDataArray.push(examplePriceData)
}
})
.catch(error => console.log("parsing failed", error))
}
render(){
return(
<div className="chart">
<Line
data={this.state.chartData}
options={{
maintainAspectRatio:false
}}
/>
</div>
)
}
}
Question: Why is my data not being plotted since I am passing the label
property with the time stamps and the actual data as the dataset
?
I dont know if its my labtop right now or what, but after running it, I need to resize my window and the graph updates to show the data.
export default class Chart extends Component {
constructor(props) {
super(props)
this.state = {
isLoading: false,
chartData: {
labels: ['First', 'Second', 'Third', 'Fourth'],
datasets: [
{
label: ['My Chart'],
data: [100, 200, 300, 400],
backgroundColor: ['#26331d'],
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}
]
}
}
}
componentDidMount() {
this.fetchData()
}
fetchData() {
var timeDataArray = []
var priceDataArray = []
fetch(
'https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=50'
)
.then(response => response.json())
.then(data => {
var fetchedData = data.Data
console.log(timeDataArray)
console.log(priceDataArray)
for (var x = 0; x < fetchedData.length; x++) {
var exampleTimeData = fetchedData[x].time
var examplePriceData = fetchedData[x].high
timeDataArray.push(exampleTimeData)
priceDataArray.push(examplePriceData)
}
})
.catch(error => console.log('parsing failed', error))
this.setState({
chartData: {
labels: timeDataArray,
datasets: [
{
label: ['Population'],
data: timeDataArray,
backgroundColor: ['#26331d', '#507935', '#63ef06', '#d0eabf'],
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}
]
}
})
}
render() {
return (
<div className="chart">
<Line
data={this.state.chartData}
width={200}
height={200}
options={{
maintainAspectRatio: false
}}
/>
</div>
)
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.