Data setup for doughnut chart in good theme

Hi, i have been working with good
KeenThemes -https://preview.keenthemes.com/good/index.html


i would like to know about the configuration and data inserted in the graph.

As i have got the following code from your widget.js but i when i add the dynamic values the blue coloured in Expected earning graph fills up the full circle in doughnut chart. if i try to insert value as numbers instead of decimal.

var KTCardsWidget4 = {
init: function() {
! function() {
var e = document.getElementById("kt_card_widget_4_chart");
if (e) {
var t = {
size: e.getAttribute("data-kt-size") ? parseInt(e.getAttribute("data-kt-size")) : 70,
lineWidth: e.getAttribute("data-kt-line") ? parseInt(e.getAttribute("data-kt-line")) : 11,
rotate: e.getAttribute("data-kt-rotate") ? parseInt(e.getAttribute("data-kt-rotate")) : 145
},
a = document.createElement("canvas"),
o = document.createElement("span");
"undefined" != typeof G_vmlCanvasManager && G_vmlCanvasManager.initElement(a);
var r = a.getContext("2d");
a.width = a.height = t.size, e.appendChild(o), e.appendChild(a), r.translate(t.size / 2, t.size / 2), r.rotate((t.rotate / 180 - .5) * Math.PI);
var i = (t.size - t.lineWidth) / 2,
s = function(e, t, a) {
a = Math.min(Math.max(0, a || 1), 1), r.beginPath(), r.arc(0, 0, i, 0, 2 * Math.PI * a, !1), r.strokeStyle = e, r.lineCap = "round", r.lineWidth = t, r.stroke()
};
s("#E4E6EF", t.lineWidth, 1), s(KTUtil.getCssVariableValue("--bs-danger"), t.lineWidth, 100/150), s(KTUtil.getCssVariableValue("--bs-primary"), t.lineWidth, .5)
}
}()
}
};

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

Hi,

Could you please send the screenshot?

You can edit from the source file, instead of the generated file. Please check the source file here. src/js/widgets/cards/widget-4.js

Thanks

Deleted comment

Below i have attached the screen shot of chart and code.


drawCircle('#E4E6EF', options.lineWidth, document.getElementById('pendingcasesval').value / 100); // have added dynamic values here
drawCircle(KTUtil.getCssVariableValue('--bs-danger'), options.lineWidth, document.getElementById('rejectedcasesval').value / 150); // have added dynamic values here
drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, document.getElementById('approvedcasesval').value / 250); // have added dynamic values here


"use strict";

// Class definition
var KTCardsWidget4 = function () {
// Private methods
var initChart = function() {
var el = document.getElementById('kt_card_widget_4_chart');

if (!el) {
return;
}

var options = {
size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,
//percent: el.getAttribute('data-kt-percent') ,
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');

if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};

// Init
// drawCircle('#E4E6EF', options.lineWidth, 100 / 100);
// drawCircle(KTUtil.getCssVariableValue('--bs-danger'), options.lineWidth, 100 / 150);
// drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 250);

drawCircle('#E4E6EF', options.lineWidth, document.getElementById('pendingcasesval').value / 100); // have added dynamic values here
drawCircle(KTUtil.getCssVariableValue('--bs-danger'), options.lineWidth, document.getElementById('rejectedcasesval').value / 150); // have added dynamic values here
drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, document.getElementById('approvedcasesval').value / 250); // have added dynamic values here
}

// Public methods
return {
init: function () {
initChart();
}
}
}();

// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTCardsWidget4;
}

// On document ready
KTUtil.onDOMContentLoaded(function() {
KTCardsWidget4.init();
});
}

iMAGE LINK -- https://www.awesomescreenshot.com/image/24083780?key=e73fb421488f6bc57dea96a1234a8ffd

hi

Faizal
can you kindly check the issue

Hi,

The value for the 2nd param of function drawCircle() needs to be in percentage value. Eg. 10%, you have to convert it 10/100 = 0.1

Most high percentage, need to draw first. Please try to move drawCircle() function for "approvedcasesval" before "rejectedcasesval".

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(