How to create Pie chart using Kendo UI in PHP?

Some time we need to create charts for data representation. There are different type of charts available to represent the data like bar charts, line charts, pie charts etc.

Today, i am going to discuss Kendo UI pie chart with you and we will integrate this in PHP.

Kendo UI is powerful data visualization component which allows us to graphically represent the data. You can learn more here

But, i am going to explain you a basic example of Kendo Ui pie chart with PHP & SQL/MySQL database data. Yes, we will use dynamic data in this example.

So, to instantiate a Kendo UI chart, we need to specify an empty div with an id on the page and we will select this div with a jQuery selector and invoke the kendoChart() function.

Define a empty div with id “demo”.

Chart will fetch data from local or remote data source.

Below are the CSS dependencies –

    https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css
    https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css
    https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css

Add these CSS files to your html code in the head section.

Below are the JS dependencies –

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js

Include these JS dependencies in the footer section of the page.

So, now we will write the main JS function to instantiate Kendo UI pie chart. Data, can be static data or we can pull the data from the database to show in pie chart.

function createChart() {
    
    var data = [
            {
              "category": "windows",
              "value": "100",
              "color": "#0d34f6"
            },
             {
              "category": "Internet Explorer",
              "value": "100",
              "color": "#dddddd"
            },
          ];
	$("#demo).kendoChart({
        series: [{
            type: "pie",
            startAngle: 150,
            data: data
        }],
          title: {
            position: "bottom",
            text: "Operating System - Average % Usage",
            color: "#616161"
        },
            legend: {
            visible: false
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            labels: {
                visible: true,
                background: "transparent",
                template: "#= category #: \n #= value#%"
            }
        },
       
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

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

If we need to pull data from the database in PHP to integrate in above JavaScript function then we need t create a data json object like this. And put the data under Series data inside JS function.

var data = [
            {
              "category": "windows",
              "value": "100",
              "color": "#0d34f6"
            }
          ];

In PHP, for example we have array data from MySQL query in a variable then we need to create JSON object to integrate dynamic data in pie chart –

 	foreach ($Temp as $key => $value) {


 	   	$OS = $value[OS];
		$usage = $value[users];
		$percentage = number_format((($usage * 100) / $total));

		$color = ; // We need to write some code for this

		$OSArray[] = array('category' => $OS, 'value' => $percentage, 'color' => $color);
	}
    	$ops = json_encode($OSArray);

So, $ops can be used in JavaScript as json object as data.

In JS function use it like below –

var opsData = <?php echo $ops; ?>

and use opsData under Series like

		series: [{
            type: "pie",
            startAngle: 150,
            data: opsData
        }],

Hope this will help to understand. Please write in comment for any query or facing any issue.