This is a migrated thread and some comments may be shown as answers.

Donut chart with curved series name?

2 Answers 254 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Jay asked on 16 Dec 2020, 02:12 PM

I know the original thread got moved to the Feedback Portal, but just in case someone else is looking for a way to do this until it is provided by kendo. When the thread got moved to the portal, this was added: Note: DOM manipulation over SVG elements is not a great approach, and I would not recommend it, unless it is absolutely unavoidable. Unfortunately, there is nothing more reasonable that can be done instead.

Here is a dojo and here is the code:

<!DOCTYPE html>

<html>

<head>

<base href="https://demos.telerik.com/kendo-ui/donut-charts/index">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title>Donut chart with curved series name</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />

<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content wide">

<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>

</div>

<script>

function createChart() {

var center;

var caption1;

var radius1;

var caption2;

var radius2;

$("#chart").kendoChart({

title: {

position: "bottom",

text: "Share of Internet Population Growth"

},

legend: {

visible: false

},

chartArea: {

background: ""

},

seriesDefaults: {

type: "donut",

startAngle: 150

},

series: [{

name: "Population Growth 2011",

visual: function (e) {

// Obtain parameters for the segments

// Will run many times, but that's not an issue

center = e.center;

radius1 = e.radius;

caption1 = e.series.name;

// Create default visual

return e.createVisual();

},

data: [{

category: "Asia",

value: 30.8,

color: "#9de219"

},{

category: "Europe",

value: 21.1,

color: "#90cc38"

},{

category: "Latin America",

value: 16.3,

color: "#068c35"

},{

category: "Africa",

value: 17.6,

color: "#006634"

},{

category: "Middle East",

value: 9.2,

color: "#004d38"

},{

category: "North America",

value: 4.6,

color: "#033939"

}]

}, {

name: "spacer1",

data: []

}, {

name: "Population Growth 2012",

visual: function (e) {

// Obtain parameters for the segments

// Will run many times, but that's not an issue

radius2 = e.radius;

caption2 = e.series.name;

// Create default visual

return e.createVisual();

},

data: [{

category: "Asia",

value: 53.8,

color: "#9de219"

},{

category: "Europe",

value: 16.1,

color: "#90cc38"

},{

category: "Latin America",

value: 11.3,

color: "#068c35"

},{

category: "Africa",

value: 9.6,

color: "#006634"

},{

category: "Middle East",

value: 5.2,

color: "#004d38"

},{

category: "North America",

value: 3.6,

color: "#033939"

}],

labels: {

visible: false,

background: "transparent",

position: "outsideEnd",

template: "#= category #: \n #= value#%"

}

}],

tooltip: {

visible: true,

template: "#= category # (#= series.name #): #= value #%"

},

render: function (e) {

var chartsvg = $("#example svg");

var svg = chartsvg[0];

// +5 so not resting right on the donut

addCaption(svg, caption1, center, radius1 + 5, false);

addCaption(svg, caption2, center, radius2 + 5, true);

}

});

}

function addCaption(svg, caption, center, radius, top) {

var draw = kendo.drawing;

var text = new draw.Text(caption, [0, 0], {});

var bbox = text.bbox();

// bump the radius to outside for bottom caption

var rr = top ? radius : radius + bbox.size.height / 2 + 2;

var captionsvg = getPath(center, rr, top);

// Unique id

var id = caption.replace(/\s+/g, '') + Math.random();

var captionpath = "<path id='" + id + "' fill='transparent' d='" + captionsvg + "' />";

var captiontext = "<text style='text-anchor: middle;' width='" + bbox.size.width + "'><textpath startOffset='25%' xlink:href='#" + id + "'>" + caption + "</textpath></text>";

var captionsvg = captionpath + captiontext;

svg.appendChild(parseSVG(captionsvg));

}

// From https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element

function parseSVG(s) {

var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');

div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';

var frag= document.createDocumentFragment();

while (div.firstChild.firstChild)

frag.appendChild(div.firstChild.firstChild);

return frag;

}

// From https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path

function getPath(center, radius, top) {

var cx = center.x;

var cy = center.y;

var rx = radius;

var ry = radius;

var sweep = top ? "1 " : "0 ";

var path = "M" + (cx - rx).toString() + "," + cy.toString();

path += " a" + rx.toString() + "," + ry.toString() + " 0 0," + sweep + (2 * rx).toString() + ",0";

path += " a" + rx.toString() + "," + ry.toString() + " 0 " + largeArcSweep + (-2 * rx).toString() + ",0";

return path;

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

</body>

</html>

Donut chart with curved series name?

2 Answers, 1 is accepted