Menu

How To Create Chart Speedmeter

Hello guys, Today I will share How Create  Chart Speedmeter.

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
  <script src="jQuery/jquery-3.4.1.min.js"></script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gauge Chart with datalabels plugin</title>
 <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
  <script src="https://unpkg.com/chartjs-gauge@0.3.0/dist/chartjs-gauge.js"></script></script>
</head>
<body>
  <div class="position-relative">
     <div id="canvas-holder" class="chart-gro-score">
       <span class="low-score">E</span>
           <canvas id="chart"></canvas>
       <span class="hight-score">A</span>
     </div>
      <div class="low-view">
        <h3>LOW</h3>
      </div>
      <div class="medium-view">
        <h3>Medium</h3>
      </div>
      <div class="high-view">
        <h3>HIGH</h3>
      </div>
   </div>
</body>
</html>

 

 CSS

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.position-relative{
   position: relative;
}
.chart-gro-score{
    width:80%; 
    display: flex; 
    align-items: flex-end;
}
.chart-gro-score span{
    padding-bottom: 30px;
    font-size: 16px;
    font-family: 'Montserrat-SemiBold';
    color: #1a1753;
}
.low-score{
    margin-right: -22px;
}
.hight-score{
    margin-left: -22px;
}
.low-view{
    position: absolute;
    bottom: 60px;
    left: 20px;
}
.low-view h3{
    font-size: 13px;
    font-family: 'Montserrat-SemiBold';
    color: #FFFFFF;
    -ms-transform: rotate(-70deg);
    transform: rotate(-70deg);
}
.medium-view{
    position: absolute;
    top: 6px;
    left: 120px;
}
.medium-view h3{
    font-size: 13px;
    font-family: 'Montserrat-SemiBold';
    color: #FFFFFF;
}
.high-view{
    position: absolute;
    bottom: 60px;
    right: 124px;
}
.high-view h3{
    font-size: 13px;
    font-family: 'Montserrat-SemiBold';
    color: #FFFFFF;
    -ms-transform: rotate(75deg);
    transform: rotate(75deg);
}

 

Java Script

window.onload = function () {
        var config = {
            type: 'gauge',
            data: {
                datasets: [{
                    data: [2, 4, 6, 8, 10],
                    value: 1,
                    backgroundColor: ['#e70100', '#ee4e00', '#ee9f00', '#9fee00', '#00b100'],
                    borderWidth: 2,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: false,
                },
                layout: {
                    padding: {
                        bottom: 30
                    }
                },
                needle: {
                    radiusPercentage: 2,
                    widthPercentage: 3,
                    lengthPercentage: 25,
                    color: 'rgba(0, 0, 0, 1)'
                },
            }
        };

        var ctx = document.getElementById('chart').getContext('2d');
        window.myGauge = new Chart(ctx, config);
       
        config.data.datasets.forEach(function (dataset) {
            dataset = randomValue(dataset.data);
        });
     
    };

 

649
Search

Ads