Monday, September 5, 2011

elycharts Part 2 of 2 (ASP .NET WebForms)


The main goal here is to create a N-Tier VB/C# .NET project counterpart for the previous web application which is written on PHP. The architecture will involved a simple business tier and presentation tier layers.

Let's begin!...
1.) On Visual Studio click on to create a 'New Project'. The dialog below will appear, choose Installed Templates > Other Project Types > Visual Studio Solutions then pick Blank Solution. Fill up the Name field as ElyCharts and hit OK.


2.) Right click on ElyCharts solution, choose Add > New Project.

3.) A dialog will appear, on the Installed Templates choose VB or C# then pick Class Library. Name it as ElyChartsObjects then hit OK. This is the business tier layer.

4.) Repeat # 2.

5.) A dialog will appear, on the Installed Templates expand VB or C#, choose Web, then pick ASP .NET Empty Web Application. Name it as ElyChartsAspNet then hit OK. This is the presentation tier layer.


6.) Start adding items on each project.

       6.1) ElyChartsObjects -Add Classes namely chart, legend, tooltips, values.

       6.2) ElyChartsAspNet -Add a single WebForm name Default
              Add a Folder name Scripts and another Folder inside name lib,
              Inside Scripts add a JavaScript name tmpl.js (copy & paste the source code from the previous php web application).
              Download elycharts.min.js, jquery-1.6.2.min.js and raphael-min.js then place it on Scripts/lib folder.

      The solution should look like below. L => VB, R => C#.
 
7.) Right click the ElyChartsAspNet project choose Add Reference..., A dialog will appear with the ElyChartsObjects project selected. Hit OK.

8.) Start coding for the ElyChartsObjects, below are POCO good for later json serialization.




9.) Start coding for the ElyChartsAspNet, below is the code-behind and markup of Default
We use JavascriptSerializer.Serialize to convert the 'chart' instance to JSON.


10.) Right click the ElyChartsAspNet project > Set as StartUp Project then hit F5.
 
11.) Output should look like below.

1 comment:

  1. Hi, I'm trying to use elycharts together with an updatepanel and timer and getting nowhere! everytime the timer ticks the chart disappears.

    Could you help with what I might be doing wrong?

    ReplyDelete