Topic: Minimalist chart properies and functions
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));
}
});
});
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
MDBootstrap staff pro premium priority commented 5 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.