08-22-2023, 09:07 AM
[Tut] Gauge Chart JS – Speedometer Example
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/08/gauge-chart-js-speedometer-example.jpg" width="1200" height="699" title="" alt="" /></div><div><div><img decoding="async" src="https://phppot.com/wp-content/uploads/2023/06/gauge-chart-js.jpg" class="ff-og-image-inserted"></div>
<p>A gauge chart is a scale to measure performance amid the target. Yeah! My attempt at defining ‘Gauge.’ This article uses the ChartJS JavaScript library to create a gauge chat.</p>
<p>The below example creates a speedometer in the form of a gauge change. It achieves this with <strong>type=doughnut</strong>. The other options, cutout, rotation, and circumference, make the expected gauge chart view.<br /><a class="demo" href="https://phppot.com/demo/gauge-chart-js/">View Demo</a></p>
<div readability="62">
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html> <head> <title>Gauge Chart Example using Chart.js</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head> <body> <canvas id="gaugeChart"></canvas> <script> // data for the gauge chart // you can supply your own values here // max is the Gauge's maximum value var data = { value: 200, max: 300, label: "Progress" }; // Chart.js chart's configuration // We are using a Doughnut type chart to // get a Gauge format chart // This is approach is fine and actually flexible // to get beautiful Gauge charts out of it var config = { type: 'doughnut', data: { labels: [data.label], datasets: [{ data: [data.value, data.max - data.value], backgroundColor: ['rgba(54, 162, 235, 0.8)', 'rgba(0, 0, 0, 0.1)'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutoutPercentage: 85, rotation: -90, circumference: 180, tooltips: { enabled: false }, legend: { display: false }, animation: { animateRotate: true, animateScale: false }, title: { display: true, text: data.label, fontSize: 16 } } }; // Create the chart var chartCtx = document.getElementById('gaugeChart').getContext('2d'); var gaugeChart = new Chart(chartCtx, config); </script>
</body> </html>
</code></pre>
</div>
<p>The above quick example script follows the below steps to render a gauge chart with the data and the options.</p>
<p>Many of the steps are similar to that of creating any other chart using this library. We have seen many examples in the ChartJS library. You can start with the <a href="https://phppot.com/javascript/chart-js-bar-chart-example/">ChartJS bar chart example</a> if you are new to this JavaScript library.</p>
<p>The data and options are the main factors that change the chart view. This section has short notes for more information about the data and the options array created in JavaScript.</p>
<p>This JavaScript example uses an array of static data to form a gauge chart. You can supply dynamic data from the database or any external source instead.</p>
<p>The data array has the chart label, target, and current value. The target value is the maximum limit of the gauge chart scale. The current value is an achieved point to be marked.</p>
<p>Using these values, this script prepares the gauge chart dataset.</p>
<p>The options array is a configuration that affects the chart’s appearance.</p>
<p>The ChartJS allows featured configurations to experience the best chart views. Some of those options exclusive to the gauge chart are listed below.</p>
</div>
https://www.sickgaming.net/blog/2023/06/...r-example/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/08/gauge-chart-js-speedometer-example.jpg" width="1200" height="699" title="" alt="" /></div><div><div><img decoding="async" src="https://phppot.com/wp-content/uploads/2023/06/gauge-chart-js.jpg" class="ff-og-image-inserted"></div>
<p>A gauge chart is a scale to measure performance amid the target. Yeah! My attempt at defining ‘Gauge.’ This article uses the ChartJS JavaScript library to create a gauge chat.</p>
<p>The below example creates a speedometer in the form of a gauge change. It achieves this with <strong>type=doughnut</strong>. The other options, cutout, rotation, and circumference, make the expected gauge chart view.<br /><a class="demo" href="https://phppot.com/demo/gauge-chart-js/">View Demo</a></p>
<div readability="62">
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html> <head> <title>Gauge Chart Example using Chart.js</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head> <body> <canvas id="gaugeChart"></canvas> <script> // data for the gauge chart // you can supply your own values here // max is the Gauge's maximum value var data = { value: 200, max: 300, label: "Progress" }; // Chart.js chart's configuration // We are using a Doughnut type chart to // get a Gauge format chart // This is approach is fine and actually flexible // to get beautiful Gauge charts out of it var config = { type: 'doughnut', data: { labels: [data.label], datasets: [{ data: [data.value, data.max - data.value], backgroundColor: ['rgba(54, 162, 235, 0.8)', 'rgba(0, 0, 0, 0.1)'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, cutoutPercentage: 85, rotation: -90, circumference: 180, tooltips: { enabled: false }, legend: { display: false }, animation: { animateRotate: true, animateScale: false }, title: { display: true, text: data.label, fontSize: 16 } } }; // Create the chart var chartCtx = document.getElementById('gaugeChart').getContext('2d'); var gaugeChart = new Chart(chartCtx, config); </script>
</body> </html>
</code></pre>
</div>
<p>The above quick example script follows the below steps to render a gauge chart with the data and the options.</p>
<p>Many of the steps are similar to that of creating any other chart using this library. We have seen many examples in the ChartJS library. You can start with the <a href="https://phppot.com/javascript/chart-js-bar-chart-example/">ChartJS bar chart example</a> if you are new to this JavaScript library.</p>
<p>The data and options are the main factors that change the chart view. This section has short notes for more information about the data and the options array created in JavaScript.</p>
<p>This JavaScript example uses an array of static data to form a gauge chart. You can supply dynamic data from the database or any external source instead.</p>
<p>The data array has the chart label, target, and current value. The target value is the maximum limit of the gauge chart scale. The current value is an achieved point to be marked.</p>
<p>Using these values, this script prepares the gauge chart dataset.</p>
<p>The options array is a configuration that affects the chart’s appearance.</p>
<p>The ChartJS allows featured configurations to experience the best chart views. Some of those options exclusive to the gauge chart are listed below.</p>
</div>
https://www.sickgaming.net/blog/2023/06/...r-example/