Implementing Tiny Animated jQuery Chart Plugin With ASP.NET MVC

In this article we will go step by step to implement Jquery Chart Plugin. Plugin name is Tiny Animated Chart Plugin For jQuery - simple-chart.

In this article we will go step by step to implement Jquery Chart Plugin. Plugin name is Tiny Animated Chart Plugin For jQuery - simple-chart.

I had seen this plugin on www.juqeryscript.net . You can go for detail view of Tiny Animcated Chart plugin at the following link :

http://www.jqueryscript.net/chart-graph/Tiny-Animated-Chart-Plugin-jQuery-simple-chart.html

Additionally you will come to know about the following things:

  • About jqueryscript.net
  • What is Jquery?
  • Step by Step Explanation and Implementation.

About www.jqueryscript.net

JqueryScript.Net is One of the BEST jQuery Plugin websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins.

What is Jquery?

Jquery is  JavaScript Library  that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Step By Step Explanation and Implementation:

STEP 1

Create a new project. File --> New -->Project

Tiny Animated Chart Plugin

Project is named “jquerychart”

STEP 2

Tiny Animated Chart Plugin

STEP 3

Tiny Animated Chart Plugin

Your solution explorer looks like this.

Before we start working on new step, first download a tiny animated chart plugin from given below link:

http://www.jqueryscript.net/chart-graph/Tiny-Animated-Chart-Plugin-jQuery-simple-chart.html

Extract zip file inside “Tiny-Animated-Chart-Plugin-jQuery-simple-chart” folder there are two main files:

  1. simple-chart.css

    Copy this file into CONTENT
  1. Shimple-chart.js

    Copy this file into SCRIPTS

STEP 4

Now we will add a new controller called “InvoiceChart”

Right click on CONTROLLERS folder select ADD --> CONTROLLER

Tiny Animated Chart Plugin

Select “MVC 5 Controller - Empty”

Tiny Animated Chart Plugin

Enter controller name : InvoiceController

Tiny Animated Chart Plugin

STEP 5

Now we move toward to create table and LINQ TO SQL (DBML) file.

Table Structure

  1. /****** Object:  Table [dbo].[tblInvoices]    Script Date: 13-Oct-17,Fri 6:48:00 PM ******/  
  2. SET ANSI_NULLS ON  
  3. GO  
  4.   
  5. SET QUOTED_IDENTIFIER ON  
  6. GO  
  7.   
  8. CREATE TABLE [dbo].[tblInvoices](  
  9.     [InvoiceID] [int] IDENTITY(1,1) NOT NULL,  
  10.     [InvoiceDate] [datetime] NULL,  
  11.     [ClientName] [nvarchar](50) NULL,  
  12.     [ClientZone] [nvarchar](50) NULL,  
  13.     [InvoiceAmount] [decimal](18, 0) NULL,  
  14.  CONSTRAINT [PK_tblInvoices] PRIMARY KEY CLUSTERED   
  15. (  
  16.     [InvoiceID] ASC  
  17. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]  
  18. ON [PRIMARY]  
  19.   
  20. GO  

Sample Data entry

I entered sample data, you can enter as you require. But follow the same table structure.

Tiny Animated Chart Plugin

SETP 6

Now we are going to set WEB.CONFIG for connection string:

  1. <connectionStrings>  
  2.     <add name="InvoiceConnectionString" connectionString="Data Source=admin;Initial Catalog=MBkTest;Persist Security Info=True;User ID=sa;Password=clserver" providerName="System.Data.SqlClient"/>  
  3.   </connectionStrings>  

STEP 7

Now we are going to add LINQ TO SQL class (DBML) file.

Right click on project title that is (“jQueryChart”) select ADD --> NEW ITEM

Tiny Animated Chart Plugin

Give the LINQ TO SQL (DBML) file name: “InvoiceDataClasses.dbml”

Tiny Animated Chart Plugin

Now we are going to add tblInvoices in DBML.

Tiny Animated Chart Plugin

Following data is required to generate graph,

Label for titles

  1. var labels = ["Avatar""Titanic""Star Wars: The Force Awakens""Jurassic World""Marvel's: The Avengers""Furious 7""Avengers: Age of Ultron""Harry Potter and the Deathly Hallows Part 2""Frozen""Iron Man 3"];  

Values for generating bars

  1. var values = [2787965087, 2186772302, 2068223624, 1670400637, 1518812988, 1516045911, 1405403694, 1341511219, 1276480335, 1214811252];  

As you see above we required two set of arrays.

STEP 8

Create a viewmodel called INVOICEVIEWMODEL.

Right click on MODEL folder. Select ADD --> Class.

Tiny Animated Chart Plugin

Tiny Animated Chart Plugin

Code of InvoiceViewModel.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace jQueryChart.Models  
  7. {  
  8.     public class InvoiceViewModel  
  9.     {  
  10.         public string ClientName { get; set; }  
  11.         public Int32? InvoiceAmount { get; set; }  
  12.           
  13.     }  
  14.      
  15. }  

Now Go to InvoiceController and code Index Method:

Index Method Code

  1. // GET: Invoice Data  
  2. public ActionResult Index()  
  3. {  
  4. InvoiceDataClassesDataContext db = new InvoiceDataClassesDataContext();  
  5.            var salesummary = from a in db.tblInvoices  
  6.                             group a by a.ClientName into tblInvoice  
  7.                             select new InvoiceViewModel { ClientName = tblInvoice.Key, InvoiceAmount =                                                                  tblInvoice.Sum(x =>  x.InvoiceAmount) };  
  8.               
  9.            var SaleTotal = salesummary.ToList().AsEnumerable();  
  10.   
  11.            string values = JsonConvert.SerializeObject(SaleTotal.Select(x => x.InvoiceAmount).ToArray());  
  12.            
  13.             ViewBag.val = values;  
  14.   
  15.            return View(SaleTotal);  
  16.  }  

STEP 9

Now we are going to create VIEW for index

Tiny Animated Chart Plugin

After selection ADD VIEW option Visual Studio asked details for VIEW

Tiny Animated Chart Plugin

STEP 10

Code of Index.cshtml file

  1. @using jQueryChart.Models  
  2. @model IEnumerable<jQueryChart.Models.InvoiceViewModel>  
  3.   
  4. @{   
  5.     var vals = ViewData["val"] as decimal?[];  
  6.     }  
  7. <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">  
  8.   
  9. <!-- Simple Chart CSS file -->  
  10. <link rel="stylesheet" href="~/Content/simple-chart.css">  
  11.   
  12.   
  13. <!-- Start of Chart Render Area-->  
  14. <div class="sc-wrapper">  
  15.     <section class="sc-section">  
  16.         <div class="column-chart"></div>  
  17.     </section>  
  18.     <section class="sc-section">  
  19.         <div class="bar-chart"></div>  
  20.     </section>  
  21.     <section class="sc-section">  
  22.         <div class="step-chart"></div>  
  23.     </section>  
  24.     <section class="sc-section">  
  25.         <div class="progress-chart"></div>  
  26.     </section>  
  27.     <section class="sc-section">  
  28.         <div class="waterfall-chart"></div>  
  29.     </section>  
  30. </div>  
  31. <!-- End of Chart Render Area-->  
  32.   
  33. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
  34.   
  35. <!-- Simple Chart JS file -->  
  36. <script src="~/Scripts/simple-chart.js"></script>  
  37.   
  38.   
  39.   
  40. @{  
  41.     String clntname = string.Empty;  
  42.   }  
  43.   
  44. @{  
  45.     ViewBag.Title = "Index";  
  46.     Layout = "~/Views/Shared/_Layout.cshtml";  
  47. }  
  48. <h2>Sales Summary</h2>  
  49.   
  50.   
  51. <table class="table">  
  52.     <tr>  
  53.           
  54.         <th>  
  55.             @Html.DisplayNameFor(model => model.ClientName)  
  56.         </th>  
  57.         <th>  
  58.             Total Sales  
  59.         </th>  
  60.     </tr>  
  61.   
  62. <!--Creating Array  within ForEach Loop -->  
  63. @{   
  64.     string name = "[";  
  65. }  
  66. @foreach (var item in Model) {  
  67.      
  68.     name = name + "\"" + item.ClientName + "\"";  
  69.   
  70.     <tr>  
  71.         <td>  
  72.             @Html.DisplayFor(modelItem => item.ClientName)  
  73.         </td>  
  74.         <td>  
  75.             @Html.DisplayFor(modelItem => item.InvoiceAmount)  
  76.         </td>  
  77.          
  78.     </tr>  
  79.     name = name + ",";  
  80. }  
  81.     @{   
  82.         int fnd = name.Length -1;  
  83.          name = name.Substring(0, fnd)+"]";  
  84.     }  
  85.       
  86.       
  87. </table>  
  88.   
  89. <input type="hidden" id="hdnfldname" value="@name" />  
  90. <script>  
  91.   
  92.     //this function which convert sales amount into K, milion, bilion ....  
  93.     function abbreviateNumber(arr) {  
  94.         var newArr = [];  
  95.         $.each(arr, function (index, value) {  
  96.             var newValue = value;  
  97.             if (value >= 1000) {  
  98.                 var suffixes = [" "" K"" mil"" bil"" t"];  
  99.                 var suffixNum = Math.floor(("" + value).length / 3);  
  100.                 var shortValue = '';  
  101.                 for (var precision = 2; precision >= 1; precision--) {  
  102.                     shortValue = parseFloat((suffixNum != 0 ? (value / Math.pow(1000, suffixNum)) : value).toPrecision(precision));  
  103.                     var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g, '');  
  104.                     if (dotLessShortValue.length <= 2) {  
  105.                         break;  
  106.                     }  
  107.                 }  
  108.                 if (shortValue % 1 != 0) shortNum = shortValue.toFixed(1);  
  109.                 newValue = shortValue + suffixes[suffixNum];  
  110.             }  
  111.             newArr[index] = newValue;  
  112.         });  
  113.         return newArr;  
  114.     }  
  115.   
  116.     var labels = JSON.parse('@name'.replace(/"/g,'"'));  
  117.     var values = @ViewBag.val;  
  118.     var outputValues = abbreviateNumber(values);  
  119.   
  120.   
  121.   
  122.    $('.column-chart').simpleChart({  
  123.         title: {  
  124.             text: 'Column Chart',  
  125.             align: 'center'  
  126.         },  
  127.         type: 'column',  
  128.         layout: {  
  129.             width: '100%',  
  130.             height: '250px'  
  131.         },  
  132.         item: {  
  133.             label: labels,  
  134.             value: values,  
  135.             outputValue: outputValues,  
  136.             color: ['#00aeef'],  
  137.             prefix: '$',  
  138.             suffix: '',  
  139.             render: {  
  140.                 margin: 0.2,  
  141.                 size: 'relative'  
  142.             }  
  143.         }  
  144.     });  
  145.   
  146.   
  147.      $('.bar-chart').simpleChart({  
  148.             title: {  
  149.                 text: 'Bar Chart',  
  150.                 align: 'center'  
  151.             },  
  152.             type: 'bar',  
  153.             layout: {  
  154.                 width: '100%'  
  155.             },  
  156.             item: {  
  157.                 label: labels,  
  158.                 value: values,  
  159.                 outputValue: outputValues,  
  160.                 color: ['#00aeef'],  
  161.                 prefix: '$',  
  162.                 suffix: '',  
  163.                 render: {  
  164.                     margin: 0,  
  165.                     size: 'relative'  
  166.                 }  
  167.             }  
  168.         });  
  169.   
  170.         $('.waterfall-chart').simpleChart({  
  171.             title: {  
  172.                 text: 'Waterfall Chart',  
  173.                 align: 'center'  
  174.             },  
  175.             type: 'waterfall',  
  176.             layout: {  
  177.                 width: '100%'  
  178.             },  
  179.             item: {  
  180.                 label: labels,  
  181.                 value: values,  
  182.                 outputValue: outputValues,  
  183.                 color: ['#00aeef'],  
  184.                 prefix: '$',  
  185.                 suffix: '',  
  186.                 render: {  
  187.                     margin: 0,  
  188.                     size: 'absolute'  
  189.                 }  
  190.             }  
  191.         });  
  192.   
  193.   
  194.         $('.progress-chart').simpleChart({  
  195.             title: {  
  196.                 text: 'Progress Chart',  
  197.                 align: 'center'  
  198.             },  
  199.             type: 'progress',  
  200.             layout: {  
  201.                 width: '100%',  
  202.                 height: '250px'  
  203.             },  
  204.             item: {  
  205.                 label: labels,  
  206.                 value: values,  
  207.                 outputValue: outputValues,  
  208.                 color: ['#00aeef'],  
  209.                 prefix: '$',  
  210.                 suffix: '',  
  211.                 render: {  
  212.                     margin: 0,  
  213.                     size: 'absolute'  
  214.                 }  
  215.             }  
  216.         })  
  217.   
  218.         $('.step-chart').simpleChart({  
  219.             title: {  
  220.                 text: 'Step Chart',  
  221.                 align: 'center'  
  222.             },  
  223.             type: 'step',  
  224.             layout: {  
  225.                 width: '100%',  
  226.                 height: '250px'  
  227.             },  
  228.             item: {  
  229.                 label: labels,  
  230.                 value: values,  
  231.                 outputValue: outputValues,  
  232.                 color: ['#00aeef'],  
  233.                 prefix: '$',  
  234.                 suffix: '',  
  235.                 render: {  
  236.                     margin: 0,  
  237.                     size: 'relative'  
  238.                 }  
  239.             }  
  240.         })  
  241. </script> 

STEP 11

Now it's time to run the application but before that change the current controller and its action method in ROUTECONFIG.CS

Double click on ROUTECONFIG.CS file

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7.   
  8. namespace jQueryChart  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.   
  16.             routes.MapRoute(  
  17.                 name: "Default",  
  18.                 url: "{controller}/{action}/{id}",  
  19.                 defaults: new { controller = "Invoice", action = "Index", id = UrlParameter.Optional }  
  20.             );  
  21.         }  
  22.     }  
  23. }  

As you can see above I had change controller = “Invoice” and action = “Index”.

OUTPUT

You can see Column Chart and Bar Chart.

Tiny Animated Chart Plugin

Step Chart & Progress Chart

Tiny Animated Chart Plugin

Waterfall Chart

Tiny Animated Chart Plugin

Sales Summary

Tiny Animated Chart Plugin