By adding charts to your views, you can provide a rich experience for your users and the ability for them to receive an overall view of important information about the system.
There are a number of options when it comes to adding charts and graphs to your project; some of the most popular charting components are as follows:
Google provides a rich charting API, which is powerful, easy to use, and free. They also provide an interactive gallery that showcases their many varieties of available charts.
In order to add Google Charts to the Index view of the Home controller, complete the following steps:
Index.cshtml
file inside the ViewsHome
folder.<div class="row"> <div class="col-md-6 col-sm-6" id="piechart"> </div> </div>
@section scripts{ <script type="text/javascript" src="https://www.gstatic.com/charts /loader.js"></script> <script src="~/js/home.index.js"></script> }
home.index.js
to the wwwrootjs
folder.home.index.js
file, which will load the Google Charts API as well as specify the call-back function's name to run as soon as the API is loaded:google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(generateChart);
generateChart
inside the file:function generateChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Products'); data.addColumn('number', 'Sales'); data.addRows([ ['Tofu', 30], ['Chai', 10], ['Chocolade', 20], ['Ipoh Coffee', 40] ]); var options = { 'title': 'Quarterly Sales', 'width': 600, 'height': 300, is3D: true, colors: ['#d9534f', '#f0ad4e', '#5bc0de', '#5cb85c'] }; var chart = new google.visualization.PieChart($('#piechart')[0]); chart.draw(data, options); }
The code in the generateChart
function creates a new DataTable
class, which represents a two-dimensional table of values and adds two columns called Products
and Sales
to it by calling the addColumn
method. Four rows of data, containing a product name and total number of products sold, are added to the DataTable
class, using the addRows
method.
Next, a new object called options is declared, which contains the options for the Google chart. In these options the colors for the title, size dimensions, and colors for the chart are specified. Setting the is3D
option to true will generate the chart with a 3D effect.
A new pie chart is declared and its container element, which in this case is a <div>
element with an id
of piechart
, is set. Finally, the chart is drawn by calling the draw
method.
When running the project, the view should look similar to the following image:
In the previous example, the data used for the pie chart was declared inside the JavaScript file. This approach is fine for static data, but in most scenarios you would want to read the data that is used to generate the charts from a data source such as a database.
In order to accomplish this, complete the following steps:
HomeController.cs
file located in the Controllers
folder.SalesPerSalesPerson
that will return a JsonResult, as follows:[HttpPost] public JsonResult SalesPerSalesPerson() { List<object> data = new List<object>(); data.Add(new string[] { "Product", "Sales" }); data.Add(new object[] { "Robert King",530}); data.Add(new object[] { "Nancy Davolio", 1012 }); data.Add(new object[] { "Laura Callahan", 810 }); data.Add(new object[] { "Janet Leverling", 738 }); return Json(data); }
SalesPerSalesPerson
method, a new List
object is declared. The axis names are added as a string
array, as well as the data for each sales person. This information could also have been read from a database.Index.cshtml
file in the ViewsHome
folder and add the following HTML/Razor mark-up to the file:<div class="col-md-6 col-sm-6" id="barchart" data-dataurl="@Url.Action("SalesPerSalesPerson","Home")" </div>
<div>
elements' data-dataurl
attribute will be used in order to pass the URL of the action that will return the data for the chart to the JavaScript function.home.index.js
file and add the barChart
JavaScript function:function barChart() { var barChart = $('#barchart'); var dataUrl = barChart.data('dataurl'); $.post(dataUrl, function (d) { var data = google.visualization.arrayToDataTable(d); var chart = new google.visualization.BarChart(barChart[0]); var options = { 'title': 'Sales per Representative', 'width': 600, 'height': 300 }; chart.draw(data,options); }); }
generateChart
function that will act as the callback function for the Google Chart API:function generateChart() { pieChart(); barChart(); }
With the required code in place, you can run your project and the resulting view should contain a pie as well as a bar chart, as displayed in the following image:
52.15.245.1