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.


MDBootstrap staff answered 4 years ago


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



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

  • User: 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