How to change data attribute value?

Question

This might be a simple question but I have been experimenting for the last hour or so without a successful conclusion. Basically, I have the following HTML:

<div data-trackcolor="#f39e93" data-size="60" data-linewidth="3" data-animate="500" data-percent="0" data-linecap="butt" data-barcolor="#fff" class="easyPieChart" data-toggle="easypiechart" style="width: 60px; height: 60px; line-height: 60px;">
  <span class="white font-90">0%</span>
  <canvas height="65" width="65" style="width: 60px; height: 60px;"></canvas>
</div>

I'm trying to change the value of data-trackcolor element using the following jQuery syntax:

$('[data-toggle=easypiechart]').data('trackcolor','#f39e93');

I also tried $(".easyPieChart").attr("data-trackcolor", "#f39e93");.

The value is changing, the color is not changing. I'm suspecting this is because of the canvas element. In order to understand what this markup does, you can have a look at the following URL.

It displays the round circle in the colored databoxes. I would appreciate if someone might have some ideas why this is not working.

Thanks.

Answer 1

With $.data you can read and set data values but you can not write in the DOM with it. From jQuery documentation of data method : https://api.jquery.com/data/

Additional Notes:

Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.

Update

Don't mind this, I've confused the question.

As an alternative use the attr setter :

$('#testBtn').on('click', function (ev){ 
 $("[data-toggle='easypiechart']").attr('data-trackcolor', '#f39e93');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-trackcolor="#fff" data-size="60" data-linewidth="3" data-animate="500" data-percent="0" data-linecap="butt" data-barcolor="#fff" class="easyPieChart" data-toggle="easypiechart" style="width: 60px; height: 60px; line-height: 60px;">
<span class="white font-90">0%</span>
<canvas height="65" width="65" style="width: 60px; height: 60px;"></canvas>
</div>

<button id="testBtn">Test</button>

After some further analyze I concluded : You don't need to change the data attribute because they are read only once at loading. To change the track color you need to get the easyPieChart instance and update it's options and trigger the update function.

The instance is assigned in the element data with the property name easyPieChart.

See : http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/charts/easypiechart/jquery.easypiechart.js at line 167

   ...
   return c.data("easyPieChart", new a.easyPieChart(e, f))
   ...

Putting all together

// simulates the initialisation
InitiateEasyPieChart.init();

// 
var getPies = function(){
 return $('[data-toggle="easypiechart"]');
};

var changePiesTrackColor = function(color){
  var $pies = getPies();
  $pies.each(function(idx, el){
    var $el = $(el);
    var easypiechartInstance = $el.data('easyPieChart');
    easypiechartInstance.options.trackColor = color;
    var currentValue  = $el.data('percent'); // there is no way to get the current Value from the instance because the scop of it is "privat".
    easypiechartInstance.update(currentValue);
    
  });
};

<div data-trackcolor="#f39e93" data-size="60" data-linewidth="3" data-animate="500" data-percent="10" data-linecap="butt" data-barcolor="#fff" class="easyPieChart" data-toggle="easypiechart" style="width: 60px; height: 60px; line-height: 60px;">

</div>

<hr />
<button onclick="changePiesTrackColor(getcolor('#0000ff'))">blue</button>
<button onclick="changePiesTrackColor(getcolor('#00ff00'))">green</button>
<button onclick="changePiesTrackColor(getcolor('#ff0000'))">red</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/beyond.min.js"></script>
<script src="http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
<script src="http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/charts/easypiechart/easypiechart-init.js"></script>

Answer 2

Thanks Puneet,

I was actually calling the script on page load, in order to solve the issue i put the call to the script in the function which changes the colors like the following:-

function changeWidgetColor()
{
    var percentageValue = $(".easyPieChart").attr('data-percent');

    if (percentageValue <= 20)
    {
        $(".easyPieChart").attr("data-trackcolor", "#f39e93");

        InitiateEasyPieChart.init();
    }

}

Answer 3

These data values are being used only once at the loading of page as per code written in THIS script file (from the link provided by you). So your changes made in these attributes dynamically won't affect the Charts colors or anything else.