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.
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
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.
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
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👌
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 :)
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! :)
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 RUclips also not much clear on this.
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.
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?
For anyone wanting to conditionally display 'Vertical' or 'Horizontal' text for their button {this.state.options.plotOptions.bar.horizontal===false?'Horizontal':'Vertical'}
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 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 ?
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 } } } }))
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
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..
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
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..
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!
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.
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?
Awesome! And one thing to mention, you can use the state without the constructor, like this:
state = {
options: [],
name: {}
}
And that's it!
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
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..!!
Thanks for everything Brad. Please we need an in depth video on react native. Even if it's on udemy, we'll really appreciate.
you are one of the best teachers of youtube, awesome, thank you very much.
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.
Brad once I make money from my Apps, I will definitely donate to you on Patreon. I have learned so much from you.
hello brad, i want to thank you for everthing ! much love and health for you and your family!
I tried doing pretty much the same thing with d3 but this is much easier! Thank you
love you brad and love your every tutorial.
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?
Brad, I clicked Like before Watch this video. Really You Never disappoint me. Congratulation Man. You are my favourite Instructor.
Awesome demo - exactly what I was looking for
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
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👌
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 :)
Awesome video as always. Can't wait to use this in my project.
Thank you.
Love and Respect from Sikkim, India.
perfectly paced and detailed ! thanks a lot
Dear Brad, what will be your next Udemy course????
Can we expect some Java or C# contents?
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! :)
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😊
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 RUclips also not much clear on this.
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.
Could you possibly do a react or angular video utilising a testing framework as well possibly as part of a series
Jesus christ dude you're on some next level shit. Truly amazing.
that video was awesome brad, thank you so much!!
Lmao this channel is gonna hit a million so fast
@Brad Would you mind sharing your vscode settings and extensions? Really like your setup. COuld be a video if you want too. Thx
Can you do a deeper dive to this for dashboards,etc?
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?
Great video, do you have one with maps and react?
Brad carry on your great work...
For anyone wanting to conditionally display 'Vertical' or 'Horizontal' text for their button
{this.state.options.plotOptions.bar.horizontal===false?'Horizontal':'Vertical'}
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 ?
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?
Love your videos, Brad! You are the master
So useful resources, thanks a bunch sir 😊
Thank you, Please create pagination tutorial using express, mongoose ejs or handlebars thank you Brad 😁
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
Really nice tips, is it possible to do the same in react native ? using google analytics ? thanks :)
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.
hats off.... you are like a god to me ! keep this up man..... truly amazing work
29:01 You should not use state in setState directly, as it's async you are not guaranteed the state value is right.
Now I am Happy ! Thanks ----> Brad !
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 ?
cool and simple, thanks!
Hey brad, what made u decied to change to MaxOS over windows?
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
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
}
}
}
}))
Hello friend! There is some way to have a fixed Yaxis in a scatter chart? Do you know anything about it? tks a lot!
Coolest instructor on the Web. Fastest also!
17:20 react
How about some D3.js?? The docs aren't very good and not much Content either. Would be great. Keep up the good work...
Is it possible to feed those charts with the data from database? I would love to have them dynamic somehow ;)
Thanks, helped a lot!
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
You are genius sir love you sir 😊😊😊🙏
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..
Hi! Is there a function where I can sort the data ascending or in descending order in apexchart?
Great bro .. keep up the effort .. Thanks
Thank u for this awesome video
Can you use api and do it , using multiple apexcharts charts
Hmm, how about course on this topic? :)
Great video as always
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.
How do I travel through series part so to change the data part??
Awesome brad....
Hallo, sir..
When time do tutorial nativescript??
Cause nativescript have hot reload so good now. I think sir shouls try it too.
thanks a lot sir for this video
Thank you
Sir please make video on how to make Library
Brad the machine, Thanks as always, Vue guys !!
@brad traversys how to add animation to this apex charts
Sir, I love you ❤️, you rock!
And the chart for react native, please.
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
@Brad - Is the Dashboard interactive, if I select a pie in Pie Chart, does the linked Graphs change?
use cloneDeep of lodash
I wanna work in Los Angeles
Do you know of any free scheduler libraries out there. Thanks
you're the best
Nicee
Great....
Respect 🙏
Can you do authentication video with React and Auth0? Please
Big shout out to the guy behind apex-charts github.com/junedchhipa he did an amazing work, give some starzz
First