Display data in chart using jQuery and
Highcharts – Other(Pie, 3D, Donut) Charts
Chart is also called as graph and it is graphical representation of data. The data is represented in the form of bar in bar chart, line in line chart and slices using pie chart. Chart can usually be read more quickly than the row data. Chart is the greatest and simplest way to express data to user or management persons. Charts are very common in all type of business requirement. If you want to develop dashboard then charting is absolutely necessary for your users especially for management.
In my previous post
Display data in chartusing JavaScript Highcharts we discussed basic elements of charts, JavaScript libraries required, model design and displaying dynamic data using jQuery.Ajax in MVC. In this post article I will show you the another useful charts like Pie and donut charts. I will also show you the how
Highcharts are useful to implement drilldown and 3D charting functionality.
Let’s start with Pie Chart.
Pie Chart
Step 1 : Lets modify the Chart and Series model as per the required properties to bind pie chart.
usingSystem.Collections.Generic;
namespaceHighchart.WebUI.Models
{
public class PieChartSeriesModel<T>
{
public string name { get; set; }
public T y { get; set; }
public bool sliced { get; set; }
public bool selected { get; set; }
}
public class PieChartModel<T>
{
public string Title { get; set; }
public string Tooltip { get; set; }
public string SeriesName { get; set; }
public ICollection<PieChartSeriesModel<T>> Series { get; set; }
}
}
Step 2: Create action method which returns the json result. This json used to bind basic properties and series to Pie Chart.
public JsonResult PieChart()
{
var pieChartModel = new PieChartModel<double>
{
Title = “Browser market shares January, 2015 to May, 2015”,
Tooltip = “{series.name}: <b>{point.percentage:.1f}%</b>”,
SeriesName = “Browser:”,
Series = new List<PieChartSeriesModel<double>> {
new PieChartSeriesModel<double>{name = “Microsoft Internet Explorer”, y= 56.33},
new PieChartSeriesModel<double>{name = “Chrome”, y= 24.03, selected=true, sliced=true},
new PieChartSeriesModel<double>{name = “Firefox”, y= 10.38},
new PieChartSeriesModel<double>{name = “Safari”, y= 4.77},
new PieChartSeriesModel<double>{name = “Opera”, y= 0.91},
new PieChartSeriesModel<double>{name = “Proprietary or Undetectable”, y= 0.2},
}
};
return Json(pieChartModel, JsonRequestBehavior.AllowGet);
}
Step 3: Create view container to display Pie chart.
@{
ViewBag.Title = “Home Page”;
}
@Scripts.Render(“~/bundles/demoChart”)
<table>
<tr>
<td>
<div id=”containerPieChart” style=”min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto; border:1px solid black;“></div>
</td>
</tr>
</table>
Step 4: Create JavaScript to bind json result to pie chart.
$(document).ready(function () {
drawPieChartAjax();
});
function drawPieChartAjax() {
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8”,
url: “Chart/PieChart”,
data: “{}”,
dataType: “json”,
success: function (Result) {
drawPieChart(Result);
},
error: function(Result) {
alert(“Error”);
}
});
}
function drawPieChart(data) {
$(‘#containerPieChart’).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: ‘pie’
},
title: {
text: data.Title
},
tooltip: {
pointFormat: data.Tooltip
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: data.SeriesName,
colorByPoint: true,
data: data.Series
}]
});
}
Step 5: Run the application it will display Pie Chart as below. Here Chrome is selected as the default slice.
Drilldown Bar Chart
Step 1 : Lets modify the Chart and Series model as per the required properties to bind drilldown bar chart.
public class DrilldownBarChartModel<T>
{
public string Title { get; set; }
public string Subtitle { get; set; }
public string YAxisTitle { get; set; }
public string TooltipHeaderFormat { get; set; }
public string TooltipPointFormat { get; set; }
public DrilldownBarSeries<T> Series { get; set; }
public ICollection<DrilldownBarSeriesDrilldown<T>> Drilldown { get; set; }
}
public class DrilldownBarSeries<T>
{
public ICollection<DrilldownBarSeriesData<T>> data { get; set; }
}
public class DrilldownBarSeriesData<T>
{
public string name { get; set; }
public T y { get; set; }
public string drilldown { get; set; }
}
public class DrilldownBarSeriesDrilldown<T>
{
public string name { get; set; }
public string id { get; set; }
public ICollection<DrilldownBarSeriesData<T>> data { get; set; }
}
Step 2: Create action method which returns the json result. This json used to bind basic properties and series to drilldown bar chart.
public JsonResult DrilldownBarChart()
{
var drilldownBarChartModel = new DrilldownBarChartModel<double>
{
Title = “Browser market shares. January, 2015 to May, 2015”,
Subtitle = “Click the columns to view versions. Source: <a href=’http://netmarketshare.com’>netmarketshare.com</a>.”,
YAxisTitle = “Total percent market share”,
TooltipHeaderFormat = “<span style=’font-size:11px’>{series.name}</span><br>”,
TooltipPointFormat = “<span style=’color:{point.color}’>{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>”,
Series = new DrilldownBarSeries<double>
{
data = new List<DrilldownBarSeriesData<double>>
{
new DrilldownBarSeriesData<double>{name = “Microsoft Internet Explorer”, y= 56.33,drilldown = “Microsoft Internet Explorer”},
new DrilldownBarSeriesData<double>{name = “Chrome”,y= 24.03,drilldown = “Chrome”},
new DrilldownBarSeriesData<double>{name = “Firefox”,y= 10.38,drilldown = “Firefox”},
new DrilldownBarSeriesData<double>{name = “Safari”,y= 4.77,drilldown = “Safari”},
new DrilldownBarSeriesData<double>{name = “Opera”,y= 0.91,drilldown = “Opera”},
new DrilldownBarSeriesData<double>{name = “Proprietary or Undetectable”,y= 0.2,drilldown = string.Empty}
}
},
Drilldown = new List<DrilldownBarSeriesDrilldown<double>>
{
new DrilldownBarSeriesDrilldown<double>
{
name = “Microsoft Internet Explorer”,
id= “Microsoft Internet Explorer”,
data= new List<DrilldownBarSeriesData<double>> {
new DrilldownBarSeriesData<double>{name = “v11.0”, y=24.13},
new DrilldownBarSeriesData<double>{name = “v8.0”, y=17.2},
new DrilldownBarSeriesData<double>{name = “v9.0”,y= 8.11},
new DrilldownBarSeriesData<double>{name = “v10.0”,y= 5.33},
new DrilldownBarSeriesData<double>{name = “v6.0”, y=1.06},
new DrilldownBarSeriesData<double>{name = “v7.0”,y= 0.5}
}
},
new DrilldownBarSeriesDrilldown<double>
{
name = “Chrome”,
id= “Chrome”,
data= new List<DrilldownBarSeriesData<double>> {
new DrilldownBarSeriesData<double>{name = “v40.0”,y= 5},
new DrilldownBarSeriesData<double>{name = “v41.0”,y= 4.32},
new DrilldownBarSeriesData<double>{name = “v42.0”,y= 3.68},
new DrilldownBarSeriesData<double>{name = “v39.0”,y= 2.96},
new DrilldownBarSeriesData<double>{name = “v36.0”,y= 2.53},
new DrilldownBarSeriesData<double>{name = “v43.0.0”, y=1.45},
new DrilldownBarSeriesData<double>{name = “v31.0”, y=1.24},
new DrilldownBarSeriesData<double>{name = “v35.0”,y= 0.85},
new DrilldownBarSeriesData<double>{name = “v38.0”, y=0.6},
new DrilldownBarSeriesData<double>{name = “v32.0”,y= 0.55},
new DrilldownBarSeriesData<double>{name = “v37.0”,y= 0.38},
new DrilldownBarSeriesData<double>{name = “v33.0”,y= 0.19},
new DrilldownBarSeriesData<double>{name = “v34.0”,y= 0.14},
new DrilldownBarSeriesData<double>{name = “v30.0”,y= 0.14}
}
},
new DrilldownBarSeriesDrilldown<double>
{
name = “Firefox”,
id= “Firefox”,
data= new List<DrilldownBarSeriesData<double>> {
new DrilldownBarSeriesData<double>{name = “v35”,y= 2.76},
new DrilldownBarSeriesData<double> {name = “v36”, y=2.32},
new DrilldownBarSeriesData<double>{name =“v37”,y= 2.31},
new DrilldownBarSeriesData<double>{name = “v34”,y= 1.27},
new DrilldownBarSeriesData<double> {name = “v38”, y=1.02},
new DrilldownBarSeriesData<double>{name = “v31”,y= 0.33},
new DrilldownBarSeriesData<double>{name = “v33”,y= 0.22},
new DrilldownBarSeriesData<double>{name = “v32”,y= 0.15}
}
},
new DrilldownBarSeriesDrilldown<double>
{
name = “Safari”,
id= “Safari”,
data= new List<DrilldownBarSeriesData<double>> {
new DrilldownBarSeriesData<double> {name = “v8.0”,y= 2.56},
new DrilldownBarSeriesData<double>{name = “v7.1”, y=0.77},
new DrilldownBarSeriesData<double>{name =“v5.1”,y=0.42},
new DrilldownBarSeriesData<double>{name = “v5.0”,y= 0.3},
new DrilldownBarSeriesData<double>{name = “v6.1”,y= 0.29},
new DrilldownBarSeriesData<double> {name = “v7.0”,y= 0.26},
new DrilldownBarSeriesData<double>{name = “v6.2”,y= 0.17}
}
},
new DrilldownBarSeriesDrilldown<double>
{
name = “Opera”,
id= “Opera”,
data= new List<DrilldownBarSeriesData<double>> {
new DrilldownBarSeriesData<double>{name = “v12.x”,y= 0.34},
new DrilldownBarSeriesData<double>{name = “v28”,y= 0.24},
new DrilldownBarSeriesData<double>{name = “v27”,y= 0.17},
new DrilldownBarSeriesData<double>{name = “v29”,y= 0.16}
}
},
new DrilldownBarSeriesDrilldown<double>
{
name = “Proprietary or Undetectable”,
id= “Proprietary or Undetectable”,
data= null
}
}
};
return Json(drilldownBarChartModel, JsonRequestBehavior.AllowGet);
}
Step 3: Create view container to display drilldown bar chart.
@{
ViewBag.Title = “Home Page”;
}
@Scripts.Render(“~/bundles/demoChart”)
<table>
<tr>
<td>
<div id=”containerDrilldownBarChart” style=”min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto; border:1px solid black;“></div>
</td>
</tr>
</table>
Step 4: Create JavaScript to bind json result to drilldown bar chart.
$(document).ready(function () {
drawDrilldownBarChartAjax();
});
functiondrawDrilldownBarChartAjax() {
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8”,
url: “Chart/DrilldownBarChart”,
data: “{}”,
dataType: “json”,
success: function (jsonResult) {
drawDrilldownBarChart(jsonResult);
},
error: function(jsonResult) {
alert(“Error”);
}
});
}
functiondrawDrilldownBarChart(jsonResult) {
$(‘#containerDrilldownBarChart’).highcharts({
chart: {
type: ‘column’
},
title: {
text: jsonResult.Title
},
subtitle: {
text: jsonResult.Subtitle
},
xAxis: {
type: ‘category’
},
yAxis: {
title: {
text: jsonResult.YAxisTitle
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: ‘{point.y:.1f}%’
}
}
},
tooltip: {
headerFormat: jsonResult.TooltipHeaderFormat,
pointFormat: jsonResult.TooltipPointFormat
},
series: [{
name: ‘Brands’,
colorByPoint: true,
data: jsonResult.Series.data
}]
,drilldown: {
series: jsonResult.Drilldown
}
});
}
Step 5: Run the application it will display Drilldown Bar Chart as below.
Once you click on any bar it will show you further drilldown with Back button on it, shown as below
Drilldown Pie Chart
Step 1 : Create model required
In this case I will use same models as discussed in above example i.e. Drilldown Bar Chart
Step 2: Create action method which returns the json result. This json used to bind basic properties and series to drilldown bar chart.
Here just renaming the action method with DrilldownPieChart () and copy and pasting what code I written for DrilldownBarChart() action method.
Step 3: Create view container to display drilldown pie chart.
Replace container name with containerDrilldownPieChart
Step 4: Create JavaScript to bind json result to drilldown pie chart. You can observe that the code for both bar and pie chart is same, only difference is “type” is “pie” J
$(document).ready(function () {
drawDrilldownPieChartAjax();
});
functiondrawDrilldownPieChartAjax() {
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8”,
url: “Chart/DrilldownPieChart”,
data: “{}”,
dataType: “json”,
success: function (jsonResult) {
drawDrilldownPieChart(jsonResult);
},
error: function(Result) {
alert(“Error”);
}
});
}
functiondrawDrilldownPieChart(jsonResult) {
$(‘#containerDrilldownPieChart’).highcharts({
chart: {
type: ‘pie’
},
title: {
text: jsonResult.Title
},
subtitle: {
text: jsonResult.Subtitle
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: ‘{point.name}: {point.y:.1f}%’
}
}
},
tooltip: {
headerFormat: jsonResult.TooltipHeaderFormat,
pointFormat: jsonResult.TooltipPointFormat
},
series: [{
name: ‘Brands’,
colorByPoint: true,
data: jsonResult.Series.data
}],
drilldown: {
series: jsonResult.Drilldown
}
});
}
Step 5: Run the application it will display Drilldown Pie Chart as below.
Once you click on any bar it will show you further drilldown with Back button on it, shown as below
3-D Donut Chart
Step 1 : Lets modify the Chart and Series model as per the required properties to bind 2D donut chart.
public class PlotOptions3D
{
public bool Enabled { get; set; }
public int Alpha { get; set; }
public int Beta { get; set; }
public int InnerSize { get; set; }
public int Depth { get; set; }
public int ViewDistance { get; set; }
public int MarginTop { get; set; }
public int MarginRight { get; set; }
}
public class DonutPieSeriesData<T>
{
public string name { get; set; }
public T y { get; set; }
}
public class DonutPieChartSeriesModel<T>
{
public string Name { get; set; }
public ICollection<DonutPieSeriesData<T>> Data { get; set; }
}
public class DonutPieChartModel<T>
{
public string Title { get; set; }
public string Subtitle { get; set; }
public PlotOptions3D PlotOptions { get; set; }
public DonutPieChartSeriesModel<T> Series { get; set; }
}
Step 2: Create action method which returns the json result. This json used to bind basic properties and series to donut chart.
public JsonResult DonutChart3D()
{
var donutChart3DModel = new DonutPieChartModel<int>
{
Title = “Contents of Highsoft’s weekly fruit delivery”,
Subtitle = “3D donut in Highcharts”,
PlotOptions = new PlotOptions3D
{
Alpha = 45,
Enabled = true,
InnerSize = 100,
Depth = 45
},
Series = new DonutPieChartSeriesModel<int>
{
Name = “Delivered amount”,
Data = new List<DonutPieSeriesData<int>>
{
new DonutPieSeriesData<int>{name = “Bananas”, y= 8},
new DonutPieSeriesData<int>{name = “Kiwi”, y= 3},
new DonutPieSeriesData<int>{name = “Mixed nuts”, y= 1},
new DonutPieSeriesData<int>{name = “Oranges”, y= 6},
new DonutPieSeriesData<int>{name = “Apples”, y= 8},
new DonutPieSeriesData<int>{name = “Pears”, y= 4},
new DonutPieSeriesData<int>{name = “Clementines”, y=4 },
new DonutPieSeriesData<int>{name = “Reddish (bag)”, y= 1},
new DonutPieSeriesData<int>{name = “Grapes (bunch)”, y= 1}
}
}
};
return Json(donutChart3DModel, JsonRequestBehavior.AllowGet);
}
Step 3: Create view container to display donut chart.
@{
ViewBag.Title = “Home Page”;
}
@Scripts.Render(“~/bundles/demoChart”)
<table>
<tr>
<td>
<div id=”container3dDonutPieChart” style=”min-width: 600px; height: 400px; margin: 0 auto; border:1px solid black;“></div>
</td>
</tr>
</table>
Step 4: Create JavaScript to bind json result to drilldown bar chart.
$(document).ready(function () {
draw3D_DonutChartAjax();
});
functiondraw3D_DonutChartAjax() {
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8”,
url: “Chart/DonutChart3D”,
data: “{}”,
dataType: “json”,
success: function (jsonResult) {
draw3D_DonutChart(jsonResult);
},
error: function(jsonResult) {
alert(“Error”);
}
});
}
functiondraw3D_DonutChart(jsonResult) {
$(‘#container3dDonutPieChart’).highcharts({
chart: {
type: ‘pie’,
options3d: {
enabled: jsonResult.PlotOptions.Enabled,
alpha: jsonResult.PlotOptions.Alpha
}
},
title: {
text: jsonResult.Title
},
subtitle: {
text: jsonResult.Subtitle
},
plotOptions: {
pie: {
innerSize: jsonResult.PlotOptions.InnerSize,
depth: jsonResult.PlotOptions.Depth
}
},
series: [{
name: jsonResult.Series.Name,
data: jsonResult.Series.Data
}]
});
}
Step 5: Run the application it will display 3D Donut Chart as below.
3-D Bar Chart
Step 1 : Lets modify the Chart and Series model as per the required properties to bind drilldown bar chart.
Step 2: Create action method which returns the json result. This json used to bind basic properties and series to 3D bar chart.
public class DonutBarChartSeriesModel<T>
{
public string name { get; set; }
public T[] data { get; set; }
public string stack { get; set; }
}
public class DonutBarChartModel<T>
{
public string Title { get; set; }
public PlotOptions3D PlotOptions { get; set; }
public string[] XAxisCategories { get; set; }
public string YAxisTitle { get; set; }
public string TooltipHeaderFormat { get; set; }
public string TooltipPointFormat { get; set; }
public ICollection<DonutBarChartSeriesModel<T>> Series { get; set; }
}
Step 3: Create view container to display 3D bar chart.
@{
ViewBag.Title = “Home Page”;
}
@Scripts.Render(“~/bundles/demoChart”)
<table>
<tr>
<td>
<div id=”container3dDonutBarChart” style=”min-width: 600px; height: 400px; margin: 0 auto; border:1px solid black;“></div>
</td>
</tr>
</table>
Step 4: Create JavaScript to bind json result to drilldown bar chart.
$(document).ready(function () {
draw3D_BarChartAjax();
});
functiondraw3D_BarChartAjax() {
$.ajax({
type: “POST”,
contentType: “application/json; charset=utf-8”,
url: “Chart/DonutBarChart3D”,
data: “{}”,
dataType: “json”,
success: function (jsonResult) {
draw3D_BarChart(jsonResult);
},
error: function(jsonResult) {
alert(“Error”);
}
});
}
functiondraw3D_BarChart(jsonResult) {
$(‘#container3dDonutBarChart’).highcharts({
chart: {
type: ‘column’,
options3d: {
enabled: jsonResult.PlotOptions.Enabled,
alpha: jsonResult.PlotOptions.Alpha,
beta: jsonResult.PlotOptions.Beta,
viewDistance: jsonResult.PlotOptions.ViewDistance,
depth: jsonResult.PlotOptions.Depth
},
marginTop: jsonResult.PlotOptions.MarginTop,
marginRight: jsonResult.PlotOptions.MarginRight
},
title: {
text: jsonResult.Title
},
xAxis: {
categories: jsonResult.XAxisCategories
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: jsonResult.YAxisTitle
}
},
tooltip: {
headerFormat: jsonResult.TooltipHeaderFormat,
pointFormat: jsonResult.TooltipPointFormat
},
plotOptions: {
column: {
stacking: ‘normal’,
depth: jsonResult.PlotOptions.Depth
}
},
series: jsonResult.Series
});
}
Step 5: Run the application it will display 2D Bar Chart as below.
Conclusion:
In this article we learned how Highcharts are useful to display data in drilldown and 3D charts. We learned to create model objects depending upon the chart selected. I would recommend you to use these models and modify the code as your wish to achieve desired output. You can use same functionality not only using MVC but ASP.NET, and Java also.