Bro do you even sleep ? It's been like 40 hours since you uploaded a 4 video series and now here's another. How do you do create content so fast buddy? You and Your workflow are freaking amazing.
:) yeah I sleep. I work about 9 hours per day, maybe 10 some days. I really enjoy what I do which helps a ton. Don't get me wrong, I do feel burned out at times just like anyone, but overall I do exactly what I want to do in life which is coding and helping people
@@TraversyMedia thanks a lot for all the hard work that you do my friend. Without you , people like me would have never endeavoured to learn CS and programming . By the way the django course is really amazing, thanks for that too.
What a find. I'm blown away by how quickly I can get a beautiful and polished chart up and running (up and animating?). I'm going to spend this weekend to make something impressive. Thanks for bringing this to our attention.
For anyone wanting to conditionally display 'Vertical' or 'Horizontal' text for their button {this.state.options.plotOptions.bar.horizontal===false?'Horizontal':'Vertical'}
Thank you. If you would ever do a full video and/or paid course that showed how you can have data for certain users and depending on who is logged in, it shows their data in these super nice charts and that dashboard that you showed. That would be nice for me. I have aspirations of building an admin panel for a survey data visualization application and I have no real experience except following along to your videos for fun. Thanks again for all the great stuff.
Thank you for the nice introduction. Working for the project and its my first experience with the charts. Your explanations are neat and clear. Its very helpful video for my work
29:00 Manipulating the state this way generally is a bad practice because of the way React updates it's state. React may batch multiple setState calls into a single update for performance, so this.state may not be updated yet. React docs reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous recommend using a function in setState instead of an object. Function will recieve previous state as the first argument. So instead of writing: this.setState({ options: { ...this.state.options, plotOptions: { ...this.state.options.plotOptions, bar: { ...this.state.options.plotOptions.bar, horizontal: !this.state.options.plotOptions.bar } } } }) You will write: this.setState(prevState => ({ options: { ...prevState.options, plotOptions: { ...prevState.options.plotOptions, bar: { ...prevState.options.plotOptions.bar, horizontal: !prevState.options.plotOptions.bar } } } }))
Yeah Brad, this is nice! A little Javascript Data Visualization course would be sick too, LOTS of React jobs I have been applying for lately seem to want that. I have some experience with React Sparklines data charts, but this seems cooler.
Does anyone know how to change the color according to the changes that we did using fill.color values? Because i tried to change the colors using fill.colors option, the bar colors were changed.but the tooltip colors weren't changed..
That's because Brad changed options.fill.colors property. There is a generic options.colors property which targets all elements' colors (bars/markers in tooltip) . You should use that one :)
Hi, I need help; sincerely need answer to this (I have been searching and trying as much possible): ChartJS vs ApexCharts Isn't ChartJS' documentation awful ?
Hi Man, nice tutorial and interested to try the annotation part. How do we dynamically add the annotation for Xaxis dates? Especially, the same annotation for multiple occurrences.
Can you tell me what is the best(according to you) js library for adding charts? you have used chart.js, apexCharts, d3.js, etc. There are so many options so I need some suggestions, I am using angular for frontend which requests a backend API for data, Thanks for all the great tutorials! :)
Yet another awesome tutorial, cheers Brad! I honestly don’t know how you find the time, I can’t keep up with just following along with your videos never mind producing great content. I’ve not long since bought your Python course, can’t wait to get started👍 Again, superb stuff👌
Hey Brad, I have a question for you, if you don't mind me asking. I am currently new to programming and am having a great time learning new languages and working on projects on my own. However, I have a fear that if I go into the field professionally, it may destroy my passion for coding and leave me unable to enjoy my job. Do you think this is a valid concern, and if so, what can be done to abate this? Cheers, and thanks so much for all your great content! Gabe
Thanks for your awesome tutorial sir, and I had an issue when I'm trying to integrate it into my existing project then it doesn't work after that I'm going to create a new react app and it's work.....What's the problem of this issue sir?
Hi Brad, Thanks for teaching us, Your are like God gift for us. If possible Please do videos on jasmine testing in angular (spec.ts) file please no videos in your channel and your courses and TH-cam also not much clear on this.
ApexCharts vs Charts.js ? Currently i'm using Charts.js but i have some problem with it. I don't have some of the functionality that i think ApexCharts has. How well it copes with the window resizing? Is it mobile friendly? Is it easy to change the data on the fly ?
Quetzalcoalt Apexcharts automatically resizes itself on window resize. There are responsive media queries by which you can configure different options for different screen sizes. Also, it is very easy to change data. You have to call updateSeries method. If you use React, it does update automatically on prop change. Disclaimer: I am the maker of ApexCharts.js
Hi Brad. I very much appreciate you videos and have purchased your Udemy courses. One question about the setState for the toggle near the end. I see you passed an object instead of a function. Does it matter anymore? Would it be preferred to call setState((prevState) => { //other state items here, !prevState.options.plot.optionsBar.horizontal}) this way? Thank you!
Yes, the function call would usually be better. The reason for this is, that setState is asynchronous. So if you have multiple setState commands after each other, you cannot be sure, that this.state already contains the changes from the last setState call.
I have never known this chart library because it's not listed in the so called top 7 or 10 chart libraries on sites I have ever visited. I just visited the official site of this chart library, and it looked nice, I will try it later. Now I want to know : what is your recommendation about datagrid library, especially one that has good integration with React ? I have just done a survey on 3 libraries : Datatables.net, Handsontable-React and React-Datagrid. Datatables.net is good, but I need a version of editable Datatables.net which is not free. If I only need for non-editable view, I choose Datatables.net. For an editable datagrid, currently I am exploring on Handsontable-React and React-Datagrid. Any suggestion ?
Hi Brad, I follow all your videos and they are awesome. I was going through this video and exploring charts other than bar. I am not able to see the labels when I am using Pie, Donut and radialBar chart. This issue comes when I am using react, works fine when I am using normal JavaScript. Can you please help me in this.
Hi Anujit, the example code was wrong for donut/radialBar. I have updated the Github repository. Please check the latest example code for donut/radial-bar to know how to apply labels to those charts
vscode? some combination of the following in preferences/settings.json, add : ... "emmet.includeLanguages": { "javascript": "html", "jsx":"jsx", "react-jsx":"react-jsx", "react-html":"react-html" }, "emmet.triggerExpansionOnTab":True, "emmet.syntaxProfiles": { "javascript": "jsx" }, ... Process of elimination and remove where redundant
![Lyric Search App With React & Context API [1] - Top 10 Tracks](http://i.ytimg.com/vi/NDEt0KdDbhk/mqdefault.jpg)
![Lyric Search App With React & Context API [1] - Top 10 Tracks](/img/tr.png)
![KRK - ชนิสรา Ft.WanMai , N/A [Official MV] Prod. By Sakarin](http://i.ytimg.com/vi/C-WMwwYobcU/mqdefault.jpg)
Traversy is my secret weapon for looking like I know what the hell I'm doing. Spoiler I have no idea what I'm doing. Thanks dude!
Bro do you even sleep ? It's been like 40 hours since you uploaded a 4 video series and now here's another. How do you do create content so fast buddy? You and Your workflow are freaking amazing.
:) yeah I sleep. I work about 9 hours per day, maybe 10 some days. I really enjoy what I do which helps a ton. Don't get me wrong, I do feel burned out at times just like anyone, but overall I do exactly what I want to do in life which is coding and helping people
@@TraversyMedia thanks a lot for all the hard work that you do my friend. Without you , people like me would have never endeavoured to learn CS and programming . By the way the django course is really amazing, thanks for that too.
Did I get it right - this blog is your full-time job?
You are a great Teacher. Thanks to you i am close to finish a real app using Vue js and a Laravel API.
its passion bro.... it passion that keeps pushing and pushing you..
What a find. I'm blown away by how quickly I can get a beautiful and polished chart up and running (up and animating?). I'm going to spend this weekend to make something impressive.
Thanks for bringing this to our attention.
Brad it's time for The Traversy Media podcast show...
Brad started recently for his patreon's www.patreon.com/traversymedia/posts
That not-statement in the end blew my mind. Simple and awesome.
Awesome! And one thing to mention, you can use the state without the constructor, like this:
state = {
options: [],
name: {}
}
And that's it!
Was watching a c++ video and a Traversy notification popped up. Now I’m here!
cherno?
Nope. it was D. Banas
C++ is just a monster good luck man
@@cloudagnostic cherno is best for cpp and graphics programming.
Can we have a tutorial where we can learn to render dynamic data rather than static ones?
wow, i thought it would be more dificult than this...but you nailed it...awesome..thnakx Brad...you´re the man...thankx for sharing it..!!
For anyone wanting to conditionally display 'Vertical' or 'Horizontal' text for their button
{this.state.options.plotOptions.bar.horizontal===false?'Horizontal':'Vertical'}
Thank you. If you would ever do a full video and/or paid course that showed how you can have data for certain users and depending on who is logged in, it shows their data in these super nice charts and that dashboard that you showed. That would be nice for me. I have aspirations of building an admin panel for a survey data visualization application and I have no real experience except following along to your videos for fun. Thanks again for all the great stuff.
you are one of the best teachers of youtube, awesome, thank you very much.
Brad once I make money from my Apps, I will definitely donate to you on Patreon. I have learned so much from you.
love you brad and love your every tutorial.
Brad, I clicked Like before Watch this video. Really You Never disappoint me. Congratulation Man. You are my favourite Instructor.
Thank you for the nice introduction. Working for the project and its my first experience with the charts. Your explanations are neat and clear. Its very helpful video for my work
hello brad, i want to thank you for everthing ! much love and health for you and your family!
Thanks for everything Brad. Please we need an in depth video on react native. Even if it's on udemy, we'll really appreciate.
Nice video. Pretty good explained. I am not so familiar with react. Can i ask what is the advantage to make it in react instead of vanilla js?
17:20 react
29:00 Manipulating the state this way generally is a bad practice because of the way React updates it's state. React may batch multiple setState calls into a single update for performance, so this.state may not be updated yet. React docs reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous recommend using a function in setState instead of an object. Function will recieve previous state as the first argument. So instead of writing:
this.setState({
options: {
...this.state.options,
plotOptions: {
...this.state.options.plotOptions,
bar: {
...this.state.options.plotOptions.bar,
horizontal: !this.state.options.plotOptions.bar
}
}
}
})
You will write:
this.setState(prevState => ({
options: {
...prevState.options,
plotOptions: {
...prevState.options.plotOptions,
bar: {
...prevState.options.plotOptions.bar,
horizontal: !prevState.options.plotOptions.bar
}
}
}
}))
Yeah Brad, this is nice! A little Javascript Data Visualization course would be sick too, LOTS of React jobs I have been applying for lately seem to want that. I have some experience with React Sparklines data charts, but this seems cooler.
Awesome demo - exactly what I was looking for
I tried doing pretty much the same thing with d3 but this is much easier! Thank you
perfectly paced and detailed ! thanks a lot
Awesome video as always. Can't wait to use this in my project.
Jesus christ dude you're on some next level shit. Truly amazing.
Thank you.
Love and Respect from Sikkim, India.
Lmao this channel is gonna hit a million so fast
29:01 You should not use state in setState directly, as it's async you are not guaranteed the state value is right.
Does anyone know how to change the color according to the changes that we did using fill.color values? Because i tried to change the colors using fill.colors option, the bar colors were changed.but the tooltip colors weren't changed..
Hello friend! There is some way to have a fixed Yaxis in a scatter chart? Do you know anything about it? tks a lot!
Nice video Brad,
just a little remark: you changed the color in pink/red but the tooltip circle remained blue
That's because Brad changed options.fill.colors property. There is a generic options.colors property which targets all elements' colors (bars/markers in tooltip) . You should use that one :)
Hey brad, what made u decied to change to MaxOS over windows?
Hi! Is there a function where I can sort the data ascending or in descending order in apexchart?
I need help populating the series with dynamic data. As it is now when I pass a mapped object to it it returns an error
Hi,
I need help; sincerely need answer to this (I have been searching and trying as much possible):
ChartJS vs ApexCharts
Isn't ChartJS' documentation awful ?
Hi Man, nice tutorial and interested to try the annotation part. How do we dynamically add the annotation for Xaxis dates? Especially, the same annotation for multiple occurrences.
Can you tell me what is the best(according to you) js library for adding charts? you have used chart.js, apexCharts, d3.js, etc. There are so many options so I need some suggestions, I am using angular for frontend which requests a backend API for data, Thanks for all the great tutorials! :)
Yet another awesome tutorial, cheers Brad! I honestly don’t know how you find the time, I can’t keep up with just following along with your videos never mind producing great content. I’ve not long since bought your Python course, can’t wait to get started👍 Again, superb stuff👌
Love your videos, Brad! You are the master
that video was awesome brad, thank you so much!!
Hey Brad,
I have a question for you, if you don't mind me asking. I am currently new to programming and am having a great time learning new languages and working on projects on my own. However, I have a fear that if I go into the field professionally, it may destroy my passion for coding and leave me unable to enjoy my job. Do you think this is a valid concern, and if so, what can be done to abate this?
Cheers, and thanks so much for all your great content!
Gabe
@Brad Would you mind sharing your vscode settings and extensions? Really like your setup. COuld be a video if you want too. Thx
Thanks for your awesome tutorial sir, and I had an issue when I'm trying to integrate it into my existing project then it doesn't work after that I'm going to create a new react app and it's work.....What's the problem of this issue sir?
Hi Brad,
Thanks for teaching us,
Your are like God gift for us.
If possible Please do videos on jasmine testing in angular (spec.ts) file please no videos in your channel and your courses and TH-cam also not much clear on this.
Great video, do you have one with maps and react?
How do I travel through series part so to change the data part??
Thank you Brad ! I think i will change from chart.js to apexchart because has a lot more options
Alessandro same here !!!
Hello. Do you know where I an find a bell curve chart from npm?
Thanks😊
Is it possible to feed those charts with the data from database? I would love to have them dynamic somehow ;)
Brad carry on your great work...
Could you possibly do a react or angular video utilising a testing framework as well possibly as part of a series
Can you use api and do it , using multiple apexcharts charts
Full vanilla js based API project (Eg- giphy API)😍😅😅😅
He has tons of similar videos, just check out his previous videos or the JS playlist
Can you do a deeper dive to this for dashboards,etc?
ApexCharts vs Charts.js ?
Currently i'm using Charts.js but i have some problem with it. I don't have some of the functionality that i think ApexCharts has. How well it copes with the window resizing? Is it mobile friendly? Is it easy to change the data on the fly ?
Quetzalcoalt Apexcharts automatically resizes itself on window resize. There are responsive media queries by which you can configure different options for different screen sizes.
Also, it is very easy to change data. You have to call updateSeries method. If you use React, it does update automatically on prop change.
Disclaimer: I am the maker of ApexCharts.js
Then i'm switching to ApexCharts.js, using Vue btw. ^_^.
I'm having too many problems with Chart.js
Hi Brad. I very much appreciate you videos and have purchased your Udemy courses. One question about the setState for the toggle near the end. I see you passed an object instead of a function. Does it matter anymore? Would it be preferred to call setState((prevState) => { //other state items here, !prevState.options.plot.optionsBar.horizontal}) this way? Thank you!
Yes, the function call would usually be better. The reason for this is, that setState is asynchronous. So if you have multiple setState commands after each other, you cannot be sure, that this.state already contains the changes from the last setState call.
Dear Brad, what will be your next Udemy course????
Can we expect some Java or C# contents?
Great Tutorial Brad! Do you suggest any library for React Native?
For UI react native elements for navigation react navigation(V2) most good once come bundled with expo :)
Thanks and for charts?
Really nice tips, is it possible to do the same in react native ? using google analytics ? thanks :)
So useful resources, thanks a bunch sir 😊
hats off.... you are like a god to me ! keep this up man..... truly amazing work
Now I am Happy ! Thanks ----> Brad !
Thank you, Please create pagination tutorial using express, mongoose ejs or handlebars thank you Brad 😁
Can't we just create a regular JS object? And pass it as the ApexChart Options? Why the 'state'?
Yes, that's entirely valid. Brad used state just to show the reactivity of the charts - meaning how you can change state and the charts will update.
I have never known this chart library because it's not listed in the so called top 7 or 10 chart libraries on sites I have ever visited. I just visited the official site of this chart library, and it looked nice, I will try it later.
Now I want to know : what is your recommendation about datagrid library, especially one that has good integration with React ?
I have just done a survey on 3 libraries : Datatables.net, Handsontable-React and React-Datagrid.
Datatables.net is good, but I need a version of editable Datatables.net which is not free. If I only need for non-editable view, I choose Datatables.net. For an editable datagrid, currently I am exploring on Handsontable-React and React-Datagrid.
Any suggestion ?
Hi Brad,
I follow all your videos and they are awesome. I was going through this video and exploring charts other than bar. I am not able to see the labels when I am using Pie, Donut and radialBar chart. This issue comes when I am using react, works fine when I am using normal JavaScript. Can you please help me in this.
Hi Anujit, the example code was wrong for donut/radialBar. I have updated the Github repository. Please check the latest example code for donut/radial-bar to know how to apply labels to those charts
@@junedchhipa thanks. It works now.
Thanks for the video. I have a question: Has anyone created a forest plot chart with ApexCharts? If so, can you please share a codepen? Thanks
this is niceeee. thanks for the upload mate. I appreciate it.
Great bro .. keep up the effort .. Thanks
@brad traversys how to add animation to this apex charts
Great video as always
Coolest instructor on the Web. Fastest also!
You are genius sir love you sir 😊😊😊🙏
cool and simple, thanks!
Does anyone know how he uses emmet in react jsx i cant seem to figure it out
vscode? some combination of the following in preferences/settings.json, add :
...
"emmet.includeLanguages": {
"javascript": "html",
"jsx":"jsx",
"react-jsx":"react-jsx",
"react-html":"react-html"
},
"emmet.triggerExpansionOnTab":True,
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
...
Process of elimination and remove where redundant
Awesome brad....
Thanks, helped a lot!
Thank u for this awesome video
Hmm, how about course on this topic? :)
Brad the machine, Thanks as always, Vue guys !!
Big shout out to the guy behind apex-charts github.com/junedchhipa he did an amazing work, give some starzz
How about some D3.js?? The docs aren't very good and not much Content either. Would be great. Keep up the good work...
Sir please make video on how to make Library
@Brad - Is the Dashboard interactive, if I select a pie in Pie Chart, does the linked Graphs change?
Sir, I love you ❤️, you rock!
Hallo, sir..
When time do tutorial nativescript??
Cause nativescript have hot reload so good now. I think sir shouls try it too.
Thank you
thanks a lot sir for this video
you're the best
And the chart for react native, please.
Respect 🙏
use cloneDeep of lodash
Great....
Do you know of any free scheduler libraries out there. Thanks
I wanna work in Los Angeles
Nicee
First
Can you do authentication video with React and Auth0? Please