نمودار گوگل

گوگل برای اجرای نمودار ها API را فراهم کرده است (نمودار گوگل) که میتوانید از آن استفاده کنید.این  ابزار نمودار گوگل خیلی روان و مناسب برای استفاده می باشد.

Google Chart API ، نمودارهای زیادی جهت ارائه داده ها در اپلیکیشن فراهم کرده است.

  1. Geo Chart
  2. Column Chart
  3. Bar Chart
  4. Line Chart
  5. Pie Chart
  6. Area Chart

خب، یک اپلیکیشن ASP.NET MVC ایجاد می کنیم و داده ها را از پایگاه داده فراخوانی میکنیم و در اپلیکیشن از Google Chart API جهت نمایش دادن داده ها استفاده می کنیم. با بخش های زیر پیش می رویم :

  1. Getting Started (شروع کردن)
  2. Perform Database Operation (انجام عملیات پایگاه داده)
  3. Creating Library (ایجاد کتابخانه)
  4. Represent Data (نمایش اطلاعات)

Getting Started              

در این بخش یک اپلیکیشن MVC در ویژوال استادیو ۲۰۱۳ ایجاد می کنیم، به صورت زیر:

قدم اول: ویژوال استادیو ۲۰۱۳ را باز کنید و روی New Project کلیک کنید.

شکل ۱: صفحه ابتدایی VS 2013

قدم دوم: تب (tab) Web را از پنجره سمت چپ انتخاب کنید و ASP.NET Web Application را انتخاب کنید.

شکل ۲: ایجاد وب اپلیکیشن VS 2013

قدم سوم: یک قالب پروژه MVC از Wizard ASP.Net انتخاب کنید و یک اپ MVC ایجاد کنید.

شکل ۳: قالب پروژه MVC

اپلیکیشن MVC شما ساخته می شود و بعد از تغییراتی در صفحه پیش فرض اپ اجرا می شود.

شکل ۴: صفحه ابتدایی اپلیکیشن Mvc

Perform Database Operation

در این بخش عملیت پایگاه داده را اجرا می کنیم به صورتی که اطلاعات را از پایگاه داده بگیریم. با روش ها زیر پیش می رویم :

قدم اول: طبق query زیر پایگاه داده و جداول آن را بسازید.

CREATE DATABASE ChartSample  
  
USE [ChartSample]  
GO  
  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
SET ANSI_PADDING ON  
GO  
CREATE TABLE [dbo].[CS_Player](  
    [PlayerId] [int] IDENTITY(1,1) NOT NULL,  
    [PlayerName] [varchar](50) NULL,  
 CONSTRAINT [PK_CS_Player] PRIMARY KEY CLUSTERED   
(  
    [PlayerId] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY]  
  
GO  
SET ANSI_PADDING OFF  
GO  
/****** Object:  Table [dbo].[CS_PlayerRecord]    Script Date: 11/19/2015 4:00:01 PM ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
CREATE TABLE [dbo].[CS_PlayerRecord](  
    [ID] [int] IDENTITY(1,1) NOT NULL,  
    [PlayerId] [int] NULL,  
    [Year] [int] NULL,  
    [TotalRun] [int] NULL,  
    [TotalWickets] [int] NULL,  
    [ODIMatches] [int] NULL,  
    [TestMatches] [int] NULL,  
 CONSTRAINT [PK_CS_PlayerRecord] PRIMARY KEY CLUSTERED   
(  
    [ID] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY]  
  
GO  
ALTER TABLE [dbo].[CS_PlayerRecord]  WITH CHECK ADD  CONSTRAINT [FK_CS_PlayerRecord_CS_Player] FOREIGN KEY([PlayerId])  
REFERENCES [dbo].[CS_Player] ([PlayerId])  
GO  
ALTER TABLE [dbo].[CS_PlayerRecord] CHECK CONSTRAINT [FK_CS_PlayerRecord_CS_Player]  
GO 

قدم دوم: رکورد ها را در جدول وارد کنید.

قدم سوم: اکنون procedures زیررا  برای جدول فوق با اسفاده از کد زیر ایجاد می کنیم.

USE [ChartSample]  
GO  
/****** Object:  StoredProcedure [dbo].[SC_GetPlayers]    Script Date: 11/19/2015 4:21:29 PM ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
ALTER PROC [dbo].[SC_GetPlayers]  
AS  
    BEGIN  
        SELECT  *  
        FROM    CS_Player   
    END  
  
USE [ChartSample]  
GO  
/****** Object:  StoredProcedure [dbo].[SC_GetPlayerRecordsBtPlayerId]    Script Date: 11/19/2015 4:21:26 PM ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
ALTER PROC [dbo].[SC_GetPlayerRecordsBtPlayerId] @PlayerId INT  
AS  
    BEGIN  
        SELECT  PlayerId ,  
                Year ,  
                TotalRun ,  
                TotalWickets ,  
                ODIMatches ,  
                TestMatches  
        FROM    CS_PlayerRecord  
        WHERE   PlayerId = @PlayerId  
    END 

Creating Library

در این بخش class library project را مانند روش قبل ایجاد می کنیم و با استفاده از reference اطلاعات را از پایگاه داده می گیریم. طبق قسمت های زیر پیش می رویم :

قدم اول: روی solution کلیک راست کنید و یک پروژه جدید بسازید.

شکل ۵: اضافه کردن پروژه جدید

قدم دوم: Class Library را انتخاب کنید و نام آن را Chart Library بگذارید.

شکل ۶: ایجاد Class Library

قدم سوم: اکنون در library project یک کلاس ایجاد کنید.

شکل ۷: اضافه کردن کلاس جدید

قدم چهارم: کد زیر را با کد کلاس جا به جا کنید.

namespace ChartLibrary  
{  
    public class Players  
    {#  
        region Properties  
        /// <summary>  
        /// get and set the PlayerId  
        /// </summary>  
        public int PlayerId  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the PlayerName  
        /// </summary>  
        public string PlayerName  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the PlayerList  
        /// </summary>  
        public List < Players > PlayerList  
            {  
                get;  
                set;  
            }  
            /// <summary>  
            /// get and set the PlayerRecordList  
            /// </summary>  
        public List < PlayerRecord > PlayerRecordList  
        {  
            get;  
            set;  
        }#  
        endregion  
    }  
    public class PlayerRecord  
    {#  
        region Properties  
        /// <summary>  
        /// get and set the PlayerId  
        /// </summary>  
        public int PlayerId  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the Year  
        /// </summary>  
        public int Year  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the TotalRun  
        /// </summary>  
        public int TotalRun  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the TotalWickets  
        /// </summary>  
        public int TotalWickets  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the ODIMatches  
        /// </summary>  
        public int ODIMatches  
        {  
            get;  
            set;  
        }  
        /// <summary>  
        /// get and set the TestMatches  
        /// </summary>  
        public int TestMatches  
        {  
            get;  
            set;  
        }#  
        endregion  
    }  
}  

قدم پنجم: روی References در class library کلیک راست کنید و روی Manage NuGet Packages کلیک کنید.

شکل ۸: اضافه کردن NuGet Package

قدم ششم: Enterprise Library را جستوجو و در library project نصب کنید.

شکل ۹: اضافه کردن Enterprise Library Package

قدم هفتم: یک کلاس دیگر با نام PlayerDAL ایجاد کنید و کد را با کد زیر تعویض کنید.

 

using Microsoft.Practices.EnterpriseLibrary.Data;  
using Microsoft.Practices.EnterpriseLibrary.Data.Sql;  
using System;  
using System.Collections.Generic;  
using System.Configuration;  
using System.Data;  
using System.Data.Common;  
using System.Linq;  
using System.Reflection;  
namespace ChartLibrary  
{  
    public class PlayerDAL  
    {#  
        region Variable  
        /// <summary>     
        /// Specify the Database variable     
        /// </summary>     
        Database objDB;  
        /// <summary>     
        /// Specify the static variable     
        /// </summary>     
        string ConnectionString;#  
        endregion# region Database Method  
        public List < T > ConvertTo < T > (DataTable datatable) where T: new()  
        {  
            List < T > Temp = new List < T > ();  
            try  
            {  
                List < string > columnsNames = new List < string > ();  
                foreach(DataColumn DataColumn in datatable.Columns)  
                columnsNames.Add(DataColumn.ColumnName);  
                Temp = datatable.AsEnumerable().ToList().ConvertAll < T > (row => getObject < T > (row, columnsNames));  
                return Temp;  
            }  
            catch  
            {  
                return Temp;  
            }  
        }  
        public T getObject < T > (DataRow row, List < string > columnsName) where T: new()  
        {  
            T obj = new T();  
            try  
            {  
                string columnname = "";  
                string value = "";  
                PropertyInfo[] Properties;  
                Properties = typeof (T).GetProperties();  
                foreach(PropertyInfo objProperty in Properties)  
                {  
                    columnname = columnsName.Find(name => name.ToLower() == objProperty.Name.ToLower());  
                    if (!string.IsNullOrEmpty(columnname))  
                    {  
                        value = row[columnname].ToString();  
                        if (!string.IsNullOrEmpty(value))  
                        {  
                            if (Nullable.GetUnderlyingType(objProperty.PropertyType) != null)  
                            {  
                                value = row[columnname].ToString().Replace("$", "").Replace(",", "");  
                                objProperty.SetValue(obj, Convert.ChangeType(value, Type.GetType(Nullable.GetUnderlyingType(objProperty.PropertyType).ToString())), null);  
                            }  
                            else  
                            {  
                                value = row[columnname].ToString();  
                                objProperty.SetValue(obj, Convert.ChangeType(value, Type.GetType(objProperty.PropertyType.ToString())), null);  
                            }  
                        }  
                    }  
                }  
                return obj;  
            }  
            catch (Exception ex)  
            {  
                return obj;  
            }  
        }#  
        endregion# region Constructor  
        /// <summary>     
        /// This constructor is used to get the connectionstring from the config file     
        /// </summary>     
        public PlayerDAL()  
        {  
            ConnectionString = ConfigurationManager.ConnectionStrings["PlayerConnectionString"].ToString();  
        }#  
        endregion# region Player Details  
        /// <summary>     
        /// This method is used to get all players     
        /// </summary>     
        /// <returns></returns>     
        public List < Players > GetPlayerDetails()  
            {  
                List < Players > objPlayers = null;  
                objDB = new SqlDatabase(ConnectionString);  
                using(DbCommand objcmd = objDB.GetStoredProcCommand("SC_GetPlayers"))  
                {  
                    try  
                    {  
                        using(DataTable dataTable = objDB.ExecuteDataSet(objcmd).Tables[0])  
                        {  
                            objPlayers = ConvertTo < Players > (dataTable);  
                        }  
                    }  
                    catch (Exception ex)  
                    {  
                        throw ex;  
                        return null;  
                    }  
                }  
                return objPlayers;  
            }  
            /// <summary>    
            /// This method is used to get player records on the basis of player id    
            /// </summary>    
            /// <param name="playerId"></param>    
            /// <returns></returns>    
        public List < PlayerRecord > GetPlayerRecordByPlayerId(Int16 ? playerId)  
        {  
            List < PlayerRecord > objPlayerRecords = null;  
            objDB = new SqlDatabase(ConnectionString);  
            using(DbCommand objcmd = objDB.GetStoredProcCommand("SC_GetPlayerRecordsBtPlayerId"))  
            {  
                objDB.AddInParameter(objcmd, "@PlayerId", DbType.Int16, playerId);  
                try  
                {  
                    using(DataTable dataTable = objDB.ExecuteDataSet(objcmd).Tables[0])  
                    {  
                        objPlayerRecords = ConvertTo < PlayerRecord > (dataTable);  
                    }  
                }  
                catch (Exception ex)  
                {  
                    throw ex;  
                    return null;  
                }  
            }  
            return objPlayerRecords;  
        }#  
        endregion  
    }  
}  

 

قدم هشتم: رشته اتصال (connection string) زیر را در فایل Web.Config در اپلیکیشن MVC اضافه کنید.

<add name="PlayerConnectionString" connectionString="Data Source=Your Server Name; Initial Catalog=ChartSample; User Id=uid; Password=Your password" providerName="System.Data.SqlClient" />

 

قدم نهم: solution را بسازید.

Represent Data

در این بخش اطلاعات را از library می گیریم و داده ها را در نمای تازه اضافه شده نمودار ارائه می دهیم. با روش زیر ادامه می دهیم:

قدم اول: روی reference در اپلیکیشن MVC کلیک راست کنید و روی Add Reference کلیک کنید.

شکل ۱۰: اضافه کردن مراجع

قدم دوم: library reference را در اپلیکیشن MVC اضافه کنید.

شکل ۱۱: اضافه کردن Library Reference

قدم سوم: اکنون روی پوشه Controllers کلیک راست کنید سپس روی Add Controller کلیک کنید.

شکل ۱۲: اضافه کردن Controller در اپ MVC

قدم سوم: MVC 5 Empty Controller را از wizard انتخاب کنید.

قدم ۱۳: اضافه کردن MVC 5 Empty Controller

Controller name را اضافه کنید.

شکل ۱۴: Controller name

قدم چهارم: کد زیر را در controller class اضافه کنید.

 

public class PlayerController: Controller  
{  
    // GET: Player  
    public ActionResult Index()  
    {  
        return View();  
    }  
    public ActionResult PlayerChart()  
    {  
        Players objPlayers = new Players();  
        PlayerDAL objPlayerDAL = new PlayerDAL();  
        try  
        {  
            objPlayers.PlayerList = objPlayerDAL.GetPlayerDetails();  
            return View("~/Views/Player/PlayerChart.cshtml", objPlayers);  
        }  
        catch (Exception ex)  
        {  
            throw;  
        }  
    }  
    public JsonResult PlayerDashboardList(Int16 ? playerId)  
    {  
        Players objPlayers = new Players();  
        PlayerDAL objPlayerDAL = new PlayerDAL();  
        if (object.Equals(playerId, null))  
        {  
            playerId = 1;  
        }  
        try  
        {  
            var response = objPlayerDAL.GetPlayerRecordByPlayerId(playerId);  
            if (!object.Equals(response, null))  
            {  
                objPlayers.PlayerRecordList = response.ToList();  
            }  
        }  
        catch (Exception ex)  
        {  
            throw;  
        }  
        return Json(objPlayers.PlayerRecordList, JsonRequestBehavior.AllowGet);  
    }  
}  

قدم پنجم: روی پوشه Views/Player کلیک راست کنیدو روی Add -> View کلیک کنید و view name راPlayer Chart بگزارید.

شکل ۱۵: اضافه کردن View

قدم ششم: کد زیر را در view page اضافه کنید.

@model ChartLibrary.Players  
@  
{  
    ViewBag.Title = "PlayerChart";  
} 
< script src = "~/Scripts/jquery-1.10.2.js" > < /script>   
< script type = "text/javascript"  src = "https://www.google.com/jsapi" > < /script>   
< style > label  
{  
    font - size: 18 px;  
    font - weight: lighter;  
}  
select  
{  
    width: 250 px;height: 40 px;padding: 0 14 px;font - size: 16 px;  
} 
< /style>   <
 h2 style = "margin:25px 0; color:#5a5a5a;" > Player Chart < /h2>   < div class = "clear" > < /div>   
< div class = "row" > < div class = "col-md-8" > 
< section id = "loginForm"  style = "margin-bottom:25px;" >
< span style = "margin-right:15px; font-size:15px; font-weight:lighter;" > @Html.LabelFor(m => m.PlayerName, "Player Name") < /span>      
@Html.DropDownListFor(m => m.PlayerName, new SelectList(Model.PlayerList, "PlayerId", "PlayerName"), new  
{  
    @onchange = "drawChart()", @id = "playerNameList"  
})
 < /section>  
 < /div>  
 < /div>  
 < div class = "clear" > < /div>   
< div > < div id = "Player_Chart"  style = "width: 100%; height: 500px" > 
< /div>  
< /div> 
< div id = "divProcessing" class = "processingButton"  style = "display: none; text-align: center" >
< img src = "~/Images/ajaxloader_small.gif" width = "16"  height = "11" / > 
< /div>   
< div id = "divLoading" class = "loadingCampus" >
< div class = "LoadingImageForActivity" >
< img width = "31"  height = "31"  alt = "" src = "~/Images/ajax-loader-round-dashboard.gif" / > 
< /div>   
< /div>   
< script type = "text/javascript" >
 google.load("visualization", "1",  
{  
    packages: ["corechart"]  
});  
google.setOnLoadCallback(drawChart);  
  
function drawChart()  
{  
    var playerId = $('#playerNameList :selected').val();  
    $.ajax(  
    {  
        url: '@Url.Action("PlayerDashboardList","Player")',  
        dataType: "json",  
        data:  
        {  
            playerId: playerId  
        },  
        type: "GET",  
        error: function (xhr, status, error)  
        {  
            var err = eval("(" + xhr.responseText + ")");  
            toastr.error(err.message);  
        },  
        beforeSend: function ()  
        {  
            $("#divLoading").show();  
        },  
        success: function (data)  
        {  
            PlayerDashboardChart(data);  
            return false;  
        },  
        error: function (xhr, status, error)  
        {  
            var err = eval("(" + xhr.responseText + ")");  
            toastr.error(err.message);  
        },  
        complete: function ()  
        {  
            $("#divLoading").hide();  
        }  
    });  
    return false;  
}  
//This function is used to bind the user data to chart    
function PlayerDashboardChart(data)  
{  
    $("#Player_Chart").show();  
    var dataArray = [  
        ['Years', 'Total Runs', 'Total Wickets', 'ODI Matches', 'Test Matches']  
    ];  
    $.each(data, function (i, item)  
    {  
        dataArray.push([item.Year, item.TotalRun, item.TotalWickets, item.ODIMatches, item.TestMatches]);  
    });  
    var data = google.visualization.arrayToDataTable(dataArray);  
    var options = {  
        pointSize: 5,  
        legend:  
        {  
            position: 'top',  
            textStyle:  
            {  
                color: '#f5f5f5'  
            }  
        },  
        colors: ['#34A853', 'ff6600', '#FBBC05'],  
        backgroundColor: '#454545',  
        hAxis:  
        {  
            title: 'Years',  
            titleTextStyle:  
            {  
                italic: false,  
                color: '#00BBF1',  
                fontSize: '20'  
            },  
            textStyle:  
            {  
                color: '#f5f5f5'  
            }  
        },  
        vAxis:  
        {  
            baselineColor: '#f5f5f5',  
            title: 'Statistics',  
            titleTextStyle:  
            {  
                color: '#00BBF1',  
                italic: false,  
                fontSize: '20'  
            },  
            textStyle:  
            {  
                color: '#f5f5f5'  
            },  
            viewWindow:  
            {  
                min: 0,  
                format: 'long'  
            }  
        },  
    };  
    var chart = new google.visualization.LineChart(document.getElementById('Player_Chart'));  
    chart.draw(data, options);  
    return false;  
}; < /script>  

قدم هفتم: صفحه Views/Shared/_Layout از کد زیر ویرایش کنید.

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>@ViewBag.Title - MVC Chart App</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head>  
  
<body>  
    <div class="navbar navbar-inverse navbar-fixed-top">  
        <div class="container">  
            <div class="navbar-header">  
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Chart Sample", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div>  
            <div class="navbar-collapse collapse">  
                <ul class="nav navbar-nav">  
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>  
                    <li>@Html.ActionLink("About", "About", "Home")</li>  
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
                    <li>@Html.ActionLink("Players", "PlayerChart", "Player")</li>  
                </ul> @Html.Partial("_LoginPartial") </div>  
        </div>  
    </div>  
    <div class="container body-content"> @RenderBody()  
        <hr />  
        <footer>  
            <p>© @DateTime.Now.Year - MVC Chart Sample</p>  
        </footer>  
    </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body>  
  
</html>  

قدم هشتم: حالا اپلیکیشن را اجرا کنید و در صفحه شروع روی Players list کلیک کنید.

شکل ۱۶: شکل نمودار

حالا می توانید نام player را از list box تغییر دهید و تغییرات را مشاهد کنید.

شکل ۱۷: نمادها در صفحه نمودار

محمد نجفی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    آرین پاسخ

    بسیار عالی و مفید ممنون از مطالب خوبتون

      مسعود شریفی پاسخ

      خواهش میکنم.

    داود رمضانی پاسخ

    بسیار عالی
    با تشکر از زحمات شما