How to get data and insert?

  • 0
    Greetings, members of the forum!

    There is a canvas.
    https://codepen.io/Olovyannikov/pen/ExyNbVZ
    In which the data from the 'data-value' attribute is substituted;
    Now the chart is rendered correctly, but with the wrong colors, and the data is substituted only from the second element .gauge

    How to make sure that the data is substituted correct?
    JavaScript Anonymous, Oct 14, 2020

  • 2 Answers
  • 0
    Kapets you have a mess here of course ... var, let, const, different approaches to declaring variables, then use dataset, then through getAttribute, then querySelector, then getBy * and a bunch of unnecessary loops.



    Rewrote:

    // helper functions
    function linearInterpolate (from_range, to_range, val) {
    var minX = from_range[0],
    minY = to_range[0],
    rangeX = from_range[1] - from_range[0],
    rangeY = to_range[1] - to_range[0];

    return (val - minX) * rangeY / rangeX + minY;
    }

    function clamp (x, min, max) {
    if (x < min) {
    return min;
    }
    if (x > max) {
    return max;
    }
    return x;
    }

    // constructor
    function Gauge (elem, options) {
    var gaugeVal = elem.dataset.value
    var options = options || {},
    canvas = document.createElement('canvas'),
    value = options.value || 0;

    this.options = options;

    this.ctx = canvas.getContext("2d");
    this.width = options.width || 100;
    this.height = options.height || this.width;

    // readjust lineWidth based on radius
    if (options.radius) {
    this.lineWidth = (this.width / 2 - options.radius);
    } else {
    this.lineWidth = options.lineWidth || 4;
    }
    this.radius = (this.width - this.lineWidth) / 2;

    //set colors for chart
    if (gaugeVal < 50) {
    this.color = options.color || 'rgba(224, 99, 100, 1)';
    } else {
    this.color = options.color || 'rgba(43, 197, 132, 1)'
    };

    this.background = options.background || 'rgba(241, 244, 249, 1)';

    this.range = [0, 100];

    this.interpolate = linearInterpolate.bind(this, this.range, [Math.PI, 2*Math.PI]);

    canvas.width = this.width;
    canvas.height = this.height / 2;

    this.set( value );

    elem.appendChild( canvas );
    }

    // get/set methods
    Gauge.prototype.get = function () {
    return this.value || 0;
    };

    Gauge.prototype.set = function (value) {
    var ctx = this.ctx,
    range = this.range,
    value = clamp(value, range[0], range[1]),
    drawArc = function () {
    ctx.beginPath();
    ctx.arc.apply(ctx, arguments);
    ctx.stroke();
    // bind all arguments except the end value
    }.bind(this, this.width / 2, this.height / 2,
    this.radius,
    Math.PI);

    this.value = value;
    ctx.clearRect(0,0,this.width,this.height / 2);

    ctx.lineWidth = this.lineWidth;

    // background
    ctx.strokeStyle = this.background;
    drawArc( 2 * Math.PI );

    // foreground
    ctx.strokeStyle = this.color;
    drawArc( this.interpolate( value ) );

    // optional display value
    if (this.options.displayvalue &&
    this.options.displayvalue !== 'false') {
    ctx.font = "bold " + this.lineWidth + "px Russia, Arial, sans-serif";
    if (gaugeVal < 50){
    ctx.fillStyle = "rgba(43, 197, 132, 1)";
    } else {
    ctx.fillStyle = 'rgba(224, 99, 100, 1)';
    }
    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    ctx.fillText(value, this.width / 2, 0);
    }
    };



    // create instances/handlers
    var gauges = document.querySelectorAll('.gauge');
    var gaugeHtml = document.querySelectorAll('.gauge__value');


    gaugeHtml.forEach(function(gaugeValue){
    const value = Number(gaugeValue.parentElement.dataset.value)
    gaugeValue.style.color = value > 50 ? 'rgba(43, 197, 132, 1)' : 'rgba(224, 99, 100, 1)';
    })
    // Инициализация
    gauges.forEach(function(gauge){
    let gaugeVal = gauge.dataset.value;
    const gaugeValueElement = gauge.querySelector('.gauge__value')
    gaugeValueElement.textContent = gaugeVal;
    new Gauge(gauge, gauge.dataset)
    })
    Anonymous

  • 0
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!