score:1
it seems like you need to sync the jobid
state between the titlecycle component and the linechart component, so that both has access to this variable, and can render stuff in sync (title changes and linechart changes also).
in that case, you need jobid
as a somewhat global variable. i think of this solution.
this seems to be the current hierachy
app
|-- linechart
|-- title
|-- titlecycle
therefore, put the jobid
in the common ancestor and prop drills it down. in this case, instead of generating jobid
and index
from titlecycle and having to lift the state back up and around into linechart, you shall cycle the indexes right inside app.js. something like this:
// app.js
function app() {
const [alldata, setalldata] = usestate([]);
const [index, setindex] = usestate(0);
// fetch all data, all jobs
useeffect(() => {
function fetchdata() {
let body = {
from: "bpz99ram7",
select: [3, 6, 40],
where: "{40.ct. 'in progress'}",
sortby: [{ fieldid: 6, order: "asc" }],
groupby: [{ fieldid: 40, grouping: "equal-values" }],
options: { skip: 0, top: 0, comparewithapplocaltime: false },
};
fetch("https://api.quickbase.com/v1/records/query", {
method: "post",
headers: headers,
body: json.stringify(body),
})
.then((response) => response.json())
.then(({ data }) => setalldata(data));
}
fetchdata();
}, []);
// cycle through the jobids and indexes
useeffect(() => {
const timerid = setinterval(
() => setindex((i) => (i + 1) % alldata.length),
5000 // 5 seconds.
);
return () => clearinterval(timerid);
}, [alldata]);
// calculate info based on index
const jobid = alldata[index]?.["3"]?.value || "290"; // default "290"
const title = alldata[index]?.["6"]?.value || "default title";
// renders the components with the necessary data
return (
<div>
<title title={title} />
<linechart1 jobid={jobid} />
<linechart2 jobid={jobid} />
</div>
);
}
// linechart.js
function totallinechart(props) {
// got the jobid from props
const { jobid } = props;
// now make the request with this jobid
}
Source: stackoverflow.com
Related Query
- React Chart.js Match API data to what Title is displaying, then update chart on data/Title change
- Why is the data from my API not displaying on my chart.js chart in React?
- React ChartJS 2 : Get data on clicking the chart
- Chart js: Update line chart having two data sets
- How to update data Chart in async way in Angular Chart.js?
- Using data from API with Chart JS
- Chart not displaying from JSON data
- update chart data called through ajax via PHP, MySQL
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- chart data on 24hr X axis using recharts, chart.js, I don't mind what
- Creating Chart.js using API data in react
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Initialize a Chart.js chart with data from an api
- Unexpected error when attempting to update chart data in Chart.js, in a Vue app
- Update the chart data from an array stored in a variable on button click
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- react chart js, title is not displayed
- Update Chart vue3-chart with new data
- How to get Data from API to display chart using chartjs in Vuejs
- Updating a Pie Chart in React as Data is Entered
- Chart JS in React doesn't fetch data
- React Chartjs - Update Chart on interval
- Dynamic data in bar chart not rendering React js
- ChartJS have xAxes labels match data source
- The chart doesn't display the data from my call to the API with Axios
- Display chart data based on API call
- How to split data from api to get a chart
- React Native Chart not showing data
- Data not displaying properly in Chart.js line chart
- Displaying Chart with data retrieved from Entity Framework in Controller
More Query from same tag
- Chartjs average line over bars
- How to / Orientation to build a specific type of chart using library chart.js
- How to separete chart series into different pane (Chart.js)
- How to compare one value to another in chartJS
- Pug - Access data from server in pug script(type='text/javascript')
- Pass context to options on React ChartJS 2
- chart.js zeroLineColor does not work as expected
- how can i add value on bar in the charts in chart.js vs 3.x
- Dynamically populating data into chart in Chart.js
- How to fill my chart (chart.js) with my own data from API
- How to change Y axis labels
- Right way to Plot Dynamic Grouped Bar chart.js
- Chart JS tick options not working for y axis
- Do not draw line on condition in ChartJS line chart
- Select missing dates from a table in MySQL
- Formatting x-axis labels as time values in Chart.js
- Bollinger bands in React application with a library
- Chart.js v2 overwrite draw function
- Chart.elements.Rectangle.prototype.draw inpacting on other charts in the same page(Angular)
- Label not showing in Chart.js with Grails
- How can I process json file and display some data in form of charts in django
- How can I get a point to be drown over the line?
- How do I align chart.js pie charts?
- How to get chart size (without labels) with chart.js?
- Click event on stacked bar chart - ChartJs
- Chart.js creating a line graph using dates
- Chart.js change hover text
- Is Chartjs compatible with PhoneGap?
- Checkboxes unchecked after cart.js end of update animation
- How to add image inside the doughnut chart using chart.js?