Editorial Note
This article appears in the Third Party products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way,shape or form .please report any spam or advertising.
Introduction
In this article,we demonstrate how to easily achieve identical setup -data visualization. with two different approaches-one using a javascript client side component and the other one using am ASP.NET server-side control, The sample uses chart Components from ShieldUI,which are freely available from their site.
Background
often times, when one is using UI components,he is limited to one technology or IDE ,While this is not a problem in itself ,there may be occasions when flexibility is requried .For example when a new developer or team start collaborating on a project ,or the project requirements change.Using a client side component, and its server-side counterpart is one solution to the problem. The screenshot below demonstrates both controls on the same page , with identical rendered layout:
Additionally ,both server and client/javascript components have their advantages and disadvantages when coding .for example, the server-side ASP.NET component provides the comfort of working in Visual Studio,as opposed to directly coding in javascript
Using the code
we start off by creating a new Visual Studio 2010 application .It will include the follwing required elements;
1.An .aspx page,which will host both the client and server components
2 the shield.Web.UI DLL ,which will be required in order to use the ASP.NET server-side component
3. the js files,necessary for the client side component
The structure of the project may look similar to this;
all required files are included in the working sample at the top of the article.
from a coding perspective , the fist task at hand is to inculde the script and css files for the client side component,which we will be adding first. this can be done in the head section of the .aspx page and looks like this:
the next step is to add the javascript code ,which will initialize the component and render it to the page. This is done easily , and requires a javascript tag and a div (which will host the actual chart) nested within the page.This is demonstrated in the code sample below:
the code is pretty straightforward-it initializes the chart with numeric range values on a datetime interval.all of the data passed to the control is visible in the "dataseries" object .The next step in our demonstration is to introduce the server-side chart .it will render identical data and visualization.However .its code is much different.For the ASP.NET chart ,we start by adding a reference to the ShieldWeb.UI DLL,and registering it on the .aspx page:
Subsequent to this ,we need to enable certain setting for the control ,in order to have the same layout as in the client-side chart. This is demonstrated in the code snippet below:
The only thing missing from the .aspx code above is the data for the control In the client side component it was passed directly to the component in the script which created it .The asp.net server component, however ,is populated with data in a diferent manner .This is done in the code-behind of our ASPX page .For this purpose we use the "TakeDataSource" event handler ,In addition to this ,in the Page_Load event handler ,we adjust the data start and end intervals ,All of this is demonstrated, in the snippet below:
This completes our setup , the two charts are rendered identically on page ,Which way we use to handle our data visualization tasks is up to us .having flexibity,however makes development easier.