How to create a Speed-O-Meter with Needle Gauge Chart in Chart.js

Подписаться 18 тыс.

Просмотров 19 тыс.

50% 1

How to create a Speed-O-Meter with Needle Gauge Chart in Chart.js
00:02 Creating a speedometer with needle gauge in Chart.js
02:15 Converting a bar chart to a doughnut chart with adjustments
06:27 Creating a speedometer with 3 colors and a needle gauge.
08:28 Creating a gauge needle block in Chart.js
12:33 Calculate the total from data sets and use array reduce method.
14:42 Calculating the needle value and angle for the Speed-O-Meter
18:38 Creating a circle using ctx.arc
20:36 Calculating the dynamic positioning of the needle on the chart.
24:15 Creating a needle gauge chart with Chart.js
26:08 Creating a gauge chart and drawing the needle
30:07 Understanding the height and rotation in the chart.
31:56 Calculate the top point of the speed-o-meter in Chart.js
35:38 Creating a needle gauge chart with Chart.js
37:30 Creating a Speed-O-Meter with Needle Gauge in Chart.js
41:08 Adjusting and customizing the needle gauge chart in Chart.js
43:01 Getting tooltip items and extracting data values
In this video we will create a speed-o-meter with needle gauge chart in Chart.js. A speed-o-meter chart would track speed or other types of value by pointing it with a needle. Chart.js does not support this out of the box but it is possible to combine certain items together.
With the doughnut chart we can create a gauge chart with some modifications and add a needle to it with canvas. This creates a great speed-o-meter gauge chart.
The topic is quite complicated but we take it slow and make it easy to follow. However, it is worth to learn as this will open up many new doors.
Let's explore this right now!
▬ Chartjs Viewers Question Series ▬▬▬▬▬▬▬▬▬▬
This is part of the Chartjs Viewers Question series. Where we answer viewer questions. This question was asked by one of our viewers. This question was asked by two viewers.
A special thank you to David Dewasmes for asking this question. You can find the question here asked on this video: • Chart JS Pie Chart
And A special thank you to Nilesh Kumar. A special thank you for asking this question. You can find the question here asked on this video: • Chart JS Pie Chart • How to create Heat Map...
▬ Materials/References ▬▬▬▬▬▬▬▬▬▬
To keep the video short we might expect you to know parts. These parts we have explained in other videos. You can find the references here below:
Understand setup, config and render init blocks: • How to use config and ...
Starting Code: www.chartjs3.com/docs/chart/g...
▬ Got a Question? Comment! ▬▬▬▬▬▬▬▬▬▬
Got a question or special request about a specific item? Comment below and tell me your question. I will make sure to follow up on you!
▬ Find Me Here ▬▬▬▬▬▬▬▬▬▬
Blog: www.chartjs3.com/chart-js-blog/
Website: www.chartjs3.com
Udemy Course: www.udemy.com/course/chart-js...
Chart JS tutorials for Beginners:
🎓 Beginners Serie: • ChartJS intro creating...
Chart JS tutorials for Intermediate:
👁️ Most Watched Chart JS Video: • Update dynamic chart j...
⭐ Personal Favorite Chart JS Video: • How to make an interac...
▬ About Us ▬▬▬▬▬▬▬▬▬▬▬▬
Why we created these #chartjs and #javascript video tutorials?
WHY
Creating charts in javascript is very rewarding but extremely challenging. The Chart JS library made it easier to render charts. However the chart js documentation is hard to understand for many. It requires a lot of different moving parts to work along. The canvas tag, javascript, arrays and Chart JS all need to be combined to draw an eye catching bar chart or line chart.
The videos explains the chart js documentation in a more visual and easy to understand way. You can follow along with the code and quickly grasp how it works. We cover the code in chart js but also what truly happens and why something happens when we write a line of code. This fundamental understanding gives clarity to you as a developer in chartjs. In short it is the Chart JS video documentation.
HOW
We answer questions from YOU (viewers) by creating an answer video that covers the questions YOU have posted in the comment section.
WHAT
Our goal is to help YOU learn how to draw charts in Chart JS by showing you in video format how to do it.
Chart JS Video Documentation Site: www.chartjs3.com
▬ Chart JS 3.5.1 ▬▬▬▬▬▬▬▬▬▬▬▬
Chart JS is a javascript library to draw charts in the canvas tag on your site. Presenting data in a visual manner such as charts is more effective and appealing. All the charts are always coded in the latest Chartjs version which is as of this recording Chart JS 3.5.1.
What type of charts can you make with Chart.JS?
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart and area chart. And with some clever tricks and visual adjustment more can be done.

Опубликовано:

21 сен 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 52

@ChartJS-tutorials 2 года назад

Want to continue on with the speed-o-meter gauge chart? Watch this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-W81cRus9QEU.html

@TravisWalker1980 2 года назад

small recommendation. For the length of the pointer. Instead of using ctx.lineTo(height - (ctx.canvas.offsetTop + 10), 0); use this instead. ctx.lineTo(chart._metasets[0].data[0].outerRadius, 0); The pointer will always end at the top end of the gauge

@TravisWalker1980 2 года назад

But otherwise, ty. Helped me a ton getting mine setup.

@alexandruilea915 Год назад

@@TravisWalker1980 Right, I had issue with that as well when scaling back and forward but I ended up replacing it with " ctx.lineTo(0 + height / 2.3, 0); ". Now it always points at about half of the width cause it's height dependent. OuterRadius seems like an awesome trick, I wish I would have read the comments before finding my own way of solving it. It would have been faster.

@redigirma Год назад

your videos are very helpful. the most comprehensive tutorial sofar on charts js out there. Thank you!

@G3nba 2 года назад

Thank you for this! It's exactly what i needed, i've been trying to wrap my head around a project that needs something like this and i just didn't get it. This is very well explained. I'd love to see a video where you create charts that refresh with API requests so we can display real time data

@redmundperrz7234 Год назад

Thank you for the demo sample,im like for this for ages

@riccardocafagna6816 Год назад

Very good video, helped a lot. For the length of the pointer I've found a different solution. This is a circumference so we know that the radius has the same length in any point of it. With that we can say the radius is the width divided by 2. For me is working very well in most situations.

@yashu6404 Год назад

Thank you so much sir

@Lucas-mi9rc Год назад

Great tutorial! Is there any way you can animate the needle when you update the dataset? So it moves smoothly? Thanks in advance

@mvieira5802 Год назад

Awesome tutorial!!!! Is it possible to add a second needle on the chart with a different value? (e.g. one for current speed and one for average speed). Thank you very much!

@amihaiatias7749 Год назад

hi, tux for the content, super videos you got !! just can you explain how we can animate the needle from start of chart to needle value ??

@venirajan8556 2 года назад

I want to do the same thing with chartjs 2.9.4 and also I need to show it as a gradient color. Do you have any tutorial or video for that? Your help will be much appreciated, Thank you.

@amarjeet7240 2 года назад

Hi Sir, Can we get the source code for speedo meter needle gauge chart in chartjs version- 3.6.0 which is coded in the above video by you?

@akun4zzz433 Год назад

thankyou for the tutorial, but do you know how to make the needle move smoothly from one value to another value?

@hfe1833 2 года назад

I'm waiting for this video for ages,pls make it "live" using socket.io or ajax

@claib4 Год назад

Great Video! Really helped me out. // Equation to make the needle length dymamic for responsive design website const needleLength = width - chart._metasets[0].data[0].y/2;

@raymondwoodley5795 Год назад

Thank you for a very informative, detailed video, brilliantly done. Has the second video for adding in labels around the gauge been done? Thank you.

@shhhhhh86 2 года назад

Hi, can you show an example on how to create a linear gauge chart?

@LongBoy.0 Год назад

Here's what I had to do get get the needle to work perfectly with a Doughnut Chart from react-charts-2 and charts v 4.2: const chartData = { labels: ["Filled", "Empty"], datasets: [ { data: [data, 100 - data], backgroundColor: ["rgba(100, 40, 230, 0.2)", "rgba(0, 0, 0, 0.1)"], borderColor: ["rgba(100, 40, 230, 1)", "rgba(0, 0, 0, 0.2)"], borderWidth: 1, needleValue: 90 } ] }; const guageNeedle = { id: "guageNeedle", afterDatasetDraw(chart, args, options) { const { ctx, config, data, chartArea: { width, height, ...rest } } = chart; ctx.save(); const needleValue = data.datasets[0].needleValue; const dataTotal = data.datasets[0].data.reduce((a, b) => a + b, 0); const angle = Math.PI + (1 / dataTotal) * needleValue * Math.PI; console.log(needleValue, dataTotal, angle); console.log(ctx); const cx = width / 2; const cy = chart._metasets[0].data[0].y; // needle ctx.translate(cx, cy); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(0, -2); ctx.lineTo(chart._metasets[0].data[0].outerRadius, 0); ctx.lineTo(0, 2); ctx.fillStyle = "#444"; ctx.fill(); // needle dot ctx.translate(-cx, -cy); ctx.beginPath(); ctx.arc(cx, cy, 5, 0, 10); ctx.fill(); ctx.restore(); } }; const chartOptions = { circumference: 180, rotation: -90, cutout: "90%", borderRadius: 8, plugins: { legend: { display: false }, tooltips: { enabled: false } } }; return ( );

@itvirtual8420 Год назад

I have my guage settings as "circumference: 120; rotation: 300", needle length is perfect at center, smaller at edges. How can i solve this.

@sanalms1601 Год назад

thank you sir, can show how to add one more needle in speed o meter chart

@humahmed3654 3 месяца назад

00:02 Creating a speedometer with needle gauge in Chart.js 02:15 Converting a bar chart to a doughnut chart with adjustments 06:27 Creating a speedometer with 3 colors and a needle gauge. 08:28 Creating a gauge needle block in Chart.js 12:33 Calculate the total from data sets and use array reduce method. 14:42 Calculating the needle value and angle for the Speed-O-Meter 18:38 Creating a circle using ctx.arc 20:36 Calculating the dynamic positioning of the needle on the chart. 24:15 Creating a needle gauge chart with Chart.js 26:08 Creating a gauge chart and drawing the needle 30:07 Understanding the height and rotation in the chart. 31:56 Calculate the top point of the speed-o-meter in Chart.js 35:38 Creating a needle gauge chart with Chart.js 37:30 Creating a Speed-O-Meter with Needle Gauge in Chart.js 41:08 Adjusting and customizing the needle gauge chart in Chart.js 43:01 Getting tooltip items and extracting data values

@raymondwoodley5795 Год назад

Also how would one restructure the base code for require JS

@fritziemaeligeralde2989 2 года назад

This is really helpful. I have a couple of requirements that I can't figure out. Hope you can help me out. 1. Is it possible to remove the space at the top? 2. How can I add the data labels in the arcs of the speedometer? Thanks in advance!

@ChartJS-tutorials 2 года назад

Hi Fritzie Mae Ligeralde, thank you for your question. I created an answer video covering your specific #1 question here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-f5KmJuRv-YY.html The upper video will solve 1 issue but generates 2 other issues. To solve those watch the videos below as well. These 3 videos will go hand in hand to solve all issues. Adjust Legend Margin, watch video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-87rnMzENg3U.html Adjust Padding Bottom of Chart, watch video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0OAWkQqDfac.html

@nick16754 Год назад

What's the best video to watch to learn how to add scale labels to the speedometer?

@tanveer4u007 Год назад

Hi Sir, how about the same example in react js?

@LongBoy.0 Год назад

is there a Github with the finished code?

@michaelreed8911 2 года назад

Hello, all your videos are excellent. As soon as I add ctx.rotate(angle); and refresh the entire canvas rotates many times and ends up on an odd angle, the needle does not move. is it something simple? I'll continue to check my code I copied from your video.

@ChartJS-tutorials 2 года назад

Hi Michael, thank you for your question. The issue for this so called "rollercoaster effect" is where we place plugin. The solution would be to reposition it outside of the chart structure. Making it a function would be a better solution. Why this happens is because Chart.js has an effect that works on the tooltip. On hover the tooltip appear and disappear. This effect is in essence 30 ~ 35 frames of quickly drawing and redrawing the chart code which happens within 500 mili seconds because average screen frame per second = 60. Sadly, this effect on update refires everything and the rotation is happening 30 times over in 500 mili seconds. Which gives this "rollercoaster effect". How to solve this? Making it a function similar to this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MMUpgFjsXpg.html I might need to make a new video for this topic in the near future.

@reyestaaa7204 Год назад

can you give tutorial for react js i really confused thanks

@huuthangho9204 Год назад

i can't get _metasets property in chart context, pls help me?

@julianascandolafrossard226 2 года назад

How to make a gradient color in a Gauge Chart?

@christiancazzaro6369 2 года назад

Hi, both needle dot and needle do not appear. Do you know why that happens? I followed the code to the letter. Thanks for helping

@ChartJS-tutorials 2 года назад

Hi Christian, thank you for your question. You have probably one or the other that is an issue. 1. Did you activated that custom plugin? If nothing appears including the text, dot and needle. In that case the plugin is not activated in the options object. 2. If you have the text appear but the needle does not show up it must be your coordinates or drawing order of the fillStyle. Make sure this code: fillStyle = 'black'; comes after the line and arc coordinates. I would do the following. Check the plugin activation in the options object. This code below you need to add at the right location and make sure you have pluginS

@christiancazzaro6369 2 года назад

@@ChartJS-tutorials Solved it, thanks a lot! However, the chart is not responsive and that's an issue for me..I tried with the Chart.js option "responsive" but I can't achieve the desired result. Do you know how to make it responsive? Thanks in advance :)

@ChartJS-tutorials 2 года назад

@@christiancazzaro6369 try to watch this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--6W8UICjDSo.html This covers how to make a chart responsive.

@k1k2k3k4 Год назад

Is it possible to somehow use the circumference option for a polar chart?

@ChartJS-tutorials Год назад

Hi R thank you for your question. Not that I know of. As the scale by default if radial so it would be tricky. Only way to do this is to customize the scale it self. However, I never explore this item for the Polar Area Chart.

@k1k2k3k4 Год назад

@@ChartJS-tutorials Thanks for your reply! If the ChartJS God doesn't see light in it, it must be certainly darkness hahaha

@ChartJS-tutorials Год назад

@@k1k2k3k4 whaha, I cannot claim that honorable name. I still have way too much to learn before considering that high level. However, I am certain there is a way but understanding to create custom charts is a tricky topic where I truly lack understanding. Eventually I might figure it out.

@vikasswamy3498 2 года назад

sir, i exactly tried you code but guageNeedle plugin not showing any data in console, i will drop you a mail please help me out

@SathishKumarbalu 2 года назад

I hope you have used plugin: [gaugeNeedle] instead of plugins: [gaugeNeedle]

@user-pc4eg6rz2m Год назад

why you don't add source code, bro? You could save a lot of time who doing it himself repeating after you

@AliAbdulsatar Год назад

hi have a good day you have the very nice vidoe but the needle not work not implemented مساشفى الفلوجة التعليمي * { margin: 0; padding: 0; font-family: sans-serif; } .chartMenu { width: 100vw; height: 40px; background: #1A1A1A; color: rgba(54, 162, 235, 1); } .chartMenu p { padding: 10px; font-size: 20px; } .chartCard { width: 100vw; height: calc(100vh - 40px); background: rgba(54, 162, 235, 0.2); display: flex; align-items: center; justify-content: center; } .chartBox { width: 300px; padding: 20px; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; } مستشفى الفلوجة التعليمي // setup const data = { labels: ['0% to 30%', '30% to 60%', '60% to 100%'], datasets: [{ label: 'Moniter', data: [18, 12, 6], backgroundColor: [ 'rgba(255, 26, 104, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', ], needleValue:33, borderColor: 'white', borderWidth: 2, cutout: '95%', circumference: 180, rotation: 270, borderRadius: 5 }] }; // gaugeNeedle const gaugeNeedle ={ id:'gaugeNeedle', afterDatasetDraw(chart, args, options){ const { ctx, config, data, charArea: { top, bottom, left, right, width, height} } = chart; ctx.save(); console.log(data) const needleValue = data.datasets[0].needleValue; const dataTotal = data.datasets[0].data.reduce((a, b) => a + b, 0); const angle = (Math.PI + (1 / dataTotal * needleValue * Math.PI)); const cx = width / 2; const cy = (chart.metasets[0].data[0].y); console.log(ctx.canvas.offsetTop); // needle ctx.translate(cx, cy); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(0, -2); ctx.LineTo(height -(ctx.canvas.offsetTop +10), 0); ctx.LineTo(0, 2); ctx.fillStyle ='#444'; ctx.fill(); // needle dot ctx.translate(-cx, -cy); ctx.beginPath(); ctx.arc(cx, cy, 5, 0, 10); ctx.fill(); ctx.restore(); ctx.font = '50px Helvetica'; ctx.fillStyle= '#444'; ctx.fillText(needleValue + '%',cx, cy + 60) } } // config const config = { type: 'doughnut', data, options: { }, Plugins: [gaugeNeedle], }; // render init block const myChart = new Chart( document.getElementById('myChart'), config ); // Instantly assign Chart.js version const chartVersion = document.getElementById('chartVersion'); chartVersion.innerText = Chart.version; best regards

@MrMahmoodhussam Год назад

Hi change charArea to chatArea: spelling issue change LineTo => lineTo change needleValue to 18 to see the line in the half of the circle if that does not work add change metasets to _metasets this related to version and frameworks

@digdug42069 2 года назад

I am using chart.js 3.7.1. The needle was not appearing. The Translate in the DOT block seems to break things. If I comment out the ctx.translate after the dot comment things get better. // needle ctx.translate(cx, cy); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(0, -2); ctx.lineTo(height - (ctx.canvas.offsetTop - 10), 0); ctx.lineTo(0, 2); ctx.fillStyle = '#444'; ctx.fill(); ctx.restore(); // needle dot ctx.translate(-cx, -cy); ctx.beginPath(); ctx.arc(cx, cy, 5, 0 ,10); ctx.fill(); ctx.restore(); // Text ctx.font = '20px Helvetica'; ctx.fillStyle = '#444'; ctx.fillText( needleValue +'%', cx, cy + 25 ); ctx.textAlign = 'center'; ctx.restore();

@digdug42069 2 года назад

By the way. Good job. Your presentation approach works really well for me.

@ChartJS-tutorials 2 года назад

Hi DigDug, thank you for your question. Yes that is correct. You will notice on this exact timestamp why I remove it because we use the ctx.restore(). Watch the video at 39:06 Why am I removing it? Because i have added above the command: ctx.restore(); That would reset all values including the ctx.translate back to original state. Afters I remove the : ctx.translate(-cx, -cy); Because that translate was like an undo option. Which is obsolete after the ctx.restore() command. Watch the video at the timestamp it will clarify.

@digdug42069 2 года назад

@@ChartJS-tutorials my bad.. sorry... I watched it over and over... trying to debug my code. I did not QA my code against the final code in your example thank you for responding

@ChartJS-tutorials 2 года назад

@@digdug42069 do not worry. This is something quite common to me as well. How often I miss out on something tiny like this, countless of times. Usually having an extra pair of eye tend to do the trick or taking a short break is helpful.