Demonstration of Teams Performance using Pie Chart

Rajnilari2015
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 479 red flag

Data Visualization is a very important aspect from the view point of an end user since it presents the visual representation of data. It brings clarity in communicating the information to the end users via the graphs, plots, tables, charts etc. It is through the application of proper and effective visualization that help users to analyze and reason about data and evidence which on the other hand brings more data accessibility, understandability and thereby usability leading to make proper strategic decision.

In this article, we will look into the Teams Performance using HighChart Chart's Pie Chart.


 Download source code for Demonstration of Teams Performance using Pie Chart

Introduction

Data Visualization is a very important aspect from the view point of an end user since it presents the visual representation of data. It brings clarity in communicating the information to the end users via the graphs, plots, tables, charts etc. It is through the application of proper and effective visualization that help users to analyze and reason about data and evidence which on the other hand brings more data accessibility, understand ability and thereby usability leading to make proper strategic decision.

In this article, we will look into the Teams Performance using HighChart Chart's Pie Chart.

Objective

Consider a scenario where say a team has played a total to say 60 games out of which they won 40 games, loss 15 and made 5 as draw.We will capture these facts and display the same using HighChart Chart's Pie Chart. The final output should be as under

Using the code

Let us first look into the code

<html>
<head>
  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  		
  	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>

<body>  			
<div id="container" ></div>
  <script>
		$('#container').highcharts({
		 
	chart: {
		plotBackgroundColor: "#7dffd5",
		plotBorderWidth: null,
		plotShadow: true
	},
	title: {
		text: 'Team Performance'
	},
	
	plotOptions: {
		pie: {
			dataLabels: 
			{								
				color: '#0000ff',
				connectorColor: '#bf8040'
			}
		}
	},
	series: [{
		type: 'pie',
		name: ' ',
		data: 	[
			  ['Win',   40],
			  ['Loss',   15],
			  ['Draw',   5]
			]		
			}]
  });//end highchart function	
</script>	  
</body>
</html>

Code Explanation

First we have created a div that will hold the chart. Then we have created the chart JSON that will provide the background color.In the next JSON which is the title, we have set the Title of the chart which is "Team Performance".In the next JSON which is plotOptions, we have provided the colors for the "datalables" and the "connectors" (please refer to the diagram for a better understanding).Next comes the series JSON. In this, we have supplied the chart type which is "Pie" and the data values like

	['Win',   40],
	['Loss',   15],
	['Draw',   5]

All these JSON structure we are binding to the div as under

$('#container').highcharts({

....................................
....................................

});//end highchart function

Conclusion

Hope this will be helpful. Thanks for reading the article. Zipped file attached.

Recommendation
Read Mathematical Expression Evaluation with NCalc after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)