Great Video!!! Something I've been looking for is how to update dynamic GraphJS charts with live feed API data from an http request onto a line chart. By this I mean sensor data or stock price data that could be called on a setInterval function to update. It surprises me that this is so hard to find because I can't imagine using static data like most tutorials teach in real life situations. I wouldn't want to create more work for you, but if you are looking for more chartJS React tutorial ideas, I think that it would benefit a lot of people and you would be the only one with a video on it.
@@arslan99 Luckily I just figured it out now. The answer was websockets. Inside of a componentDidMount block, I opened a websocket that essentially adds a value and then executes this.setState. works pretty great! Still a few kinks, but essentially the answer is websockets.
Oh that's really good to know I really only thought websockets would be good for like chat apps an stuff but to hear that charts could be updated live with websockets is cool use
Awesome tutorial Arslan !!! , but i have a question ?...The values of the employees salaries amounts are not ordered by "ascending" or "descending" on the API, so does the chart do it automatically ?
I'm not too sure. Since I only pulled the data straight from the api and showed it. You can create a function that can do that and re arrange the order from ascending or descending
If you're using a local api for development (api address is localhost:.. etc.) you'll likely have an issue where CORS, just create a new shortcut anywhere, point it to Chrome and then add some of these options to the end "[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp That worked for me, not sure if it's the best way but I hope it helps! :)
Hey thank you for the tutorial, I have a question. We didn't use the [employeeSalary, setEmployeeSalary] and the [employeeAge, setEmployeeAge] . So why did you define them in the beginning?
I need help! I wrote the code the same as you but I got "TypeError: Cannot read properties of undefined (reading 'map')" !! and I don't know what can I do!
Hey man, love the content, but could you do a video on updating the charts with data once they're already rendered? For example, an input form that pushes a new data point and then the chart updates? I've been looking everywhere but can't find a video on it.
@@arslan99 Tks. Your tutorial is helping me a lot. Only now at the end is the API "dummy.restapiexample.com/api/v1/employees" showing this error 👉"has been blocked by CORS policy:" I'm looking for another one to test, if you know of any, I'll be grateful if you share. Congratulations on the video! 🙌
@@fernandorofe github.com/axios/axios/issues/853#issuecomment-322954804 this github forum issue should help thats how i fixed mine also you can get the cors npm package and use that as the header hope this helps:)
I am paasing data from parent component to child component as props child component is pie chart. First time data is uploading properly but on data update in parent component is not reflecting in child component. May I know. Why I am facing this issue. Is data update in pie chart not possible after render.
@@noura4086 I mean not specifically with real time data. As long as the data is coming into the API you're accessing it will be picked up by the chart but you may need to refresh the page for it to appear. There are ways to make it appear automatically by updating state
Hi, I used bar Chart from chart js in my project the only problem I faced is that the bar graph is showing only the first digit of the data I passed. Can you tell me if this kind of error is usual or what.
it seems that react-chartjs had an update if you run into an issue and you follow the exact same steps your chart may run into an issue add this update to it Step 1: import these two packages from chartjs into the Dankmeme component import Chart from "chart.js/auto"; import { CategoryScale } from "chart.js"; Step 2: and be sure to register your chart so add the line below underneath your useeffect component Chart.register(CategoryScale); Hope this helped! :D
Hey man thank you for the video, i have a situation that i really need help to understand how to do it: I'm pretty much creating all the components to bring them to render on app.js and im trying to create the chart but the api I'm working on takes the bitcoin price variation over a range of days (input 1 is the start date and input 2 is the end date), and generates the chart, but how in that click would I be able to get the input values to put in the api url? sorry for my bad english but the resume would be - how can i call the dankmemes funtion on the app.js click to use the input to control de output of the api? thx for the video!
Hey, so it's a bit hard to tell over a comment but I'll try 1. Create two usestate variables one for start date and end date 2. Create a form that will take those inputs and change the use state variables accordingly 3. Then use the usestate variables to change the date available in the chart I think this should work off of the top of my head If your a bit confused how to change date refer to this stack overflow stackoverflow.com/questions/47875045/chart-js-creating-a-line-graph-using-dates
@@arslan99 thx for replying,I've done almost what you said, but I can't bring the this.state.value of each input to a different .js file (all this work I did on the app.js) so how could I use your const dankmemes on my app.js instead?
Okay so I'm understanding a bit better but I feel like there's two different things you talking about. 1. When you say use this.state.value in another .js you would been pass props between the two if you want to do that check out this link it will show how to pass props but it's in class components you're going to have to convert it to state dev.to/zeyadetman/how-to-pass-state-between-components-in-reactjs-2pg1 2. At the bottom your trying to use const dank memes in app.js if that's the case just import the component file dank memes.js into your app.js file I hope this helps 🙂
I would hesitate to call this dynamic data. It's data that is being gathered once (during the component mount). I think dynamic data would be something that can change via user interaction or simply change as time passes.
Bro, do you know how I could change the dataset and labels dynamically? For example: I have a few buttons that I want to make API calls for currency exchange rates and update the graph, I have buttons for last 7 days and last 30 days, I can't seem to figure out how to make that work, I've tried regular chartjs and react-chartjs. Please help me bro.
Well since the 7 day graph and 30 day graph are different just create both charts that with a ternary operater to render on graph over the other for ex Create a usestate variable call it graphSwitch set it to false and in the functions where you create your graph properties when either graph function is envoked switch between true and false values this is what the ternary operater would look like {graphSwitch ? 7daygraph : 30daygraph} Hope this made sense 🙂
@@arslan99 It's easy to change datasets using the chart.update() function, but I can't figure out how to do that using React Hooks, how to get the chart instance to update the data, if I were to create a chart for every option (7days, 30days, 6 months, 1 year) that would be a lot of duplicate code.
That's true it would be alot of duplicate code I thought I was for only those two charts. Then not too sure how to approach it. Maybe create one function that will be responsible for one chart at a time but change its values depending on which button clicked you could pass the values between charts from the function parameters :/
@@arslan99 I did it bro! I put the chart in a variable: [myChart, setChart] = useState({}); then I call a function to set a chart in this variable and use use it for every condition like this myChart.data.datasets[0].data = newData; myChart.data.labels = newLabels; myChart.update(); I did using regular Chartjs instead of react-chartjs, but I will try using it to make the code look cleaner or something.
@@fabioribeiro9370 ayeee good job bro, usually what I do is when I comolete a task in refactor then. Better to get the job done first and make it look pretty then to make it pretty and spend wayyyy to long trying lol but anyways good job!!!
Thanks dude this is what I was in need. But how to give the employee_name as the label in the chart? It gives an error as NaN in console. Please get back asap. Thanks in advance!!
@@arslan99 medium.com/@sapucaialuann/using-chartjs-and-react-hooks-to-create-a-line-chart-related-to-an-api-acef68f62d46 here's the link of the article I told you about! Thanks again for the inspiration and help with this article.
Brother how to show the strings format in data we have labels and data when i make a project it show numeric data but when it comes towards the string it donot display what i can dooo? like i give you example "• Chart shows users by title (MD, DO, PA NP, Nurse, Pharmacist…) dynamically
Hello Arslan...Very nice video!!! This is what i was looking for...I tried implementing the code but I got a an error saying *TypeError: Object(...) is not a function* ...I tried to fix it..but could not..So could you please suggest me a way out to solve this issue
Hi Arslan , your tutorials are really helping me a lot in my projects.I need small help of yours . I am using state for data property in Line graph it renders first time nicely but when I refresh the page it does not plots anything on chart only blank chart appears.Please do help me with this..!!Thank you so much
Try console logging the state and see what error you get there could be something small that is missing and the console log error should be able to tell you either in the fetch request or where the state is changing
Suggestion / Request - Please make a video on a Multiaxes charts, for example a single chart that has positive y axis for time and positive x axis for temperature and negative x axis for pressure, i am not able to make charts like those please help.
Not too sure on how to do that, because your xaxis would be your labels that you create. You would have to either create labels that correspond to your data manually or create a function that will create them for you.
