Code Samples: September 2021

Saturday, September 18, 2021

Donut Kendo Chart with 0% Example

This article is an example of a donut Kendo Chart Component. The framework used is Kendo UI for jQuery. Strangely enough, a 0% value isn't displayed by a donut Kendo Chart but is displayed by a pie Kendo Chart. In this example, we will make the donut Kendo Chart display the 0% value.

Before we go straight to the solution, let us see the problem first. Set the "North America" value to 0, value: 0 and make sure the type is "donut", type: "donut".

We should have something like below:

Donut Kendo Chart Missing 0%

Now, keep everything the same and change the type to pie, type: "pie" and we should have something like below:

Pie Kendo Chart Showing 0%

See the difference? On a pie Kendo Chart, 0% is shown. On a donut Kendo Chart, 0% isn't shown. Even though they have the same values. Don't ask me why because I don't know the reason behind it. Fortunately, we can trick the Kendo Chart into showing the 0% value.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

	<!-- https://jpllosa.blogspot.com/ -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Kendo Donut Chart With 0% Example</title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

	<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
	</head>
	<body>
	<div id="chart"></div>
	<script>
	$(document).ready(function() {
	$("#chart").kendoChart({
	theme: 'material',
	title: {
	position: "bottom",
	text: "Share of Internet Population Growth"
	},
	legend: {
	visible: true
	},
	seriesDefaults: {
	type: "donut",
	// type: "pie", // kendo-pie-chart-showing-0-percent.png
	startAngle: 150
	},
	series: [{
	name: "2012",
	data: [{
	category: "Asia",
	value: 53.8,
	},{
	category: "Europe",
	value: 16.1,
	},{
	category: "Latin America",
	value: 11.3,
	},{
	category: "Africa",
	value: 9.6,
	},{
	category: "Middle East",
	value: 5.2,
	},{
	category: "North America",
	// value: 0, // kendo-donut-chart-missing-0-percent.png
	value: 0.001,
	}],
	labels: {
	visible: true,
	background: "transparent",
	position: "outsideEnd",
	template: "#= category #: \n #= kendo.toString(value, '0.0') + '%'#",
	},
	}],
	tooltip: {
	visible: true,
	template: "#= value!=0.001 ? value : '0' #",
	}
	});
	});
	</script>
	</body>
	</html>

view raw kendo-donut-chart-show-0-percent.html hosted with ❤ by GitHub

The trick is to change the value to something way below zero. In our example it is 0.001. So we set "North America" to value: 0.001. And then handle the tool tip and label by adding some template logic. Don't forget to set type: "donut". This is how it looks now:

Donut Kendo Chart Showing 0%

There you have it. A quick and simple example of a Kendo Donut Chart with 0%.

Friday, September 10, 2021

Responsive Kendo PivotGrid Example

This article is an example of a responsive Kendo PivtoGrid Component. The framework used is Kendo UI for jQuery. Some Kendo widgets do not automatically resize and PivotGrid is one them. In this example, we will make the Kendo PivotGrid fit the browser viewport. In other words, we will make sure that the browser will not provide a vertical scroll bar. Instead, our Kendo PivotGrid will provide the scroll bars. Another additional requirement is that the user should not be able to change the columns, rows and measures of our Kendo PivotGrid.

Firstly, our data can be downloaded here - products.js. We then save it in the same directory as our HTML file.

To address the additional requirement, on dataBound we disable the pivot grid settings and remove the delete and close icons.

The meat of our responsiveness happens in resizeContent. Here we get the height of our viewport and our desired Kendo PivotGrid height. We then set the pivot grid wrapper element to the desired height. Next, change the pivot grid object's height via setOptions. Finally, call the resize method.

The thing that drives the resizeContent function is my new favorite API for the week. The ResizeObserver Web API. Our ResizeObserver object observes changes to the size of the pivot grid element. When the dimensions change, it calls resizeContent.

	<!-- https://jpllosa.blogspot.com/ -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Responsive Kendo PivotGrid</title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

	<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
	</head>
	<body>
	<h3 style="text-align: center"><a href="https://jpllosa.blogspot.com" target="_blank">Code Samples</a></h3>
	<div id="pivotgrid"></div>
	<script src="products.js"></script>
	<script>
	$(document).ready(function() {
	kendo.culture('en-GB');
	var pivotgrid = $("#pivotgrid").kendoPivotGrid({
	dataSource: {
	data: products,
	schema: {
	model: {
	fields: {
	ProductName: { type: "string" },
	UnitPrice: { type: "number" },
	UnitsInStock: { type: "number" },
	Discontinued: { type: "boolean" },
	CategoryName: { field: "Category.CategoryName" }
	}
	},
	cube: {
	dimensions: {
	ProductName: { caption: "All Products" },
	CategoryName: { caption: "All Categories" },
	Discontinued: { caption: "Discontinued" }
	},
	measures: {
	"Sum": { field: "UnitPrice", format: "{0:c}", aggregate: "sum" },
	}
	}
	},
	columns: [{ name: "CategoryName", expand: true }, { name: "Discontinued" }],
	rows: [{ name: "ProductName", expand: true }],
	measures: ["Sum"]
	},
	dataBound: function(e) {
	var self = e.sender;
	self.wrapper.find('.k-pivot-setting').each(function() {
	var $parent = $(this);
	$parent.addClass('k-state-disabled');
	$parent.find('.k-icon.k-i-close.k-setting-delete')
	.each(function() {
	$child = $(this);
	$child.removeClass('k-icon k-i-close k-setting-delete');
	});
	});
	},
	}).data("kendoPivotGrid");

	function resizeContent() {
	var viewportHeight = window.innerHeight;
	var height = viewportHeight - $("h3").outerHeight(true)
	- 18;
	if (pivotgrid) {
	pivotgrid.wrapper.css("height", height + "px");
	pivotgrid.setOptions({ height: height });
	pivotgrid.resize();
	}
	}

	new ResizeObserver(function() {
	resizeContent();
	}).observe(pivotgrid.wrapper[0]);
	});
	</script>
	</body>
	</html>