0:00
Hi guys, welcome back to the new video of easy tutorials and today in this video you will see how to add a chart or graph on your website
0:07
As you can see on my computer screen, I have a web page here with some different kind of chart
0:13
So first one is pie chart and once I will take cursor over this color, it will highlight the chart for the particular area
0:21
So this was the pie chart. Now we will see the next one which is horizontal chart
0:27
Here also you can see as I will take cursor over this chart, it will display the value
0:32
Now the next one is curve chart. And it is also displaying its value when I will take cursor over this graph
0:44
And the last one is comparison chart where you can see two different color. So it is very easy to add this type of chart or graph on your website
0:52
So before starting this video, please hit the like button and also subscribe if you are new on my channel
0:58
Now let's start this video. First I have one folder here and in this folder I have one html file and one css file
1:10
Now I will open my text editor which is brackets editor. So this is my html file. I have written basic html structures
1:18
And this one is my css file. You can see I have already connected the html file with css
1:30
So next we will come to the Google. And here we will search for Google chart
1:37
Open this first website. Then click on guides. And in the left side click on this one chart gallery
1:53
Now you can see different type of chart over here. So let me click on this one pie chart
2:04
So now you can see the script for adding a chart. So just copy this script
2:25
And paste it here in the head tag. And now let's see how to add this chart
2:38
Now again come to this website and copy this one line of code. Copy and paste it here in the body tag
2:54
Save these changes. Now I will open this html file with Google Chrome
3:00
Now you can see this pie chart on this webpage. Next we have to change the data in this chart
3:10
So just come back to the html file. And here you can see all the data is available here that you can edit
3:17
First is task, work, eat, commute, watch TV and sleep. And this side you can see its value 11, 2, 2, 2 and 7
3:29
So you can easily modify these values and you can change the name
3:38
So after changing all these things, reload the webpage and you can see different values for this graph
3:48
Let me change it to 10. So you can see the value for this sleep is 10 that is 37%
3:57
Now if you want to change its size and position, just come back to the html file and remove this one
4:03
And here we will put one class name and the class name I am writing chart
4:08
Just copy this one and come to the CSS file, write it here. For this one I am adding margin 200 pixel auto
4:19
Width it will be 600 pixel. And height 300 pixel. So after reloading this page, you can see this graph in the center
4:31
Let me increase this one. 1000 and 500 and decrease this one 170 pixels so that you can see even large graph over here
4:42
So this was the first type of chart. If you want to add different type of chart, just come back to this website and come here
4:52
And here you can see there are other charts option. Now let me click on this one bar chart
5:00
Click on this link. And just copy all these scripts. Come back to the html file and replace these scripts
5:14
And you can see this select element by ID chart div. So just copy this ID
5:26
And paste it here. And here you can see this chart div
5:31
So just copy this ID. And paste it here. And here you can see this chart div
5:38
And here you can see this chart div. So just copy this ID
5:44
And add it here in the body. That's it. Then reload the web page
5:50
And now you can see this bar chart on this web page. Again, if you want to change its value and name, you can change it here
6:05
Let's come back to this website. And now I will select this one line chart
6:18
So just copy this script. And come to the html file and replace it into the head
6:31
This time you can see a different ID here that is curved bar chart
6:37
So just copy this one and add it here. Now reload the web page
6:45
Now you can see the curved chart on this web page. Again, you can see it is very easy to change its value and name
6:59
So after changing the value, you can see different graph. Now again, come to this website and this time I will click on this one column chart
7:09
And click on this icon. You can see different type of chart over here. So let me select this one comparison chart
7:14
Then click on this button. Copy this script. Replace it into the head tag
7:27
And copy this ID and write it here in the body tag and reload the web page
7:36
So now you can see this comparison chart over this web page. And if you want to change its name value, you can easily change it from here
7:44
As you saw this was very easy to add a chart or graph on your website
7:48
I hope this video will be helpful. As you saw this was very easy to add a chart or graph on your website
7:54
I hope this video will be helpful for you. If so, please hit the like button and also subscribe my channel EZ Tutorials
8:00
Thank you so much for watching this video till the end
