create account

Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial by sargoon

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @sargoon · (edited)
$82.99
Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial
## Welcome to the first Video Tutorial of the Chart.js!

![](http://blog.greendeveloper.ir/wp-content/uploads/chart.png)


#### What Will I Learn?

- You will learn how to create a chart with Chart.js library from scratch.

- You will learn how to create a chart without any server using.

- You will learn how to make a chart without using any functional software.

- You will learn how to install the Chart.js library and Bootstrap CDN for CSS/HTML.

#### Requirements

- Chartjs library path.
- Visual Studio Code. (or another text editor)
- Bootstrap CDN.
- A Standard Computer.
- XAMPP Server Control Panel. (Not used in this video but to be used in other education episodes)
- A Standard Browser.

#### Difficulty

- Intermediate

#### Description

Hello everyone, welcome to the first part of the Chart.js Education Series. In this video I showed you how to create a chart without using any servers. I teached you how to create a chart.js from scratch with totally manually. Also I explained in detail all the commands used when creating this chart. I showed and I explained you how to use "let", "getElementById", "canvas" and other commands. I teached you how to install Chart.js library and Bootstrap CDN CSS format for HTML5. 
I gave technical information about functions, variables, codes, libraries and all operations. 

![](https://preview.ibb.co/buUjRn/ss.jpg)

Our Chart.js education series will progress from basic - intermediate to advanced. All the programs described in the video (Chart.Js, Visual Studio Code, XAMPP Server Control Panel Server, Bootstrap CDN CSS Library) are open source and are all included in the links section of the GitHub repositories (Except XAMPP Control Panel Server). If you wish, you can access the web pages of these programs and download links for Windows from the links section.

#### Video Tutorial

https://youtu.be/m6R_faiXGZM

#### My Operating System

![](https://steemitimages.com/0x0/https://i.hizliresim.com/gODJG2.png)

#### Curriculum
This video is first video of the Chart.js. When next episodes are uploaded, links to previous episodes will be place here.

#### Links
- [Chart.js GitHub Repo](https://github.com/chartjs/Chart.js)
- [Chart.js Website](chartjs.org)
- [Visual Studio Code (VSCode) GitHub Repo](https://github.com/Microsoft/vscode)
- [Visual Studio Code Web Site](https://code.visualstudio.com/)
- [Visual Studio Code Download Link for Win x64](https://go.microsoft.com/fwlink/?Linkid=852157)
- [XAMPP Server Web Site](https://www.apachefriends.org/en/index.html)
- [XAMPP Server(For Windows) Download Link](https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe)
- [CDN Bootstrap GitHub Repo](https://github.com/MaxCDN/bootstrapcdn)
- [CDN Bootstrap Web Page](https://www.bootstrapcdn.com/)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sargoon/chart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
๐Ÿ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 127 others
properties (23)
authorsargoon
permlinkchart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":8843683,"name":"Chart.js","full_name":"chartjs/Chart.js","html_url":"https://github.com/chartjs/Chart.js","fork":false,"owner":{"login":"chartjs"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","en","video-tutorial","chartjs"],"users":["sargoon"],"links":["https://github.com/chartjs/Chart.js","https://github.com/Microsoft/vscode","https://code.visualstudio.com/","https://go.microsoft.com/fwlink/?Linkid=852157","https://www.apachefriends.org/en/index.html","https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe","https://github.com/MaxCDN/bootstrapcdn","https://www.bootstrapcdn.com/"],"moderator":{"account":"rosatravels","time":"2018-04-17T06:05:12.841Z","pending":false,"reviewed":true,"flagged":false},"questions":{"voters":["neemanbhat","redart"],"answers":[{"question_id":"vtut-1","answer_id":1,"user":"neemanbhat","influence":5},{"question_id":"vtut-2","answer_id":3,"user":"neemanbhat","influence":5},{"question_id":"vtut-3","answer_id":2,"user":"neemanbhat","influence":5},{"question_id":"vtut-4","answer_id":2,"user":"neemanbhat","influence":5},{"question_id":"vtut-5","answer_id":2,"user":"neemanbhat","influence":5},{"question_id":"vtut-6","answer_id":2,"user":"neemanbhat","influence":5},{"question_id":"c-1","answer_id":3,"user":"neemanbhat","influence":5},{"question_id":"c-2","answer_id":4,"user":"neemanbhat","influence":5},{"question_id":"c-3","answer_id":1,"user":"neemanbhat","influence":5},{"question_id":"c-4","answer_id":1,"user":"neemanbhat","influence":5},{"question_id":"c-5","answer_id":3,"user":"neemanbhat","influence":5},{"question_id":"c-6","answer_id":3,"user":"neemanbhat","influence":5},{"question_id":"vtut-1","answer_id":1,"user":"redart","influence":30},{"question_id":"vtut-2","answer_id":1,"user":"redart","influence":30},{"question_id":"vtut-3","answer_id":1,"user":"redart","influence":30},{"question_id":"vtut-4","answer_id":1,"user":"redart","influence":30},{"question_id":"vtut-5","answer_id":1,"user":"redart","influence":30},{"question_id":"vtut-6","answer_id":1,"user":"redart","influence":30},{"question_id":"c-1","answer_id":1,"user":"redart","influence":30},{"question_id":"c-2","answer_id":1,"user":"redart","influence":30},{"question_id":"c-3","answer_id":1,"user":"redart","influence":30},{"question_id":"c-4","answer_id":1,"user":"redart","influence":30},{"question_id":"c-5","answer_id":1,"user":"redart","influence":30},{"question_id":"c-6","answer_id":1,"user":"redart","influence":30}],"total_influence":0,"most_rated":[{"question_id":"vtut-1","answer_id":1,"influence":35,"voters":["neemanbhat","redart"]},{"question_id":"vtut-2","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"vtut-3","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"vtut-4","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"vtut-5","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"vtut-6","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"c-1","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"c-2","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"c-3","answer_id":1,"influence":35,"voters":["neemanbhat","redart"]},{"question_id":"c-4","answer_id":1,"influence":35,"voters":["neemanbhat","redart"]},{"question_id":"c-5","answer_id":1,"influence":30,"voters":["redart"]},{"question_id":"c-6","answer_id":1,"influence":30,"voters":["redart"]}]},"score":100,"total_influence":35,"staff_pick":null,"config":{"questions":[{"question":"Does the tutorial address a minimum of 3 substantial concepts and no more than 5?","question_id":"vtut-1","answers":[{"answer":"3-5 substantial concepts covered in the tutorial.","answer_id":1,"value":10},{"answer":"Less than 3 or more than 5 substantial concepts covered in the tutorial.","answer_id":2,"value":5},{"answer":"No substantial or recognisable concepts.","answer_id":3,"value":0}]},{"question":"Concepts covered in the tutorial are indicated in the post text with a short description of each concept and when appropriate, images?","question_id":"vtut-2","answers":[{"answer":"Thorough text and images for concepts covered.","answer_id":1,"value":5},{"answer":"Minimal text and images.","answer_id":2,"value":2},{"answer":"No or very little text and images.","answer_id":3,"value":0}]},{"question":"Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?","question_id":"vtut-3","answers":[{"answer":"Yes","answer_id":1,"value":10},{"answer":"No","answer_id":2,"value":0}]},{"question":"Is the tutorial part of a series?","question_id":"vtut-4","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but first entry in the series.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Is there an outline for the tutorial content at the beginning of the post?","question_id":"vtut-5","answers":[{"answer":"Yes.","answer_id":1,"value":5},{"answer":"Yes, but not detailed enough or does not cover all sections.","answer_id":2,"value":2},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the presenter speak clearly and is easily understandable?","question_id":"vtut-6","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Mostly understandable.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the writing style meet the Utopian standard considering formalness, informativeness and clarity of the content?","question_id":"c-1","answers":[{"answer":"It is formal, informative and well written with clear content.","answer_id":1,"value":10},{"answer":"It is informative with clear content but not formal enough.","answer_id":2,"value":5},{"answer":"The contribution could be more informative or contains unrelated information, formality and clarity of the content are good enough.","answer_id":3,"value":4},{"answer":"Not all sections were clear enough but overall holds value for the project.","answer_id":4,"value":2},{"answer":"Not at all.","answer_id":5,"value":0}]},{"question":"Was the provided category template for the editor followed?","question_id":"c-2","answers":[{"answer":"All points of the template were included with additional points as well.","answer_id":1,"value":5},{"answer":"The template was followed without additions.","answer_id":2,"value":4},{"answer":"The template was edited but the points were covered in different way.","answer_id":3,"value":3},{"answer":"Not all points of the template were covered in the contribution but the structure is clear enough.","answer_id":4,"value":3},{"answer":"The template was not followed but the structure is clear enough.","answer_id":5,"value":2},{"answer":"The contents are not clearly structured at all.","answer_id":6,"value":0}]},{"question":"Did the contributor tag other users?","question_id":"c-3","answers":[{"answer":"No other users were tagged by the contributor.","answer_id":1,"value":5},{"answer":"Used tags are reasonable and all tagged people are connected to the project and/or the contribution.","answer_id":2,"value":5},{"answer":"The contribution contains mentions of other users that are not directly related to the contribution but related in other ways.","answer_id":3,"value":2},{"answer":"The contributor misuses tagging of other users.","answer_id":4,"value":0}]},{"question":"Did the contributor ask for upvotes, resteems, follows or witness vote?","question_id":"c-4","answers":[{"answer":"No","answer_id":1,"value":5},{"answer":"Yes, but not in a way that disturbs readability. ","answer_id":2,"value":5},{"answer":"Yes.","answer_id":3,"value":0}]},{"question":"Was a graphical content like images, charts, videos or screenshots included?","question_id":"c-5","answers":[{"answer":"Yes, the graphical content is included and adds more value to the contribution.","answer_id":1,"value":5},{"answer":"No but the contribution works well without graphical content well.","answer_id":2,"value":4},{"answer":"Yes, but most of the graphical contentโ€™s purpose is just for presentational matters.","answer_id":3,"value":3},{"answer":"No relevant or useful graphical content is included in the contribution.","answer_id":4,"value":0}]},{"question":"How would you rate the overall added value?","question_id":"c-6","answers":[{"answer":"Extraordinary value to both the project and the open source community overall.","answer_id":1,"value":20},{"answer":"Significant value to the project or open source community.","answer_id":2,"value":15},{"answer":"Some value to the project or open source community.","answer_id":3,"value":10},{"answer":"Little value to the project or open source community.","answer_id":4,"value":5},{"answer":"No obvious value to project or open source community.","answer_id":5,"value":0}]}]}}"
created2018-04-15 19:08:06
last_update2018-04-17 06:05:12
depth0
children5
last_payout2018-04-22 19:08:06
cashout_time1969-12-31 23:59:59
total_payout_value60.266 HBD
curator_payout_value22.728 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,047
author_reputation62,586,788,362,329
root_title"Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,249,962
net_rshares18,423,425,242,518
author_curate_reward""
vote details (191)
@redart ·
$0.03
Thank you for the tutorial. It is really good for us :)
๐Ÿ‘  
properties (23)
authorredart
permlinkre-sargoon-chart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial-20180416t133813056z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-16 13:38:12
last_update2018-04-16 13:38:12
depth1
children1
last_payout2018-04-23 13:38:12
cashout_time1969-12-31 23:59:59
total_payout_value0.027 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length55
author_reputation6,723,529,098,076
root_title"Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,382,835
net_rshares5,813,499,802
author_curate_reward""
vote details (1)
@sargoon · 
You're welcome, thank you so much for your comment :)
properties (22)
authorsargoon
permlinkre-redart-re-sargoon-chart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial-20180416t134746727z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-16 13:47:48
last_update2018-04-16 13:47:48
depth2
children0
last_payout2018-04-23 13:47:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length53
author_reputation62,586,788,362,329
root_title"Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,384,387
net_rshares0
@rosatravels ·
$0.02
@sargoon Thank you for your contribution.

A few suggestions for you:

- when you speak, try to speak more deliberately so that your words are not jumbled together.

- in the video tutorial, it is mostly dark screen, and very hard on the eyes.  If you want users to learn the steps, you need to 'zoom' in while you do the recording so that users can see the actual things you are typing in and not to squint their eyes to follow along.

- another way is what I often do is that you can create 'Written Steps' with Text Boxes on the screen.  This extra work is needed to help users learn effectively.  While they see you type, they also see 'larger written text' on the screen in boxes to write down the steps themselves.

- Since this is the first of your series, you can start implementing some of these useful teaching tools to help your audience to learn.



----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.
Chat with us on [Discord](https://discord.gg/uTyJkNm).

**[[utopian-moderator]](https://utopian.io/moderators)**
๐Ÿ‘  
properties (23)
authorrosatravels
permlinkre-sargoon-chart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial-20180417t061659782z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-17 06:17:00
last_update2018-04-17 06:17:00
depth1
children1
last_payout2018-04-24 06:17:00
cashout_time1969-12-31 23:59:59
total_payout_value0.018 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,103
author_reputation422,827,447,688,168
root_title"Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,513,050
net_rshares5,902,030,256
author_curate_reward""
vote details (1)
@sargoon · 
Okay, i understand. Thank you for moderating my contribution, I will consider your suggestions.
properties (22)
authorsargoon
permlinkre-rosatravels-re-sargoon-chart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial-20180417t162228298z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-17 06:23:39
last_update2018-04-17 06:23:39
depth2
children0
last_payout2018-04-24 06:23:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length95
author_reputation62,586,788,362,329
root_title"Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,513,853
net_rshares0
@utopian-io · 
### Hey @sargoon I am @utopian-io. I have just upvoted you!
#### Achievements
- People loved what you did here. GREAT JOB!
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Utopian Witness!
<a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness</a>

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-sargoon-chart-js-education-series-part-1-how-to-create-a-bar-chart-without-using-any-server-or-english-video-tutorial-20180417t120654305z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-17 12:06:54
last_update2018-04-17 12:06:54
depth1
children0
last_payout2018-04-24 12:06:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length757
author_reputation152,955,367,999,756
root_title"Chart.js Education Series Part #1: How to Create a Bar Chart Without Using Any Server | English Video Tutorial"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,557,564
net_rshares0
Help/Feedback