Minimalist chart properies and functions

Topic: Minimalist chart properies and functions

sundance free asked 4 years ago

Hi!

Where can I find detailed decription of min-chart properties and functions?

I can change barColor, lineWidth and size, but what else?

What is the role of function parameters 'from' and 'to' of onStep function?

How can I "separate" displayed numerical value and percent? Let say 100% range equal to 200, let value equal 100, so I would like to display 50% (half circle) but 100 as text.

Are there min and/or max properties of min-chart? What kind of other scriptable properties of min-chart has?

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

$(function () {
  $('.min-chart#chart1').easyPieChart({
    barColor: 'green'; 
    lineWidth: 5,
    //size: 130,        
    onStep: function (from, to, value) {
      $(this.el).find('.percent').text(Math.round(value));
    }
  });
});

MDBootstrap staff commented 4 years ago

Created a snippet with an example for you. https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1077576 To achieve this kind of behaviour I edited a snippet for you. You can simply modify the value that will receive the text field.

Add comment

MDBootstrap staff answered 4 years ago

0 0 Best answer

Hi sundance,

Thank you for these questions. I searched though out our all documentation to find any information about easyPieChart but we have very little information about this component. This will be changed for sure.

For now, these are all available easyPieChart options you can use.

<pre class="prettyprint"><code>var EasyPieChart = function(el, opts) {
 var defaultOptions = {
 barColor: '#ef1e25',
 trackColor: '#f9f9f9',
 scaleColor: '#dfe0e0',
 scaleLength: 5,
 lineCap: 'round',
 lineWidth: 3,
 trackWidth: undefined,
 size: 110,
 rotate: 0,
 animate: {
 duration: 1000,
 enabled: true
 },
 easing: function (x, t, b, c, d) { 
 t = t / (d/2);
 if (t < 1) {
 return c / 2 * t * t + b;
 }
 return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 onStart: function(from, to) {
 return;
 },
 onStep: function(from, to, currentValue) {
 return;
 },
 onStop: function(from, to) {
 return;
 }
 };
</code></pre>

You can find this component code in your mdb.js by searching easyPieChart and try to analyze it yourself. I can assure you that we will prepare better documentation for this component in near future.

Best Regards, Piotr

Please insert min. 20 characters.

Hi sundance,

Thank you for these questions. I searched though out our all documentation to find any information about easyPieChart but we have very little information about this component. This will be changed for sure.

For now, these are all available easyPieChart options you can use.

var EasyPieChart = function(el, opts) {
    var defaultOptions = {
        barColor: '#ef1e25',
        trackColor: '#f9f9f9',
        scaleColor: '#dfe0e0',
        scaleLength: 5,
        lineCap: 'round',
        lineWidth: 3,
        trackWidth: undefined,
        size: 110,
        rotate: 0,
        animate: {
            duration: 1000,
            enabled: true
        },
        easing: function (x, t, b, c, d) { 
            t = t / (d/2);
            if (t < 1) {
                return c / 2 * t * t + b;
            }
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        onStart: function(from, to) {
            return;
        },
        onStep: function(from, to, currentValue) {
            return;
        },
        onStop: function(from, to) {
            return;
        }
    };

You can find this component code in your mdb.js by searching easyPieChart and try to analyze it yourself. I can assure you that we will prepare better documentation for this component in near future.

Best Regards, Piotr

Add comment

Write

Create snippet

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

sundance

207Support score
13Questions 14Answers 5Snippets