I am using jQuery easy pie chart plugin for making pie charts. Initially I pass default configuration parameters. After that I want to change configuration parameters like bar-color, size of pie chart.

Default configuration parameters:

$('.chart').easyPieChart({
    easing: 'easeOutCirc',
    barColor: '#1abc9c  ',
    trackColor: '#f9f9f9  ',
    scaleColor:false,
    scaleLength: 5,
    percent: 67,
    lineCap: 'round',
    lineWidth: 15, //12
    size: 150, //110
    animate: {duration: 2000, enabled: true},
    onStep: function (from, to, percent) {
        $(this.el).find('.percent').text(Math.round(percent));
    }
});

I know how to set the percentage value of pie-chart dynamically, just like in the following way:

$('#'+domId).data('easyPieChart').update(value);

Except percentage, I want to set configuration parameters dynamically like:

I want to set size, bar-color of pie chart dynamically. For this I tried a lot of things but I didn't find the right way.

For this,I made JSFIddle for understanding.Initially size should be 110 after click on redraw button needs to change the size of pie chart.But it's not working.

Tell me, does the plugin I am using fulfill my requirements? If it does, how can I fix this?

I am using jQuery easy pie chart plugin for making pie charts. Initially I pass default configuration parameters. After that I want to change configuration parameters like bar-color, size of pie chart.

Default configuration parameters:

$('.chart').easyPieChart({
    easing: 'easeOutCirc',
    barColor: '#1abc9c  ',
    trackColor: '#f9f9f9  ',
    scaleColor:false,
    scaleLength: 5,
    percent: 67,
    lineCap: 'round',
    lineWidth: 15, //12
    size: 150, //110
    animate: {duration: 2000, enabled: true},
    onStep: function (from, to, percent) {
        $(this.el).find('.percent').text(Math.round(percent));
    }
});

I know how to set the percentage value of pie-chart dynamically, just like in the following way:

$('#'+domId).data('easyPieChart').update(value);

Except percentage, I want to set configuration parameters dynamically like:

I want to set size, bar-color of pie chart dynamically. For this I tried a lot of things but I didn't find the right way.

For this,I made JSFIddle for understanding.Initially size should be 110 after click on redraw button needs to change the size of pie chart.But it's not working.

Tell me, does the plugin I am using fulfill my requirements? If it does, how can I fix this?

• javascript
• jquery
• css
• jquery-easyui

4 Answers 4

We must destroy the existing data and then recreate the graph

var $chart = $(".easy-pie-chart");
        $chart.data('easy-pie-chart', null);
        $chart.easyPieChart({
           // my new settings here
        });

It seems that, as of now, the "easy pie chart" does not support dynamic options.

See https://github./rendro/easy-pie-chart/issues/65

If you want to stick with the plugin, you might want to recreate the chart pletely on modifications (i.e. destroy the previous chart and create a new one).

You can set these values for each chart on the page, for each id, not only for the class.

var chart = window.chart = $('#easypiechart1').data('easyPieChart');
$('.chart')#easyPieChart({
barColor: '#333',
}

});

Also, you can change these values from CSS.

.easypiechart {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
}

Another option is to add an extra class on click (update).

The solution is to .remove .chart and to .append it again in the parent. For example:

Here is the HTML:

<div class="chart-holder" data-count="86"><span class="chart" data-percent="86"></span></div>

JS:

$('.chart-holder').find('.chart').remove();
$('.chart-holder').append('<span class="chart" data-percent="'+ $('.chart-holder').attr('data-count') +'"></span>');

And after that:

$('.chart').easyPieChart({ .... });

It can be on click event or everything you want.

That's it. Simple solution.