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.
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.