int scenarioid = Convert.ToInt32(HttpContext.Current.Session["ScenarioID"]);
int countryid = Convert.ToInt32(HttpContext.Current.Session["CountryID"]);

List<Filter> filters = new List<Filter>();
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.From, Value = from });
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.To, Value = to });
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.ChartType, Value = charttype });
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.Display, Value = type });
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.Country, Value = countryid });
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.Scenario, Value = scenarioid });
filters.Add(new Filter() { Column = EnumModel.WidgetVariable.UserID, Value = user.ID });

return ViewManager.RenderView(“~/Controls/Reports/SupplierPLCategoryData.ascx”, filters);
}
return “error”;
}
Here viewmanager is a simple class which create a object of system.web.ui.page at run time and adds the controls 
to it to execute and get the resultant HTML.
public class ViewManager
{
public static string RenderView(string path)
{
return RenderView(path, null);
}

public static string RenderView(string path, object data)
{
Page pageHolder = new Page();

UserControl viewControl = (UserControl)pageHolder.LoadControl(path);

if (data != null)
{
Type viewControlType = viewControl.GetType();
FieldInfo field = viewControlType.GetField(“ObjectData”);

if (field != null)
{
field.SetValue(viewControl, data);
}
else
{
throw new Exception(“View file: ” + path + ” does not have a public Data property”);
}
}

pageHolder.Controls.Add(viewControl);

StringWriter output = new StringWriter();
HttpContext.Current.Server.Execute(pageHolder, output, false);
return output.ToString();
}
}

2. Create a user control to bind chart
public object ObjectData;
public void Fill()
{

if (ObjectData != null)
{
int scenarioId = 0;
string type=string.Empty ; string chartType=string.Empty ; int from=0; int to=0;
int userId = 0;
int countryId = 0;

List<Filter> filters = ObjectData as List<Filter>;

countryId = Convert.ToInt32(filters.Where(c => c.Column == EnumModel.WidgetVariable.Country).SingleOrDefault().Value);
scenarioId = Convert.ToInt32(filters.Where(c => c.Column == EnumModel.WidgetVariable.Scenario).SingleOrDefault().Value);
userId = Convert.ToInt32(filters.Where(c => c.Column == EnumModel.WidgetVariable.UserID).SingleOrDefault().Value);
type =filters.Where(c => c.Column == EnumModel.WidgetVariable.Display).SingleOrDefault().Value.ToString();
chartType= filters.Where(c => c.Column == EnumModel.WidgetVariable.ChartType).SingleOrDefault().Value.ToString();
from =Convert.ToInt32( filters.Where(c => c.Column == EnumModel.WidgetVariable.From).SingleOrDefault().Value.ToString());
to = Convert.ToInt32(filters.Where(c => c.Column == EnumModel.WidgetVariable.To).SingleOrDefault().Value.ToString());
// fill chart here
}
}
In control’s HTML, just drag a chart control and create the required series and set the properties according to your requirements

3. Calling code is written in Asp.net Ajax but you can use Jquery if you would like to
function GetSupplierPLCategory(type, charttype, from, to) {
retailInsight.ProfitModel.Web.UI.Widgets.SupplierPLCategory(type,charttype, from ,to,
function (result) {
$get(“contents_pl_category”).innerHTML = result;
});
}

Step 1:
Drop a asp.net chart control on page with having a series of RangeColumn type.

Step 2 :

Next step is to add data points to your chart and make it to look like waterfall chart. RangeColumn series type provides a way to add your Y-Axis value in a range, you can specify your starting and ending values for a data point like this:

Adding a first point

cWaterfall.Series[0].Points.AddXY("First Item", new object[] { 0, 500 });
cWaterfall.Series[0].Points[0].Label = "500"
cWaterfall.Series[0].Points[0].Color = Color.SkyBlue;

Adding a second point

cWaterfall.Series[0].Points.AddXY("Second Item", new object[] { 500, 700 });
cWaterfall.Series[0].Points[1].Label = "200"
cWaterfall.Series[0].Points[1].Color = Color.Green;

By using the above approach you can create a waterfall chart like this

<input type =”button” id=”btn” value=”click me” />

<div id=”test”>    </div>

JS

$(document).ready(function () {
$('#btn').click(function (event) {
$.ajax({
type: "POST",
url: "WebService.asmx/LoadControl",
data: "{'name': '" + $('#name').val() + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
AjaxSucceeded(msg);
},
error: AjaxFailed
});
});
function AjaxSucceeded(result) {
$('#test').html(result.d);
}

function AjaxFailed(result) {
$('#test').html(result.status + ' ' + result.statusText);
}

});

Web Service

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

public WebService () {

[WebMethod]

public string LoadControl(string name)
{
return ViewManager.RenderView("Test.ascx");
}}

View Manager

public class ViewManager

{
public static string RenderView(string path)
{
return RenderView(path, null);
}

public static string RenderView(string path, object data)
{
Page pageHolder = new Page();
UserControl viewControl = (UserControl)pageHolder.LoadControl(path);

if (data != null)
{
Type viewControlType = viewControl.GetType();
FieldInfo field = viewControlType.GetField("Data");

if (field != null)
{
field.SetValue(viewControl, data);
}
else
{
throw new Exception("View file: " + path + " does not have a public Data property");
}
}

pageHolder.Controls.Add(viewControl);

StringWriter output = new StringWriter();
HttpContext.Current.Server.Execute(pageHolder, output, false);

Step 1: create a httpHandler to generate thumbnails on the fly

<%@ WebHandler Language="C#" Class="Thumbnail" %>

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;

public class Thumbnail : IHttpHandler {
private Regex _nameValidationExpression = new Regex(@"[^\w/]");
private int _thumbnailSize = 150;

public void ProcessRequest(HttpContext context) {
string photoName = context.Request.QueryString["p"];
//if (_nameValidationExpression.IsMatch(photoName)) {
// throw new HttpException(404, "Invalid photo name.");
//}
string cachePath = Path.Combine(HttpRuntime.CodegenDir, photoName + ".square.png");
if (File.Exists(cachePath)) {
OutputCacheResponse(context, File.GetLastWriteTime(cachePath));
context.Response.WriteFile(cachePath);
return;
}
string photoPath = context.Server.MapPath("~/Files/CBPLibrary/" + photoName );
Bitmap photo;
try {
photo = new Bitmap(photoPath);
}
catch (ArgumentException) {
throw new HttpException(404, "Photo not found.");
}
context.Response.ContentType = "image/png";
int width, height;
if (photo.Width > photo.Height) {
width = _thumbnailSize * photo.Width / photo.Height;
height = _thumbnailSize;
}
else {
width = _thumbnailSize;
height = _thumbnailSize * photo.Height / photo.Width;
}
Bitmap target = new Bitmap(_thumbnailSize, _thumbnailSize);
using (Graphics graphics = Graphics.FromImage(target)) {
graphics.CompositingQuality = CompositingQuality.HighSpeed;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.CompositingMode = CompositingMode.SourceCopy;
graphics.DrawImage(photo, (_thumbnailSize - width) / 2, (_thumbnailSize - height) / 2, width, height);
using (MemoryStream memoryStream = new MemoryStream()) {
target.Save(memoryStream, ImageFormat.Png);
OutputCacheResponse(context, File.GetLastWriteTime(photoPath));
using (FileStream diskCacheStream = new FileStream(cachePath, FileMode.CreateNew)) {
memoryStream.WriteTo(diskCacheStream);
}
memoryStream.WriteTo(context.Response.OutputStream);
}
}
}

private static void OutputCacheResponse(HttpContext context, DateTime lastModified) {
HttpCachePolicy cachePolicy = context.Response.Cache;
cachePolicy.SetCacheability(HttpCacheability.Public);
cachePolicy.VaryByParams["p"] = true;
cachePolicy.SetOmitVaryStar(true);
cachePolicy.SetExpires(DateTime.Now + TimeSpan.FromDays(365));
cachePolicy.SetValidUntilExpires(true);
cachePolicy.SetLastModified(lastModified);
}

public bool IsReusable {
get {
return true;
}
}
}

The above code creates a thumbnail from image and cache it in asp.net temporary files directory.

Step 2: The next task is to show images and then create a popup that displays the actual image on thumbnail click


<script language="javascript" type="text/javascript">

$(document).ready(function () {

$("a[rel=gallery]").fancybox({

'transitionIn': 'elastic',

'transitionOut': 'elastic',

'easingIn': 'easeOutBack',

'easingOut': 'easeInBack'

});

});

</script>

The above script is using the fancy box jquery plugin to display actual image.

Step 3: Create html to show thumbnail images

<a rel=”gallery” href=”../files/cbplibrary/382c3379-1.jpg”>

<img src=”../Thumbnail.ashx?p=382c3379-1.jpg” alt=”" />

</a>

) x ON eventforecast.id = x.id


To Configure it in your website

1. Download the latest dll from http://code.google.com/p/elmah/ and place it in bin folder of your application.
2. Add following configurations to your website’s web.config or machin.config if you want to enable it for all websites.

<configSections>
    <sectionGroup name="elmah">
        <!-- NOTE! If you are using ASP.NET 1.x then remove the
             requirePermission="false" attribute from the section
             elements below as those are only needed for
             partially trusted applications in ASP.NET 2.0 -->
        <section name="security" requirePermission="false" type="Elmah.SecuritySectionHandler, Elmah"/>
        <section name="errorLog" requirePermission="false" type="Elmah.ErrorLogSectionHandler, Elmah" />
        <section name="errorMail" requirePermission="false" type="Elmah.ErrorMailSectionHandler, Elmah" />
        <section name="errorFilter" requirePermission="false" type="Elmah.ErrorFilterSectionHandler, Elmah"/>
    </sectionGroup>
</configSections>

<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
        <add name="Elmah.ErrorLog" type="Elmah.ErrorLogModule, Elmah" preCondition="managedHandler" />
        <add name="Elmah.ErrorFilter" type="Elmah.ErrorFilterModule" preCondition="managedHandler" />
        <add name="Elmah.ErrorMail" type="Elmah.ErrorMailModule" preCondition="managedHandler" />
    </modules>
    <handlers>
        <add name="Elmah" path="elmah.axd" verb="POST,GET,HEAD" type="Elmah.ErrorLogPageFactory, Elmah" preCondition="integratedMode" />
    </handlers>
</system.webServer>





});
}