fetch URL to display Chart in React Native
Inés Saavedra Villafruela
on 1 Mar 2023
Latest activity Reply by Christopher Stapels
on 6 Mar 2023
Hello, I am trying to display my Charts in a React Native App but I can't figure out what is the URL that I should use to display it. Any ideas?
5 Comments
Time Descending
Also you can use the first icon on the uppoer right of a plot in your cahnnel to expand the plot. Then use the url for the expanded window for your react app.
Thank you so much for your reply. I am trying to build a method to fetch the API and display the chart but it won't load. I am using WebView as the label but it won't work. Here's part of the code
async function fetchChart() {
try {
const charturl= `https://thingspeak.com/channels/2021316/charts/1? bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=10&type=line&update=15`;
let response = await fetch(charturl);
let chartBlob = await response.blob();
setChartBlob(setChartBlob);
}
catch (error) {
console.error(error);
}
}
useEffect(() => {
fetchChart();
}, []);
return (
<View style={{flex: 1}}>
{chartBlob && (
<WebView
source={{ uri: chartBlob }}
scalesPageToFit={true}
javaScriptEnabled={true}
domStorageEnabled={true}>
</WebView>
)}</View>
);
}
Does the process just hang indefinitely? The charts geenrally take a few seconds to render, that may be longer than the timeout for your async function. Perhaps try embedding a channel read or update (these are faster than a chart call) and see if the function works then?
Hello, so I am also reading the channel in json format and it works just fine. But for this function, the app shows a blank space where the chart should be and it shows no compilation errors.
The longer time for the charts to render (compared to json) is the only thing I can think of. I havent coded in React before.
Sign in to participate
