Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: What is the correct "setter" method of min-carts, how to change percent from script?

sundance free asked 5 years ago


Hi there!

How can I change value (percent) of min-charts? I tried different approaches, like

  var chart = document.getElementById("chart2");
  chart.value =  "10" ;

I tried different properties, like "value", "percent", "data-percent", etc., string or integer value (eg. 10 or "10").

Then I tried somekind of setter, like this

var chart = $('.min-chart#chart2').easyPieChart;
chart.set ('percent', '10');

What is the correct, working solution?

Thanks in advance!

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


MDBootstrap staff commented 5 years ago

Hi sundance,

Can you please show me the entire usage of your chart? Please create a snippet with your usage of the chart here: https://mdbootstrap.com/snippets/


sundance free commented 5 years ago

Hello Piotr, I created a snippet, please find here: https://mdbootstrap.com/snippets/jquery/sundance/1018099

Regards, István


MDBootstrap staff answered 5 years ago


Hi sundance,

I found a snippet with an example that may help you achieve your development goals.

Additionally, I created a snippet with similar solution.

If you need additional help I am here to help you.

Best Regards, Piotr


MDBootstrap staff answered 5 years ago


Hi, to work with the value that is passed to the chart you can simply assign it to other variable and do all the math you want. To get the number of decimals please use similar function:

var countDecimals = function (value) {
    if(Math.floor(value) === value) return 0;
    return value.toString().split(".")[1].length || 0; 
}

to count percent of the number:

yourValue * desiredPercent / 100 = percentOfYourValue desiredPercent = percentOfYourValue * 100/yourValue

Sadly we do not support units in this chart example. You can obviously rearrange your CSS and add other content to your ::after depending on your js logic.

If you need additional help I am here for you.

Best Regards, Piotr


sundance free answered 5 years ago


Hello Piotr,

I tried to improve christopherbirwin's solution ("Display a Value Instead of a Percent"), so there are some new issues additionaly to my original problem of setting 'percent' value.Now it is possible to display floating numbers with preset number of decimals, but I'd like to use number of decimals as new property, which is maybe changeable from JS.I'd like to use a 'range' or 'max' property to calculate real percent of displayed value.And finally it would be nice to use a 'unit' property, and using its value in CSS as

.min-chart .integer: after { content: .unit  }

Please find my modified snippet as an example.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: PC
  • Browser: Chrome
  • OS: Windows 7 Prof. 64-bit
  • Provided sample code: No
  • Provided link: No