HomeОбразованиеRelated VideosMore From: LevelUpTuts

ChartJS Tutorials #2 - Creating A Line Chart

472 ratings | 84900 views
In this video, we create a line chart with chart.js. Subscribe for more free tutorials https://goo.gl/6ljoFc, Buy this series and get access to ChartJS themes! https://goo.gl/BamhKi Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! https://www.leveluptutorials.com/store/products/pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e Simple yet flexible JavaScript charting for designers & developers. Mix and match bar and line charts to provide a clear visual distinction between datasets. Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. Out of the box stunning transitions when changing data, updating colours and adding datasets. Chart.js is a community maintained project, contributions welcome! Visualize your data in 8 different ways; each of them animated and customisable. Redraws charts on window resize for perfect scale granularity.
Html code for embedding videos on your blog
Text Comments (40)
EncryptedGuy (3 months ago)
This will no longer work because there is a newer version of chartjs with some different syntax
Elyse Lam (4 days ago)
https://www.chartjs.org/samples/latest/charts/line/basic.html i inspected this page and it helps
Sandeep Singh (6 months ago)
is it possible to have line chart along with horizontal bar charts?
Richard B. Montes (9 months ago)
Thank you for a very nice tutorial. Would be nice also if you show how to dynamically update the chart based on new data coming from mySQL?
User1 Developer (11 months ago)
How to specify x and y axis manually ?
Daily video's (2 months ago)
I too wanted
J. Yung (11 months ago)
how can i change the size of my graph?
Carson YT (1 year ago)
How do you get the dark theme in inspector?
RyanFender (1 year ago)
I get the following error and I cannot figure out why, - Uncaught TypeError: Chart is not a constructor. It's to do with "Chart" on line 3
Daniel Malik (1 year ago)
for those of who are having problem u should use add this in <script> tag https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js
Pete Kal (1 year ago)
when i console.log i don't get what you're getting i get this in the console <canvas id="lineChart" width="400" height="400"></canvas> i don't see any of the stuff it comes with what am i doing wrong?
Sebastián (1 year ago)
same problem here xd
francisco muan (1 year ago)
Pete Kal have you fixed it yet brother?cuz im having the same problem
Jishnu Sree (1 year ago)
canvas#linechart VM863:1 Uncaught SyntaxError: Invalid or unexpected token
Taimoor Ghani (1 year ago)
can you please tell me how to put a limit on scale number
Can I do pie 3d with chart.js?
Bhushan Nikhar (2 years ago)
this did not work for me
SAB .T (2 years ago)
it worked for me only after editing the options
Viseth Sen (2 years ago)
won't work for me either
lamlam hantam (2 years ago)
Chart.min.js:11 Uncaught TypeError: Cannot read property 'length' of null????? help me
Yair Castellanos (5 months ago)
+Ivo Bot Also, you can make the declarations in the $(document).ready();
Ivo Bot (1 year ago)
The <script> tags must be used AFTER you made the canvas. In your html file, you need to create the canvas first before there can be anything done with it. Example code (I have downloaded the file and put it in a folder in my project): <canvas id="lineChart" height="200" width="200"></canvas> <script src="../script/chart.min.js"></script> <script src="../script/graphCreator.js"></script> As you can see I created the canvas before I run any of the scripts. This way, the script which gets the element by id (GetElementByID) will know that lineChart is the canvas it works with.
PaniC Montage (2 years ago)
this wont work for me :/ Dunno why.
GifCo (2 years ago)
way to much alt-tabing between pages! Come on spend two min looking this over before you start recording!!
Yaniv Salman (1 year ago)
shut da fuck up. you watch a toturial for free so shut daaaaaaa fuck up! fucking shinebox
Ori Wiesel (2 years ago)
i don't know why, but i can't create a const var i'm working on netbeans on windows 10... and the "let" doesn't work either... any ideas?
GifCo (2 years ago)
+Ori Wiesel haha nice!! ES6 is sweet, you should check out Babel to get all the rest of the new features without waiting for browsers to catch up!
Ori Wiesel (2 years ago)
+GifCo actually i manage to do it, it was my stupid netbeans compiler fault...
GifCo (2 years ago)
what browser are you using?? const and let are new ES6 types and arnt fully supported everywhere yet. It should work fine with Chrome though. If not just go back to using var.
jade zeng (2 years ago)
That is cool .And the theme in chrome developer tool is beautiful.
Federico Vitale (2 years ago)
What theme donyou use for terminal ? is fantastic!
BahtDeaw (2 years ago)
thx you for great video me need more detail bar chart or pie ^_^
amr abdelaziz (2 years ago)
can you do a video about what theme you using now in atom ?
Pa Dam Tuts (2 years ago)
Nice tut! But why are you making really random pauses? I mean, sometimes, you just randomly stop talking and typing nothing. Probably you have to cut those elements in the editing, cause they are kind of weird. But still, good job =)
John Sabilla (2 years ago)
great tut!, I've used highcharts in the past, i'm curious how chart.js compares with it
KozmicLuis (2 years ago)
I love the way they look! The documentation seems very expressive.
Srikant Devarajan (2 years ago)
What theme and color scheme are you using in sublime. Looks fantastic!
Duncan Grubbs (2 years ago)
Srikant Devarajan that ain't sublime, it's atom
amol more (2 years ago)
Seti ui
amol more (2 years ago)
I am waiting for next series to be first

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.