This article explains about Bar Chart. We are going to create a simple Bar Chart using char.js library in jQuery. Bar Chart can be used to show data or compare multiple data sets.
Code Snippet
Code Behind
Finally, we are done with coding. You can bind a real dataset from the code behind and see the output
Chart.js: A Simple chart library for developers developed by Nick Downie. It uses HTML5 canvas element and supports all the browsers.
Code Snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <%@ Page Language="C#" %> | |
| <!DOCTYPE html> | |
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head runat="server"> | |
| <meta charset="utf-8" /> | |
| <title>Bar Chart</title> | |
| <script src="Scripts/jquery-2.1.4.js"></script> | |
| <script src="Scripts/Chart.js"></script> | |
| <style type="text/css"> | |
| #canvas-holder { | |
| width: 30%; | |
| padding-left: 5px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| <script> | |
| window.onload = function () { | |
| $.ajax({ | |
| type: "POST", | |
| url: "BarChart.aspx/getLineChartData", | |
| data: "{}", | |
| contentType: "application/json; charset=utf-8", | |
| dataType: "json", | |
| success: function (msg) { | |
| var aData = msg.d; | |
| var aLabels = aData[0]; | |
| var aDatasets1 = aData[1]; | |
| var aDatasets2 = aData[2]; | |
| var barChartData = { | |
| labels: aLabels, | |
| datasets: [ | |
| { | |
| fillColor: 'rgb(42,128,185)', | |
| strokeColor: 'rgb(42,128,185)', | |
| data: aDatasets1 | |
| }, | |
| { | |
| fillColor: 'rgb(191,58,43)', | |
| strokeColor: 'rgb(191,58,43)', | |
| data: aDatasets2 | |
| } | |
| ] | |
| } | |
| var ctx = document.getElementById("bar-area").getContext("2d"); | |
| window.myBar = new Chart(ctx).Bar(barChartData, { responsive: true }); | |
| } | |
| }); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div id="canvas-holder"> | |
| <canvas id="bar-area" /> | |
| </div> | |
| </body> | |
| </html> |
Code Behind
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [WebMethod] | |
| public static List<object> getLineChartData() | |
| { | |
| List<string> labels = new List<string>(); | |
| labels.Add("Jan"); | |
| labels.Add("Feb"); | |
| labels.Add("Mar"); | |
| List<int> lst_dataItem_1 = new List<int>(); | |
| lst_dataItem_1.Add(145); | |
| lst_dataItem_1.Add(253); | |
| lst_dataItem_1.Add(358); | |
| List<int> lst_dataItem_2 = new List<int>(); | |
| lst_dataItem_2.Add(185); | |
| lst_dataItem_2.Add(365); | |
| lst_dataItem_2.Add(98); | |
| List<object> iData = new List<object>(); | |
| iData.Add(labels); | |
| iData.Add(lst_dataItem_1); | |
| iData.Add(lst_dataItem_2); | |
| return iData; | |
| } |
Finally, we are done with coding. You can bind a real dataset from the code behind and see the output
Happy Coding :)
Comments
Post a Comment