Saturday

MVC Charts: How to create charts using MVC

Introduction

Already explained how to send SMS using C# in my previous article, here explaining about MVC Charts. Chart Helper is an outstanding option to show your data in graphical representation. The Chart Helper shows data in image in different chart types like Funnel, Bar Chart, Pie, Column, Candlestick, Doughnut, StackedBar100, BoxPlot, Pyramid, Polar, Radar, RangeBar etc. Chart Helper can show more than 30 chart types in MVC C#. Here, I are explaining main properties of Charts like Height, Weight, Title, Series and then finally write charts into output bmp file. In this sample, I will show how to create charts using MVC.

Database Script

CREATE TABLE [dbo].[tblMVCCharts](
 [ChartID] [int] IDENTITY(1,1) NOT NULL,
 [Growth_Year] [int] NULL,
 [Growth_Value] [float] NULL
) ON [PRIMARY]


insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2008,50)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2009,70)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2010,80)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2011,90)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2012,120)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2013,150)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2014,100)
insert into [dbo].[tblMVCCharts] (Growth_Year, Growth_Value) values (2015,300)

Namespace

using System.Web.Helpers;

Height-Weight

We can increase-decrease chart height and weight as per your customisation requirements

Title

Here we can put title of the chart.

Series

In series property, Series is very required property to provide data (X & Y series) to generate into graphical form. We need to provide data for X (Horizontal) and Y (Vertical) series to show data in graphical representation, that is what we need to extract from our data into chart in MVC.

Write

Write properties is finally convert our data into image form to output in to BMP file.
Every chart necessarily requires values for x and y for similar collection of information. Here are showing growth overs years values for X and Y.

Controller Action Column Chart

public ActionResult CharterColumn()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D)
    .AddTitle("Chart for Growth [Column Chart]")
   .AddSeries("Default", chartType: "column", xValue: xValue, yValues: yValue)
          .Write("bmp");

    return null;
}

Razor View Column Chart

<img src="@Url.Action("CharterColumn")" alt="Chart" />

Column Chart Output

Column Chart

Controller Action Bar Chart

public ActionResult ChartBar()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D)
    .AddTitle("Chart for Growth [Bar Chart]")
            .AddSeries("Default", chartType: "Bar", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Bar Chart

<img src="@Url.Action("ChartBar")" alt="Chart" />

Bar Chart Output

Bar Chart

Controller Action Pie Chart

public ActionResult ChartPie()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D)
    .AddTitle("Chart for Growth [Pie Chart]")
            .AddLegend("Summary")
            .AddSeries("Default", chartType: "Pie", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Pie Chart

<img src="@Url.Action("ChartPie")" alt="Chart" />

Pie Chart Output

Pie Chart

Controller Action Three Line Break Chart

public ActionResult ChartThreelinebreak()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    /// SeriesChartType.Candlestick
    new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D)
    .AddTitle("Chart for Growth [Three Line Break Chart]")
            .AddSeries("Default", chartType: "Candlestick", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Three Line Break Chart

<img src="@Url.Action("ChartThreelinebreak")" alt="Chart" />

Three Line Break Chart Output

Three Line Break Chart

Controller Action Bubble Chart

public ActionResult Bubblebreak()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.Bubble
    .AddTitle("Chart for Growth [Bubble Chart]")
            .AddLegend("Summary")
            .AddSeries("Default", chartType: "Bubble", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Bubble Chart

<img src="@Url.Action("Bubblebreak")" alt="Chart" />

Bubble Chart Output

Bubble Chart

Controller Action Doughnut Chart

public ActionResult DoughnutGraph()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.Doughnut
    .AddTitle("Chart for Growth [Doughnut Chart]")
            .AddLegend("Summary")
            .AddSeries("Default", chartType: "Doughnut", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Doughnut Chart

<img src="@Url.Action("DoughnutGraph")" alt="Chart" />

Doughnut Chart Output

Doughnut Chart

Controller Action StackedBar100 Chart

public ActionResult ChartStackedBar100()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.StackedBar100
    .AddTitle("Chart for Growth [StackedBar100 Chart]")
            .AddSeries("Default", chartType: "StackedBar100", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View StackedBar100 Chart

<img src="@Url.Action("ChartStackedBar100")" alt="Chart" />

StackedBar100 Chart Output

StackedBar100 Chart

Controller Action BoxPlot Chart


public ActionResult ChartBoxPlot()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.BoxPlot
    .AddTitle("Chart for Growth [BoxPlot Chart]")
            .AddSeries("Default", chartType: "BoxPlot", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View BoxPlot Chart

<img src="@Url.Action("ChartBoxPlot")" alt="Chart" />

BoxPlot Chart Output

BoxPlot Chart

Controller Action Pyramid Chart


public ActionResult ChartPyramid()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.Pyramid
    .AddTitle("Chart for Growth [Pyramid Chart]")
            .AddLegend("Summary")
            .AddSeries("Default", chartType: "Pyramid", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Polar Chart

<img src="@Url.Action("ChartPyramid")" alt="Chart" />

Pyramid Chart Output

ChartPyramid

Controller Action Polar Chart

public ActionResult ChartPolar()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.Polar
    .AddTitle("Chart for Growth [Polar Chart]")
            .AddSeries("Default", chartType: "Polar", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Polar Chart

 <img src="@Url.Action("ChartPolar")" alt="Chart" />

Radar Chart Output

Polar Chart

Controller Action Radar Chart

public ActionResult RadarChart()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.Radar
    .AddTitle("Chart for Growth [Radar Chart]")
            .AddSeries("Default", chartType: "Radar", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Radar Chart

<img src="@Url.Action("RadarChart")" alt="Chart" />

Radar Chart Output

Radar Chart

Controller Action RangeBar Chart

public ActionResult ChartRangeBar()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)
            
    /// SeriesChartType.RangeBar
    .AddTitle("Chart for Growth [RangeBar Chart]")
            .AddSeries("Default", chartType: "RangeBar", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View RangeBar Chart

<img src="@Url.Action("ChartRangeBar")" alt="Chart" />

RangeBar Chart Output

RangeBar Chart

Controller Action Funnel Chart

public ActionResult ChartFunnel()
{
    var _context = new TestEntities();

    ArrayList xValue = new ArrayList();
    ArrayList yValue = new ArrayList();

    var results = (from c in _context.tblMVCCharts select c);

    results.ToList().ForEach(rs => xValue.Add(rs.Growth_Year));
    results.ToList().ForEach(rs => yValue.Add(rs.Growth_Value));

    new Chart(width: 600, height: 400, theme: ChartTheme.Green)

    /// SeriesChartType.Funnel
    .AddTitle("Chart for Growth [Funnel Chart]")
    .AddLegend("Summary")
            .AddSeries("Default", chartType: "Funnel", xValue: xValue, yValues: yValue)
            .Write("bmp");

    return null;
}

Razor View Funnel Chart

<img alt="Chart" chartfunnel="" src="@Url.Action("ChartFunnel") />

Funnel Chart Output

Funnel Chart

Conclusion

Charts help us to represent data into graphical form from tabular data. MVC charts have been provided facility to represent data into different charts. We can analyse data minutely with the help of MVC charts to take up comparative decisions. Hopefully, above all charts will help everyone to represent data in to many ways in your web app. I tried here how to create charts using MVC with detailed example and also attached a working sample with database.

Download Working Sample

Download
Note: Change Connection String in web.config before to run this working sample of MVC Charts.

Suggested Reading

SMS API: How to send SMS using C#

Introduction

SMS stands for Short Message Service is widely used to communicate to another mobile devices. Earlier, provided resolution to resolve issue Authentication the Server Response was 5.5.1 Authentication required in gmail, now today explaining how to send SMS using C#. We can send SMS up to 160 characters through our mobile devices. Long message can split up into small multiple parts automatically. On mobile device can send text message only. Here, I am exposing how to send text SMS (Short Message Service) using c# code.
  1. First of all. We need to create an URL to send text message on mobile device.
  2. We require web or IP address with parameters like username, password, recipient, senderid, text message and response etc.
  3. Parameters can vary depend on SMS provider service. Providers provide complete information to send SMS.
  4. Now we need to create web request to send SMS using C# code.
  5. We can also track response after sending text message on mobile device.
SMS API
Fig: SMS API

Code Snippet


public ActionResult SendSMSInCsharp()
{
    //we creating the necessary URL string:
    string _URL = "192.168.1"; //where the SMS Gateway is running
    string _senderid = "TESTTC";   // here assigning sender id 
            
    string _user = HttpUtility.UrlEncode("TestSMS"); // API user name to send SMS
    string _pass = HttpUtility.UrlEncode("123456");     // API password to send SMS
    string _recipient = HttpUtility.UrlEncode("9999999999");  // who will receive message
    string _messageText = HttpUtility.UrlEncode("testing sms..."); // text message

    // Creating URL to send sms
    string _createURL = _URL + 
    "username =" + _user +
       "&pass=" + _pass +
       "&senderid=" + _senderid +
       "&dest_mobileno=" + _recipient +
       "&message=" + _messageText;

    try
    {
        // creating web request to send sms 
        HttpWebRequest _createRequest = (HttpWebRequest)WebRequest.Create(_createURL);
        // getting response of sms
        HttpWebResponse myResp = (HttpWebResponse)_createRequest.GetResponse();
        System.IO.StreamReader _responseStreamReader = new System.IO.StreamReader(myResp.GetResponseStream());
        string responseString = _responseStreamReader.ReadToEnd();
        _responseStreamReader.Close();
        myResp.Close();
    }
    catch
    {
        //
    }
    return View();
}

Conclusion

SMS (Short Message Service) is now used across the world through mobile devices to instant communication medium. In this article, demonstrated explained all steps to send SMS using C# code. You can send SMS through this code in ASP.Net, MVC using C# code.

Suggested Reading

SQL Table Size: How to Get Database tables size in sql server

Introduction

In Last article, I have explained very known SQL Server Error 25 And 87, here going to fully explain how to get database tables size in SQL server. Tables stores information in rows and columns in database. I am here explaining how to check tables storage in SQL database. This is very important to check database tables storage to optimise our application performance. Explaining all steps to check our database tables storage in single command. Here, you can see how to get all database tables size with detail.

Solution I (Shows usage one by one table)

1. Open your SQL Server Management Studio and login into your database.
2. Now navigate to Query Analyser (Ctrl + N).
3. Then now write given T-SQL command select 'exec sp_spaceused ' + TABLE_NAME from INFORMATION_SCHEMA.TABLES where TABLE_TYPE = 'BASE TABLE' in query analyser.

database table list

4. Now copy all records from result window.
5. Again now open a New Query (Ctrl + N) Analyser and paste all records copied from result window.
6. Next select option from top toolbar Results to File (Ctrl + Shift + F).


7. Now hit button Execute (F5) from top toolbar to run T-SQL command to store all database tables storage stats into a report file (.rpt).
8. Now open file saved into your machine hard drive to check the database tables storage stats. This file contains given columns  name (name of table), rows (total rows in table), reserved (reserved space), data (stored data size), index_size (total indexed size), unused (shows unused data).

tables space used file

Solution II (Consolidated Database Usage)

1. Open your SQL Server Management Studio and Right click on Database.
2. Now navigate to Reports >> Standard Reports >> Disk Usage.

Disk Usage Report
3. You will see here showing consolidated data usage detail Total Space Usage, Data Files Space Usage, Transaction Log Space Usage with graphical representation.

Total Space Usage

Conclusion

Database is soul of our application so it requires well-tuned, managed and optimised to run our application superbly. Here, I have managed all steps to get database tables size in SQL server so that we can manage accordingly.

Relevant Reading

Monday

Fix SQL Error : SQL Server Error 25 And 87

Introduction

Error SQL Server Error 25 And 87 is very known error while connecting through MS SQL Management Studio. SQL Server Error 25 And 87 comes out commonly when we type wrong host name instead of correct host name (server name). I have already provided resolution in my earlier article SQL error of Could not open a connection to SQL Server and Login failed for user iis apppool default apppool. I have provided main key factors how we can resolve this issue through given below steps.

Error Description

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 25 - Connection string is not valid) (Microsoft SQL Server, Error: 87).

Step 1: Login Authentication Windows or SQL Server

Check your login Authentication whether its Windows or SQL Server.

Step 2: Use (.) (dot) instead of complete server name

If you are using local MS sql database then you can use (.) (dot) instead of complete server name.

Step 3: Enter Correct Host Name

Enter your correct host name: (hostname\SQLEXPRESS) my_hostname\SQLEXPRESS (in case of SQL Server Express) or (my_hostname\mssqlserver).

Step 4: Try localhost slash (\) then host name

You can also try localhost slash (\) then host name, here is sample as (localhost\SQLEXPRESS) or (localhost\mssqlserver).

Authentication Windows or SQL Server
Fig 1: Authentication Windows or SQL-Server
SQL Authentication using dot
Fig 2: SQL-Authentication using dot
Authentication Windows or SQL Server
Fig 3: Use localhost in server-name

Conclusion

Explained all primitive steps to resolve very known SQL Server Error 25 And 87. You may go one by one steps provided to resolve this issue so that take over from this SQL error.

Relevant Reading

Saturday

Publish APP: Copying file failed in publish using Visual Studio

Introduction

I have already written an articles on how to publish web application in IIS using visual studio. Today, I am writing a very known issue Copying file failed in publish using Visual Studio, it comes issue while deleted files remained in visual studio solution. I am in this article demonstrating below how to get rid of this issue.

Jquery Magnifier: How to develop image magnifier using mvc

Introduction

Jquery Image Magnifier is widely used in our web/Mobile app to view product images in all angles. Jquery Image Magnifier is used often in eCommerce website where end use can view minutely product image before to place order online. Here, Jquery magnifier is using in ASP.Net MVC App.

Include Two Style sheets files

CSS files are very important to enable Jquery magnifier using MVC application (Need to add stylesheet (demo.css, jQuery.MagnifierRentgen.min.css)).


Include Three JS File to Client Side Magnifier Effect

Here adding three java script file reference (online Jquery reference (jquery-1.11.3.min.js) & other two offline (jQuery.MagnifierRentgen.min.js, demo.js))
    
    
    

Razor View (CSHTML Page)

Razor View (CSHTML Page)
@{
    ViewBag.Title = "Magnifier";

    
    
}


    

JQuery Magnifier

_Layout Razor View (App Layout default settings)

Here showing Layout Master Razor view code


    
    
    @ViewBag.Title
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    @RenderBody()

    @RenderSection("scripts", required: false)


Image Magnifier Output View First

Image Magnifier using MVC

Image Magnifier Output View Second

Image Magnifier using MVC

Conclusion

Jquery Image Magnifier can trust and motivated to buy product online through eCommerce website (marketplace). In this article, I have explained all steps to how can we zoom in, zoom out the image to give a very close look of the product image. This is very brilliant feature (Jquery Magnifier) in our eCommerce website.

Download Example

Download

Relevant Reading

Thursday

JQuery: Show Hide div on radio button using Jquery

Introduction

Today, Explaining about how to show hide HTML Div on radio button click containing input box on radio button click. This particular requirement arise whenever we are asking questions or confirming something on that basis we have to show and hide html controls under div, I have explained here in with great deal.

Show Hide div on radio button using Jquery