REPORT

Summer Project Report
Bachelor of Technology (B.Tech)
By
Rahul Kumar
June 2016
DASHBOARD
APPLICATION USING
BOOTSTRAP

Acknowledgement
This report gives the details of the project work done at the end
of 4th
semester during the summer vacation for partial
fulfilment of the requirements for the degree of Bachelor of
Technology (B.Tech), under the Supervision of Ms. Akriti. I
am very grateful to my supervisor Akriti for her help and able
guidance for the project. I am very thankful to Shavak Nanavati
Technical Institute (SNTI), which caters to the technical
training requirement of Tata Steel, for providing me resources
and facilities to help in the project. I would also like to thank
Tata Steel for granting me such a wonderful opportunity.
____________________
Signature of the Student
Name: Rahul Kumar
Date: 27/06/2016

TABLE OF CONTENTS
1.INTRODUCTION TO DASHBOARD
2.BOOTSTRAP
3.FUSION CHARTS
4.GETTING STARTED WITH VISUAL STUDIO
5.STEPS INVOLVED
6.CONCLUSION

INTRODUCTION TO DASHBOARDS
 Dashboards give you the big picture, letting you see your key metrics at a glance.
 Dashboard reports allow managers to get high-level overview of the business and help
them make quick decisions.
 Dashboards are often called as management dashboards or information dashboards or
dashboard reports.
 Dashboard is usually the one page that the users see first thing in the web application.
 It is the page that shows the analysis of the application’s data, trends, summaries etc.
In many cases it dynamically reports important pieces of data from the web application.
 From the Dashboard the users can drill down to get more information about a particular
piece of data.
 Dashboards are Not Reports
 The general thinking that goes into any Dashboard design is that it is all about showing
analytics, trends and summaries of the data in the web application using various charts
and diagrams.
 A good example of this is Google Analytics which shows you the details of the traffic
coming to your website.

A Good Way to Design Dashboards
Dashboards should not only show the summaries, trends and analysis of the application’s data
but should also let the users take action on that data.
If Reports help the users to understand what action is to be taken for the data being presented
then a Dashboard should do the same thing and enable the users to take action on that data.
Think of Dashboards as a superset of Reports.
A good example of this is the WordPress Dashboard, which is the CMS (Content Management
System) behind many of today’s websites.
WordPress nailed the Dashboard Design by not only showing the relevant summaries of the
data but also by letting the users take action on that data.
This Dashboard lets you to quickly see the number of articles you have written and the count
of spam comments. By clicking any link, you can drill down to the relevant page that shows
more information about those articles or comments.
It even lets you to write an article quickly and publish it without having to go to another page.
A good Dashboard should not only show the relevant information quickly to the users but
should also let the users to quickly act on that data.
But there is always an exception…

The Exception
In most of the web applications you should be able to design Dashboards that let the users take
some action on the data.
But some Dashboards are purely meant for displaying information, like the Google Analytics
Dashboard above. There is hardly any action that the users can take on the Google Analytics
data because it is just a reporting tool.
In such kind of Reporting Dashboards you would just show the relevant information without
any actions.
Designing a Good Dashboard
 What data needs to be shown to the users
 How to present that data to the users and
 What actions should you let the users take on the data
 You know the users of your web application very well
 You know the different types of users
Know Your Users
You should have a very good understanding of what questions the users of your web application
will have when they open up your web application.
The Dashboard should be designed to answer those questions.
Aweber is an Email Marketing company that lets you collect email addresses of people who
show interest in hearing more from you.
You can simply create a form asking for name and email address. Anyone who wants to hear
from you can enter their name and email in that form and then those people get subscribed to
your list. You can then send out any announcements to this list of people.

Dashboards should always answer the questions that users will want to get answered on
landing inside the web application.
The next thing that the Dashboard should do is to let the users quickly take the most frequently
used action right away.
Letting the users take the most frequently used action from the Dashboard itself saves a lot of
time.
Know the Types of Users
Almost every business web application is used by different types of people. Before starting the
design of your web application, you should have done user classifications and found out the
different types of users of your web application.
For businesses, usually this classification is on the basis of the business roles.
Now suppose you are designing a web application that sells tickets to the employees of a
company for the various Events conducted by the company.
The employees interested in purchasing the tickets to the Events would want to see the list of
Events upfront while the Managers might want to see how many of their reportees are going to
various Events. Similarly, the Vice President may want to see the revenue collected for the
Events.
Different types of users will have different needs.

To meet the needs of the various types of users, you need to display different Dashboards to
them.
Yes, it is more work but then it is not a good idea to display the same Dashboard to all users
and then let them drill down to get the information they are looking for. It just won’t give a
better user experience.
Now that you know the users and the needs of different types of users, you will find it easy to
figure out what data to display on the Dashboard, how to display it and the actions that you can
let the users take on that data.
Visual Design of Dashboards
It is extremely important to have a good visual design of the Dashboard. If you are to put efforts
in beautifying your web application, then put it in beautifying the Dashboard.
Dashboard is something that usually finds it way in all the sales and marketing materials. It is
one thing that will represent your application. So it better be good.
Apart from that, a visually good Dashboard is usually easy to read and understand.

The design of the Dashboard can get really complex if you are designing a web application that
will eventually be used by people in various departments of an organization.
The needs of so many people are going to vary a lot.
In such cases, you are bound to think of designing a Dashboard that the users can customize
on their own to see the data that they are interested in. You could let the users drag and drop
various data widgets on the Dashboards as well as let them configure what data should be
displayed in each widget.
Such kind of a Dashboard can easily meet the needs of almost every user.

There are 3 main reasons for not building a customizable Dashboard:
1. It just shows that you are not really aware of the needs of your users, which is very big
question mark on why you are designing the web application in first place.
2. Probably you do not realize that the amount of work needed for designing, coding and
testing such an interface is huge. You need to think of every possible scenario of what
happens when the drag is unsuccessful, layout issues of each widget, how to let the users
display the data they want to see etc.
3. The need for a Customizable Dashboard can quickly be overcome by designing different
Dashboards for different types of users.
The Broader Picture
A well-designed Dashboard can really add a lot of value to the users of your web application.
It will give them a way to quickly see the important business metrics and take action to improve
those metrics.
But designing web applications that are to be used by businesses is more work than just
designing the Dashboards. Reasons being the needs of businesses are different from general
public and so the web applications too have to be designed differently.

BOOTSTRAP
Overview
 Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework for faster
and easier web development. It uses HTML, CSS, and JavaScript.
 Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released
as an open source product in August 2011 on GitHub.
 Bootstrap package includes: Scaffolding, CSS, Components,
JavaScript Plugins, Customize
Advantages of Bootstrap:
 Mobile first approach
 Browser Support
 Easy to get started
 Responsive design
 An open source
GRID SYSTEM :
 In graphic design, a grid is a structure (usually two-dimensional) made up of a series of
intersecting straight (vertical, horizontal) lines used to structure the content. It is widely
used to design layout and content structure in print design. In web design, it is a very
effective method to create a consistent layout rapidly and effectively using HTML and
CSS.
 Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales
up to 12 columns as the device or viewport size increases. It includes predefined classes
for easy layout options, as well as powerful mixings for generating more semantic
layouts.
 Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by
targeting smaller screens like mobile devices, tablets, and then “expands” components
and grids for larger screens such as laptops, desktops.
Working of Bootstrap Grid System:
 Rows must be placed within a .container class for proper alignment and padding.
 Use rows to create horizontal groups of columns.

 Content should be placed within the columns, and only columns may be the immediate
children of rows.
 Predefined grid classes like. row and. col-xs-4 are available for quickly making grid
layouts. LESS mixings can also be used for more semantic layouts.
 Columns create gutters (gaps between column content) via padding. That padding is
offset in rows for the first and the last column via negative margin on. rows.
 Grid columns are created by specifying the number of twelve available columns you
wish to span. For example, three equal columns would use three. col-xs-4.
Grid systems are used for creating page layouts through a series of rows and columns that house
your content. They include: Media Queries, Responsive Column Resets, Offset columns,
Nesting columns, Column ordering
CSS OVERVIEW:
HTML5 doctype: Bootstrap makes use of certain HTML elements and CSS
properties that require the use of the HTML5 doctype.
Mobile First: Since Bootstrap 3 has been launched, Bootstrap has become
‘mobile first’. It means mobile first styles can be found throughout the entire
library instead of them in separate files. You need to add the viewport meta tag
to the <head> element, to ensure proper rendering and touch zooming on mobile
devices.
Responsive Images:Bootstrap 3 allows you to make the images responsive by
adding a class .img-responsive to the <img> tag. This class applies max-width:
100%; and height: auto; to the image so that it scales nicely to the parent
element.
Typography and Links: Bootstrap sets a basic global display (background),
typography, and link styles including: Basic Globaldisplay, Typography, Link
styles
Normalize: Bootstrap uses Normalize to establish cross browser consistency.
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small
CSS file that provides better cross-browser consistency in the default styling of
HTML elements.
Containers: Use class .container to wrap a page's content and easily centre the
content's as shown below.
TYPOGRAPHY: Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-
serif in its default font stack. Using typography feature of Bootstrap, you can

create headings, paragraphs, lists and other inline elements in sections like
Headings, Inline Subheadings, Lead Body Copy, Abbreviations, Addresses,
Blockquotes Lists like Ordered lists, Unordered lists, Definition lists.
CODE:Bootstrap allows you to display codewith two different key ways using
<code> tag to display codeinline and the <pre> tag to display a standalone block
element or if it has multiple lines.
TABLES: Bootstrap provides a clean layout for building tables. Some of the
table elements supported by Bootstrap are: <table>, <thead>, <tbody>, <tr>,
<td>, <th>, <caption>
Types of tables are: Basic, bordered, hover, condensed, responsive table
FORMS:
Form Layout: Bootstrap provides you with following types of form layouts:
Vertical (default) form, Inline form, Horizontal form
Supported Form Controls:Bootstrap natively supports the most common form
controls mainly input, textarea, checkbox, radio, and select.
Form Control States: In addition to the: focus (i.e., a user clicks into the input
or tabs onto it) state, Bootstrap offers styling for disabled inputs and classes for
form validation. Input Focus, Disabled Inputs, Disabled Fieldsets
Validation States:Bootstrap includes validation styles for errors, warnings, and
success messages. To use, simply add the appropriate class (.has-warning, .has-
error, or .has-success) to the parent element.
IMAGES:
 Bootstrap provides three classes that can be used to apply some simple
styles to images: img-rounded, .img-circle, .img-thumbnail.
 Helper classes includes: CLOSE ICON, CARETS, QUICK FLOATS,
Center Content Blocks, Clearfix, Showing and Hiding Content, Screen
Reader Content
RESPONSIVE UTILITIES: Bootstrap provides some handful helper classes
for faster mobile-friendly development. These can be used for showing and
hiding content by device via media query, combined with large, small, and
medium devices. Use these sparingly and avoid creating entirely different
versions of the same site. Responsive utilities are currently only available for
block and table toggling.

GLYPHICONS are icon fonts which you can use in your web projects.
Glyphicons Halflings are not free and require licensing, however their creator has
made them available for Bootstrap projects free of cost.
DROPDOWN MENUS are toggle able, contextual menus for displaying links
in a list format.
BUTTON GROUPS allow multiple buttons to be stacked together on a single
line. This is useful when you want to place items like alignment buttons together.
You can add on optional JavaScript radio and checkbox style behaviour with
Bootstrap Button Plugin.
INPUT GROUPS are extended Form Controls. Using input groups, you can
easily prepend and append text or buttons to the text-based inputs.
By adding prepended and appended content to an input field, you can add
common elements to the user’s input. For example, you can add the dollar
symbol, the @ for a Twitter username, or anything else that might be common
for your application interface.
 To prepend or append elements to a .form-control:
 Wrap it in a <div> with class .input-group.
 As a next step, within that same <div>, place your extra content inside a
<span> with class .input-group-addon.
 Now place this <span> either before or after the <input> element.
NAVIGATION ELEMENTS: Bootstrap provides a few different options for
styling navigation elements. All of them share the same markup and base class,
.nav. Bootstrap also provides a helper class, to share markup and states. Swap
modifier classes to switch between each style. Navigation elements include
TABULAR NAVIGATION OR TABS, PILLS NAVIGATION, DROPDOWNS.
NAVBAR is one of the prominent features of Bootstrap sites. Navbars are
responsive ‘meta’ components that serve as navigation headers for your
application or site. Navbars collapse in mobile views and become horizontal as
the available viewport width increases. At its core, the navbar includes styling for
site names and basic navigation. It includes DEFAULT NAVBAR,
RESPONSIVE NAVBAR, FORMS IN NAVBAR, BUTTONS IN NAVBAR.
BREADRUMBS area great way to show hierarchy-based information for a site.
In the case of blogs, breadcrumbs can show the dates of publishing, categories,
or tags. They indicate the current page's location within a navigational hierarchy.
A breadcrumb in Bootstrap is simply an unordered list with a class of
.breadcrumb. The separator is automatically added by CSS (bootstrap.min.css)

BADGES aresimilar to labels; the primary difference is that the corners are more
rounded. Badges are mainly used to highlight new orunread items. To usebadges
just add <span class="badge"> to links, Bootstrap navs, and more.
JUMBOTRON. As the name suggest this componentcan optionally increase the
size of headings and add a lot of margin for landing page content. To use the
Jumbotron:
 Create a container <div> with the class of .jumbotron.
 In addition to a larger <h1>, the font-weight is reduced to 200px.
The PAGE HEADER is a nice little feature to add appropriate spacing around
the headings on a page. This is particularly helpful on a web page where you may
have several posttitles and need a way to add distinction to each of them. To use
a page header, wrap your heading in a <div> with a class of .page-header.
THUMBNAILS. A lot of sites need a way to lay out images, videos, text, etc.,
in a grid, and Bootstrap has an easy way to do this with thumbnails. To create
thumbnails using Bootstrap:
 Add an <a> tag with the class of .thumbnail around an image.
 This adds four pixels of padding and a gray border.
 On hover, an animated glow outlines the image.
ALERTS provide a way to style messages to the user. They provide contextual
feedback messages for typical user actions. You can add an optional close icon
to alert. For inline dismissal use the Alerts jQuery plugin.
You can add a basic alert by creating a wrapper <div> and adding a class of .alert
and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-
warning, .alert-danger).
The purpose of PROGRESS BARS is to show that assets are loading, in
progress, or that there is action taking place regarding elements on the page.
Progress bars use CSS3 transitions and animations to achieve some of their
effects.
MEDIA OBJECT:These are abstractobject styles for building various types of
components (like blog comments, Tweets, etc.)that feature a left-aligned or right-
aligned image alongside the textual content. The goal of the media object is to
make the code for developing these blocks of information drastically shorter
(light markup, easy extendability) which is achieved by applying classes to some
of the simple markup. There are two forms to the media object:
.media: This class allows to float a media object (images, video, and audio) to
the left or right of a content block.

.media-list: If you are preparing a list where the items will be part of an
unordered list, use a class useful for comment threads or articles lists.
The purpose of LIST GROUP COMPONENT is to render complex and
customized content in lists. To get a basic list group:
 Add the class .list-group to element <ul>.
 Add class .list-group-item to <li>.
PANELCOMPONENTSare used when you want to put your DOM component
in a box. To get a basic panel, just add class .panel to the <div> element. Also
add class .panel-default to this element as shown in the following example:
A WELL is a container in <div> that causes the content to appear sunken or an
inset effect on the page. To create a well, simply wrap the content that you would
like to appear in the well with a <div> containing the class of .well.
COMPONENTS are just the beginning. Bootstrap comes bundled with 12
jQuery plugins that extend the features and can add more interaction to your site.
To get started with the Bootstrap’s JavaScript plugins, you don’t need to be an
advanced JavaScript developer. By utilizing Bootstrap Data API, most of the
plugins can be triggered without writing a single line of code.
Bootstrap Plugins can be included on your site in two forms:
 Individually: Using Bootstrap's individual *.js files. Some plugins and
CSS components depend on other plugins. If you include plugins
individually, make sure to check for these dependencies in the docs.
 Compiled (all at once): Using bootstrap.js or the minified
bootstrap.min.js.
A MODAL is a child window that is layered over its parent window. Typically,
the purpose is to display content from a separate source that can have some
interaction without leaving the parent window. Child windows can provide
information, interaction, or more.
The SCROLLSPY (auto updating nav) plugin allows you to target sections of
the page based on the scroll position. In its basic implementation, as you scroll,
you can add .active classes to the navbar based on the scroll position.
TOOLTIPS areuseful when youneed to describea link. Theplugin was inspired
by jQuery.tipsyplugin written by Jason Frame. Tooltips have since been updated
to work without images, animate with a CSS animation, and data-attributes for
local title storage.

The POPOVER is similar to tooltip, offering an extended view complete with a
heading. For the popover to activate, a user just needs to hover the cursor over
the element. The content of the popover can be populated entirely using the
Bootstrap Data API. This method requires a tooltip.
ALERT MESSAGES aremostly used to display information such as warning or
confirmation messages to the end users. Using alert message plugin you can add
dismiss functionality to all alert messages.
COLLAPSE PLUGIN makes it easy to make collapsing divisions of the page.
Whether you use it to build an accordion navigation or content boxes, it allows
for a lot of content options.
The Bootstrap CAROUSEL is a flexible, responsive way to add a slider to your
site. In addition to being responsive, the content is flexible enough to allow
images, iframes, videos, or just about any type of content that you might want.
The AFFIXPLUGIN allows a <div> to become affixed to a location on the page.
You can also toggle it's pinning onand off using this plugin. A common example
of this are social icons. They will start in a location, but as the page hits a certain
mark, the <div> will belocked in place and will stop scrolling with the rest of the
page.

FUSION CHARTS
As web developers, we build applications that feed on data. We parse it,
process it and report it. Our reports take the form of tables, grids, and diagrams
such as charts, gauges, and maps. Parsing and processing are backend tasks
that are unseen by the user. The actual reporting of data, however, is the bulk
of the experience a user has with our application.
To make our reports interesting and insightful, it is important to provide a highly engaging and
functional face to the data in context. While tables, grids, and basic charting are natively
supported by most web scripting ng languages, creating advanced or interactive charts require
the use of third-party components.
Fusion Charts Suite is one such suite of components that help you deliver a
delightful experience by aiding the creation of animated and interactive charts,
gauges, and maps.
Following steps are to be taken:
 Set up Fusion Charts
 Build a sample and configure basic parameters
 Understand the Extensible Markup Language (XML) and JavaScript Object Notation
(JSON) data format supported by Fusion Charts and different ways to provide it to the
chart
 Build charts with multiple series and axes
 Create advanced charts such as Combination charts
Fusion Charts Suite is a collection of four products FusionCharts XT, FusionWidgets XT,
PowerCharts XT, FusionMaps XT each of which help generate different types of charts,
gauges, or maps in web applications. These data-visualization components are ideal for use
within reports, dashboards, analytics, surveys, and monitors in web and enterprise applications.
The visualizations are rendered using both Adobe Flash and JavaScript (HTML5)
Technically, there are three steps to build a chart using FusionCharts:
1. Set up Fusion Charts for the entire application, typically done only once
per application.
2. Encode the data for the chart, either in XML or JSON format.
3. Write the HTML and JavaScript code to include the chart in a web page.
Getting FusionCharts
FusionCharts allows you to download the trial version from its website
http://www.fusioncharts.com. This trial does not have any feature restriction or an
expiry date. The only caveat is that the charts in the evaluation version have FusionCharts
printed on the chart, which can be removed by purchasing a license of FusionCharts and later
just replacing the Shockwave (SWF) and JavaScript (JS) files.
1. Go to http://www.fusioncharts.com/download and fill in your particulars in
the download form and click on Download.
2. On the next page, you will find links to either download the entire FusionCharts
Suite, or individual products from the suite. In this chapter, we will work with
FusionCharts XT only and hence will explore that.

3. Once the ZIP fi le has been downloaded, extract it to a folder on your hard drive,
which is conveniently located at C:FusionChartsSuiteFusionChartsXT on
Windows or Users/{YourName}/FusionChartsSuite/FusionChartsXT on
Mac or UNIX based systems. Throughout this book, we will refer to this folder as the
FusionCharts Installation Folder.
Creating a sample chart:
In our examples, we will create charts for a fictional supermarket, Harry's SuperMart, so
that Harry, the owner of the supermarket, can make more sense out of his data. Harry's
SuperMart, with 11 stores located in four states in the US, offering over 2,000 types of
products and a customer base of around 25,000, records an intensive amount of data, which
when presented effectively gives a lot of actionable insights. We will learn how to build
meaningful charts that can facilitate this. For our first chart, let us build a simple Revenue by
Year chart.
Once completed, the chart should look similar to the following screenshot:
Steps to create a chart using FusionCharts
Fundamentally, for each chart you build, you should ask yourself the following questions to
ensure that the chart serves a meaningful purpose, as opposed to just being a fancy object
on the page:
 Who will view this chart and why will this data interest him? This person is the
end user.
 What type of chart is best suited to represent this data? Are there any alternate
charts that we can use?
 Is this chart part of a bigger report/dashboard, or standalone? This helps us decide
how to split information across multiple charts.
Thereafter, technically, there are three steps to build a chart using FusionCharts:
1. Set up FusionCharts for the entire application, typically done only once
per application.
2. Encode the data for the chart, either in XML or JSON format.
3. Write the HTML and JavaScript code to include the chart in a web page.

Converting the chart to a pure JavaScript chart
By default, FusionCharts renders its charts using Adobe Flash. However, as you have seen
earlier, when you view the chart on iPads or iPhones, FusionCharts automatically switches
to JavaScript rendering, as Flash is not supported on those devices. This is internally checked
by FusionCharts.js, and the auto-loaded files FusionCharts.HC.js, FusionCharts.
HC.Charts.js, and jquery.min.js then aid in rendering the chart using JavaScript, using
the same datasource and configuration.
FusionCharts also provides an option to entirely skip Flash rendering and use JavaScript as
the default rendering, irrespective of the device. This feature can be very nifty for developers
who want to develop JavaScript-only applications or even frameworks.
Creating JavaScript only charts
1. Create a copy of our FirstChart.html in the same location and name it as
JavaScriptChart.html.
2. Add the following lines of code, as highlighted, before the constructor.
<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">

</script>
</body>
</html>
3. Open the page in a browser. You should see the same chart as earlier, but this time
rendered using JavaScript.
Build a dashboard for Harry
Convert the existing chart to a Column 2D chart and add the following three charts to this page.
In addition, specify different width and height for each chart to accommodate the amount of
data it presents, and also place them in order of importance of the chart to Harry.
 A Line 2D chart, using Line.swf, comparing monthly revenues for this year.
For this, you need to create an XML data with the <set> element for each month
of the year.
 A Pie 2D chart, using Pie2D.swf, showing the composition of expenses of this year
split under these categories: Salary, Cost of Goods, Marketing Costs, Overheads, and
Administration.
 A Column 2D chart, using Column2D.swf, showing the top five salespersons for
the year.

Using the Data String method to provide data
As we had mentioned earlier, there are two ways to provide data to FusionCharts – either as
a URL to the datasource (Data URL method ), or as a string (Data String method). In order to
pass the XML as a string to the chart, we can use the setXMLData() method.
Embedding XML in the web page and using the Data String method
1. Create a copy of our FirstChart.html in the same location and name it as
DataStringMethod.html.
2. Change the following lines in code, as highlighted:
<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">

</script>
</body>
</html>
3.Open the page in a browser.
Using JSON data with FusionCharts
JSON is a lightweight and simple data format derived from JavaScript. The data structure is
language-independent, with encoders and parsers available for virtually every programming
language. FusionCharts allows you to provide JSON data to the chart either as a URL using
the setJSONUrl() method or as a string using the setJSONData() method . Before we
use these methods, let us convert our previous data from XML format to JSON format to
understand this format. To do this, we will use the FusionCharts Data Format Conversion
Tool that comes in the FusionCharts download package.
Converting FusionCharts XML format to JSON
1. Launch the FCDataConverter tool from the FusionCharts Installation Folder |
Tools | FCDataConverter | Index.html.
2. Once the page has fi nished loading, in the text area on the left , titled FusionCharts
XML Data, paste the XML data that we had previously created for Revenue by Year chart.

3. Click on the Convert to JSON button present below it.
Combination charts
Combination charts let you combine two or more chart types in a single chart, for example, a
column chart series and a line chart series. This is done either to highlight specific data series
by rendering, or to mix different types of data series on the same chart. There are two types
of combinati on charts possible in FusionCharts.
The first type, called Single Y-axis combination charts, have a single y-axis and all the data
series conform to it. Some charts in this category are MSCombi2D.swf, MSCombi3D.swf,
MSColumnLine3D.swf, and so on. As an example, if you wish to plot the actual revenue
versus the projected revenue on a chart, as both the series have the same unit (currency)
and magnitude, we plot them against the same axis. However, as the focus is on the actual
revenue, it should be plotted using column or area, and the projected revenue can be plotted
using lines to show it as guidance.
The second type, called Dual Y-axes combination charts, have two y-axes, each having its
own units and magnitude. These charts have the abbreviation DY in their name, for example,
MSCombiDY2D.swf or MSColumn3DLineDY.swf. Consider a chart where you are plotting
the revenue of a company versus the units (quantity) sold. As both the series represent
different units, they need to be plotted on different axes. The primary axis can represent
the sales, and the second used for units sold. Conventionally, you would represent the sales
using columns plotted against the primary axis on the left side of the chart, and the units
sold using lines plotting against the secondary axis on the right side of the chart.

Getting Started with Visual Studio 2012
Visual Studio 2012 gives you the power you need to provide a continuous flow of value to your
business. You can use the Visual Studio product family to involve stakeholders in projects
early in the process. By developing in an agile style, you ensure that you continue to meet the
needs of the business and therefore continue to add value. Visual Studio enables you to develop
applications for a multitude of devices, which expands your potential base of users. You can
also use Visual Studio to create highly scalable services for your applications and web sites.
Support for a flexible infrastructure ensures that your applications and supporting services can
grow with your user base.
Features involved:
 New user interface
 Project compatibility
 Managing the environment
 Quick launch
 Quick find
 Updated add Reference Dialog
 Search enabled toolbox
 Error List
 Navigating and Understanding Solutions
 Documenting tab well
 Solution explorer

Visual Studio 2012 incorporates thousands of improvements for developers that make it easier
to be productive, to collaborate seamlessly within teams, and to focus on creating value for end
users. The core development environment has been revamped and refined based on developer
feedback. New technologies have been added to the .NET Framework, bringing critical
improvements to familiar languages including Visual C#, Visual Basic®, Visual
F#, and ASP.Net, as well as adding new standards-based support for C++ and JavaScript. Of
course, Visual Studio continues to provide a support environment for Python™, Ruby™, and
many other languages. Visual C# and Visual Basic developers also benefit from an additional
project template, enabling them to create Windows Runtime components.
What’s new in Visual C#
Visual C# has been extended and enhanced to take advantage of the new features provided by
the .NET Framework 4.5. Examples include :
• Built-in support for writing methods that can perform tasks asynchronously through the async
method modifier and the await operator.
<CODE>
async Task<int> GetSizeAsync(string url)
{
var client = new HttpClient();
string data = await client.GetStringAsync(url);
return data.Length;
}
</CODE>
• Caller information attributes, which identify the source code path, source code line, and
member name of the caller during development and debugging, or to create a diagnostic
application.
38

<CODE>
public string GetCallerDetails([CallerFilePath] string file = “”,
[CallerLineNumber] int line = 0,
[CallerMemberName] string member = “”)
{
return string.Format(“File path: {0}, Line: {1}, Member name:
{2}”, file, line, member);
}
</CODE>
• Parallel compilation, which helps to shorten project build times.
What’s new in ASP .NET
The features available to AS P.NET have been extended to incorporate the new application
models and development technologies for building web applications.
• Client-side validation. Visual Studio also adds support for JavaScript form validation to
ASP.NET web forms. This feature previously existed for Model View Controller (MVC)
developers.
<CODE>
public class SimpleModel
{
public SimpleModel() { }
[Required]
[StringLength(40)]
public string Name { get; set; }
}
</CODE>
43
• Model binders. Visual Studio adds support for binding controls to properties of a model in
ASP.NET web forms applications. This is similar to the functionality previously available to
MVC developers.
<CODE>
<asp:GridView ID=”customerDeatils” runat=”server”
ModelType=”SimpleModel” SelectMethod=”GetModel”
AutoGenerateColumns=”false”>
<Columns>
<asp:BoundField DataField=”Name” HeaderText=”Customer Name” />
</Columns>
</asp:GridView
</CODE>
• CDN fallback support. Visual Studio adds support for loading resources from a content
delivery network (CDN) in order to improve page load time. CDNs typically have very high
bandwidth, and users may have copies of files served by an application cached locally.
Developers can specify files hosted on CDNs. However, developers often have no

control over a CDN, and files may change. Developers can use the EnableCdn property of the
ScriptManager control to verify that resources loaded from a CDN function correctly, but to
load a local copy of the resource if it fails.
44
Full HTML5 support, including semantic elements such as email, tel, and url.
• Page Inspector. Page Inspector enables you to open a web page within Visual Studio. By
using the Page Inspector, developers can make live changes to the DOM and edit CSS rules.
When they achieve the desired result, developers can easily copy these changes to the correct
source file.
• OAuth and OpenID support. Using these features, you can create sites and permit users to
sign in with credentials from other sites, including Google, Yahoo, Facebook, Twitter, and
Microsoft account.
• IIS Express. IIS Express provides a hosting environment based on IIS that developers can use
to test and debug web applications. Visual Studio 2012 includes IIS Express as the default web
server for debugging web applications. Using IIS Express ensures that developers can use
features such as SSL while debugging.
• Local DB, a lightweight database engine that runs in the context of the current user, reducing
configuration effort in the development environment. LocalDB provides a featureset
that is fully compatible with SQL Server and SQL Azure, making it simple to migrate from the
development environment to production.
• Support for unhandled exceptions in JavaScript.
• Support for debugging T4 text templates.
DEVELOPING FOR WEB
Web developers use a range of technologies to create interesting, attractive, and interactive
sites. HTML5, CSS3, and JavaScript are the most common technologies used for this purpose

because they support the widest range of web browsers. As JavaScript has matured as a
technology, frameworks such as jQuery have been created to help developers to code faster.
Visual Studio 2012 supports many of these technologies and simplifies the development
process to help developers code faster and to ensure that their code conforms to the latest
standards. Visual Studio 2012 is the tool for web developers who want to create a simple web
application quickly. Equally, Visual Studio 2012 is ideal for a team of professional
Developers working on a large, rapidly evolving web application, because it offers full support
for source control, testing, code reviews, and deployment. In addition to supporting the latest
standards, developers need a modern web platform. Visual Studio 2012 delivers just that by
providing:
• Support for working with data, including simplified development tools that make
development, testing, and debugging easier.
• Support for authentication services from external providers through Open Authorization
(OAUTH).
• Support for mobile devices, including mobile-optimized views and pages.
• Support for hosting sites and services in the cloud with Windows Azure.
Debugging and resolving problems is often a significant part of the development process.
Visual Studio 2012 helps you to find problems faster by offering numerous improvements to
debugging tools, plus new tools that bring browser DOM inspection right into the IDE.
Develop to Standards
Use the latest HTML, CSS, and JavaScript with jQuery
Users accessing a web application employ a variety of browsers. Some browsers support
plugins while others don’t, and all browsers have quirks that affect how they display a site.
Web standards exist to help ensure that web applications look and work correctly regardless of
the browser being used. HTML, CSS, and ECMA scripts are the standards for developing
cross-platform web sites. Previous versions of Visual Studio supported developing web
applications by using these standards, but Visual Studio 2012 extends and significantly
improves this support. Visual Studio 2012 includes full IntelliSense support for HTML5,
making it easier to develop conforming web sites. In addition, the code editor has new
productivity features that simplify web development. For example, Visual Studio 2012 can
automatically correct simple coding mistakes. For example, the following shows how
IntelliSense supports the new HTML5 video element:

Use CSS to Style Your Site
All but the most basic sites require styling, normally accomplished by using CSS. The CSS
editor in Visual Studio 2012 has been updated to support the latest CSS3 standard and
incorporates full IntelliSense. Older browsers typically do not fully or properly support the
W3C standards. Developers expect to include various browser-specific workarounds to
ensure that their sites work correctly in these older browsers. Previously, such workarounds
would be marked as errors in the editor, but Visual Studio 2012 recognizes common browser
workarounds and parses them correctly.Visual Studio 2012 also includes many other
productivity improvements, such as:
• Color picker. Use the new color picker to choose colors while editing CSS. The color picker
includes support for opacity and comparison of two colors.
80
• Snippets. Snippets make it faster for developers to create CSS. Visual Studio 2012 includes
many snippets that can be used out of the box, and a developer can easily define their own
snippets.
81

• Commenting. Use commenting to highlight a section of CSS and place comments within the
code.
• Automatic indentation. The editor automatically indents the CSS hierarchically as it is
developed.
• Region support. Define regions of markup similarly to easily show or hide focus for a specific
section of CSS.
82
• Outline support. Outline sections of code to identify or hide code blocks.
Use jQuery and JavaScript to Make Your Site Interactive and Responsive In addition to
creating visually compelling web applications, developers often need to create highly
interactive and responsive sites. JavaScript is the standard scripting language used by all
modern browsers. Using JavaScript on a web site has many advantages, including:
• Faster responses to user interaction by removing the need for a page refresh every time the
user changes an option or clicks a button.
• Reducing load on a server by pre-validating data in the browser. Data that has already been
validated on the browser often passes any validation required by the web server.
This reduces repeat requests for submitting web forms.

Visual Studio 2012 incorporates the JavaScript engine used in Internet Explorer 9. This parser
significantly improves the accuracy of JavaScript parsing when compared to previous versions
of Visual Studio, and ensures that the behaviour in Visual Studio 2012 matches that of the
browser as closely as possible. Visual Studio 2012 also provides support for script loaders that
can improve page performance and reduce the complexity of developing a site that contains
many JavaScript files. Developers simply select which JavaScript files they
are using, and Visual Studio provides full IntelliSense support regardless of whether the file is
loaded by using a master/layout page or a script loader. In addition to the other changes, the
JavaScript editor in Visual Studio 2012 contains a number of productivity improvements that
align JavaScript with other .NET languages such as Visual C#, including:
83
• Go To Definition. Choose Go To Definition to move the cursor to the object or function
definition, even if it is located in a different file.
• Function overloads. Use JavaScript function overloads to add multiple functions with the
same name. IntelliSense continues to parse code without displaying an error.
• Brace matching. Select an opening or closing brace to automatically highlight the
corresponding closing or opening brace.
• Outlining. You can expand or collapse functions and code blocks to highlight the structure of
your code.
• Smart indenting. The editor automatically indents the script hierarchically, as it is being
written.
• XML documentation comments. Use commenting to add comments to object and function
definitions, and to place comments within the script. Comments are displayed by IntelliSense
when writing code.
Use IntelliSense to Develop with Ease IntelliSense is a key Visual Studio feature that has
been enhanced in Visual Studio 2012.
IntelliSense can make a developer significantly more productive by reducing the time spent
typing and by providing a list of options from which a developer can choose. This reduces the
need for the developer to refer back to the object definition for the correct property name and
casing. In some cases, the list of options can be overwhelming. An auto-reduce feature (as they
type, developers are prompted with a shrinking list of appropriate possibilities for matching
property names) has been extended to support HTML, JavaScript, and CSS. Visual Studio 2012
includes more triggers for IntelliSense, helping to ensure that coding help is displayed
whenever it may be useful. Also, shortcuts in IntelliSense further reduce effort by providing
fast access to common properties.
4
Easily Develop Sites
.NET developers building a web site typically choose between an ASP. NET Web Forms
project or a Model View Controller (MVC) project. In MVC applications, developers define
classes that describe the data being used by the page (this is the model). Views define the
interface seen by the user, and a developer or designer can change a view without changing
any other code. Application logic is handled by the controller. This approach separates
application logic from views, making for a maintainable web application. Controls in the view
are bound to properties of the model at runtime. The developer does not need to write code to
perform the binding because it is handled by the framework. Developers using Web Forms
previously had to write code to bind controls to properties. However, in Visual Studio 2012
developers and designers can use object binding in Web forms applications,

simplifying the code and reducing repetitive development work. While developers could
always write their own JavaScript code to validate user input on the client, MVC provides a
simple syntax to annotate a control without needing to write custom code. Visual Studio 2012
brings this power to ASP.NET Web Forms. With previous versions of Visual Studio,
MVC developers could simply annotate properties in a model and the framework would add
client-side validation automatically. Visual Studio 2012 has bought this functionality to
ASP.NET Web forms developers, who can now also annotate properties for automatic client-
side validation. Validating input on the client can reduce the number of invalid submissions
to your site, and provides a more responsive interface for a user. In addition to the new features
added to Web Forms, Visual Studio 2012 includes several IDE enhancements to make the
development process easier, including:
• Chrome tasks in the editor. Perform chrome tasks while in the code editor window, enabling
you to configure data sources and similar chrome tasks without switching to design view.
• Event generation in the source view. Generate a method stub for an event when declaring the
appropriate attribute in the code editor window, without the need to switch to design
view or to generate method stubs manually. 85
• Renaming ASPX pages. More easily change the name of an ASPX page. Visual Studio 2012
automatically updates all references.
• Extracting to a user control. Select and extract the required markup to create a new user
control. Visual Studio 2012 updates the page to include all necessary tag prefixes and
registrations, and includes the control in the correct place on the page. Re-use the control
elsewhere on the site as required.
Find Problems Faster
Test, Debug and Deploy with Confidence
A developer creating a web application must test and debug before deploying the application
to a production server. Because developer computers can be very different from production
servers, developers must be confident that testing and debugging on their computers will match
the results on the production server. One issue facing developers is differing versions of the
.NET Framework. To address this issue, Visual Studio 2012 enables developers
to create applications that reference earlier versions of the .NET Framework, and to ensure that
they do not use features added in later versions. When developing a web application,
developers typically host the application on their workstations for testing and debugging.
Previously, the simplest approach for this was to use the Development Web server provided
with Visual Studio. While this was easy to configure, there were significant differences
between the Development Web server and Internet Information Services (IIS) software
typically used on production servers. One solution to this problem is to install IIS on the
developer’s computer. While this strategy closely matches the production environment, it is
subject to limitations. For example, the version of IIS is controlled by the operating system.
Visual Studio 2012 ships with IIS Express, a lightweight web server that includes all of the
core functionality of the current version of IIS. Using IIS Express, Visual Studio 2012 enables
developers to debug and test sites with minimal configuration—including the power to perform
a custom configuration, if necessary—and without the added requirement of using a full IIS
installation. Developers can configure IIS Express through Visual Studio. In addition,
administrative privileges are not required to configure IIS Express, making it a
viable option in environments where using administrative rights is not possible.
Visual Studio 2012 also ships with a new Publish Web wizard, providing not only a new user
interface, but a number of features that help ease the complications and stresses of

deployments. For example, updating connection strings on publish, including more complex
Entity Framework connection strings.
87
View and Edit Web Pages in the IDE
To debug their sites, web developers often use tools in browsers to view the (DOM) of the
rendered page and to make changes to rectify issues. Typically, the developer then copies these
changes back to their development environment. Visual Studio 2012 includes a new tool, the
Page Inspector, to simplify this process. By using the Page Inspector, developers can make live
changes to the DOM and edit CSS rules, and when they achieve the desired result they can
easily copy these changes to the source file. The Page Inspector also enables developers to
reverse engineer—with just a single click—the rendered HTML, CSS.
88
Browsers typically support a dynamic approach to debugging in which the developer can
interact and run commands on an ad-hoc basis. Visual Studio 2012 adds the JavaScript console
to the development environment, enabling developers to set break points and single-step
through their code. These break points are persisted when the application stops, and are
available the next time the developer runs the application in Debug mode.

89
Easily Work with Data and State Information
Managing data and handling state information is one of the major differences between
developing a desktop application and developing a web application. With applications that run
on a local computer, state information and data can be stored on the local disk in the context of
the current user. For web applications, many users make requests to the same web server. Data
must be stored between requests and identified to ensure that each user retains
the appropriate state information. For large web applications hosted by a web farm, this data
must be shared among servers. This is a common challenge for web developers, and there are
many approaches to meeting this challenge. One approach is to save data in cookies that are
transmitted to the server with each request. The cookie identifies the request and is used to
retrieve data on the server. Visual Studio 2012 includes a new integrated development
database called SQL Express LocalDB, a lightweight database engine that installs and starts
quickly and provides full compatibility with both SQL Server and SQL Azure. This ensures
that developers can develop, test, and debug sites on their development computers with
confidence that the sites will work as expected when deployed to a production web server using
a SQL Server database. A site developed by using LocalDB will work in the cloud or with an
instance of SQL Server with only minimal configuration changes. To make the
process easier, Visual Studio 2012 provides tools that enable developers to seamlessly deploy
to the cloud or to an on-premises instance of SQL Server. When developing a site that uses a
SQL Express database, another common problem has been that the database file would get
locked by Visual Studio or by the web site, and a database update may fail as a result. LocalDB
runs in the context of the current user and avoids this problem.
Integrate with Other Technologies
Writing JavaScript can be a time-consuming process, but developers can save a lot of time
during development by leveraging existing tools. For example, the jQuery library includes
shortcuts that can save significant time and effort. Visual Studio 2012 fully supports jQuery
and makes it easy to integrate with web sites. Authentication is another area that can be time
consuming to implement. While ASP.NET has always included a powerful authentication
provider, sometimes developers did not want to implement it, if, for example, the developer
did not want to host a custom database. In Visual Studio 2012, ASP.NET web pages
support OAuth, which enables developers to integrate with external authentication providers
including Google®, Yahoo®, Facebook®, Twitter®, and Windows Live. Using an external
authentication provider can simplify the registration process for the users of a web application,
and can save the cost of implementing an authentication provider. This can improve the user

experience, which in turn can help to achieve better sign-up rates. While this feature may be
useful to some sites, ASP.NET authentication is still available to
developers and still fully supported. ASP.NET authentication configuration benefits from some
of the IDE improvements in Visual Studio 2012. Visual Studio 2012 includes an extension
manager that can be used to add new libraries and capabilities from trusted third parties.
Additionally, the NuGet third-party package management system (available in the gallery as
an extension) enables developers to easily access other useful code. For
example, NuGet enables developers to include the Error Logging Modules and Handlers library
(ELMAH) in their project with minimal effort. Improve Performance Modern web sites may
present large amounts of complex content, images, audio, and other information. With a wired
Internet connection, a user browsing such a site typically experiences reasonable performance.
However, more and more users are viewing sites on mobile devices whose wireless connections
are not as fast or reliable as wired connections. Additionally, as the web has matured,
performance expectations have increased. Web sites are now expected to function as quickly
as desktop applications. Reducing the volume of data being transferred is one way that
developers aim to improve the performance of their web applications.
Visual Studio 2012 includes features to help ensure that sites load rapidly and with minimal
bandwidth use. Visual Studio 2012 supports asynchronous requests using jQuery and
JavaScript; these requests can update just a small part of the page, which can be significantly
faster than completely reloading a page. Visual Studio 2012 also supports deferred loading,
enabling developers to create pages in which the content loads first and the scripts are loaded
afterwards. While the total time to download the page may not change significantly, the
perceived load time can be much faster because the page renders while JavaScript files are still
being downloaded. In some circumstances, deferred loading may enable scripts not to be loaded
at all, saving bandwidth and delivering a real performance increase. In addition ASP.NET now
supports optimization, bundling, and minification for script and CSS files. These features help
developers to further reduce the bandwidth requirements of their web application. 92
98
The Visual Studio 2012 family provides a range of integrated tools that enable all stakeholders
to cooperate to keep development projects on track, and that help to ensure
that the delivered software is timely, functional, and cost-effective.

STEPS INVOLVED
CREATE A NEW PROJECT
1. Open visual studio 2012. Click on File->New-> Project
A New Project window pops up.
2. Select ASP.NET Empty Web Application under the category-Web using Visual C#
3. Right click on the project in the Solution Explorer. Click on Add->New Item-> Master
Page.
4. Drag and Drop the following folders having the specified files to install the bootstap s
well as jQuery packages:
 Content :
Bootstrap
Bootstrap.css
Bootstrap.min
Bootstrap.min.css
Bootstrap-theme
Bootstrap-theme.css
Bootstrap-theme.min
Bootstrap-theme.min.css
Style
 Fonts:
Glyphicons-halflings-regular.eot
Glyphicons-halflings-regular.woff
Glyphicons-halflings-regular.woff2
Glyphicons-halflings-regular

 FusionCharts:
Js:
Maps
Themes
 Scripts:
Bootstrap
Bootstrap.min
Effects
Jquery-2.2.3.intellisense
Jquery-2.2.3.min
Jquery-2.2.3
DESIGN THE USER-INTERFACE:
Create a master page, a default page, a page for the dashboard and any number of pages as per
your requirement with the help of BOOTSTRAP.
Create a Local Database File in Visual Studio
1. On the menu bar, choose Project, Add New Item.
The Add New Item dialog box appears so that you can add items that are appropriate
in a Windows Form project.
2. In the list of templates, scroll down until Service-based Database appears, and then
choose it.

3. Name the database SampleDatabase, and then choose the Add button.
The Data Source Configuration Wizard opens.
4. On the Choose a Database Model page, choose the Dataset icon, and then choose
the Next button.
On the Choose Your Database Objects page, no database objects are available
because the database is new.
5. Choose the Finish button to create the database and dataset and add them to the project.
The properties window for the database shows the connection string and the location of the
primary .mdf file for the database. To display this window, choose the Server Explorer tab,
expand the Data Connections node, open the shortcut menu for the database, and then
chooseProperties.
Create Tables, Columns, Primary Keys, and Foreign Keys
To create the Customers table
1. In ServerExplorer/Database Explorer, expand the Data Connections node, and then
expand the SampleDatabase.mdf node.
If Server Explorer doesn't appear, you can display it by choosing View, Server
Explorer on the menu bar.
2. Open the shortcut menu for Tables, and then choose Add New Table.
The Table Designeropens and shows a grid with one default row, which represents a
single column in the table that you're creating. By adding rows to the grid, you'll define
additional columns in the table.
3. In the grid, add a row for each entry in the following table:
Column name Data type Allow nulls
CustomerID nchar(5) False (cleared)
CompanyName nvarchar(40) False (cleared)
ContactName nvarchar (30) True (selected)
Phone nvarchar (24) True (selected)
4. Open the shortcut menu for the CustomerID row, and then choose Set Primary Key.
5. Open the shortcut menu for the default row, and then choose Delete.
6. Name the Customers table by updating the first line in the script pane to match the
following sample:
7. CREATE TABLE [dbo].[Customers]
8. In the upper-left corner of the Table Designer, choose the Update button.
9. In the Preview Database Updates dialog box, choose the Update Database button.
Your changes are saved to the local database file.
To create the Orders table
1. In Server Explorer/Database Explorer, open the shortcut menu for Tables, and then
choose Add New Table.

2. In the grid, add a row for each entry in the following table:
Column name Data type Allow nulls
OrderID int False (cleared)
CustomerID nchar(5) False (cleared)
OrderDate datetime True (selected)
OrderQuantity int True (selected)
3. Open the shortcut menu for the OrderID column, and then choose Set Primary Key.
4. Open the shortcut menu for the default row, and then choose Delete.
5. Name the Orders table by updating the first line in the script pane to match the following
sample:
6. CREATE TABLE [dbo].[Orders]
To create a foreign key
1. In the context pane on the right side of the grid, open the shortcut menu for Foreign
Keys, and then choose Add New Foreign Key.
2. In the text box that appears, replace ToTable with Customers.
3. In the script pane, update the last line to match the following sample:
4. CONSTRAINT [FK_Orders_Customers] FOREIGN KEY ([CustomerID]) REFERENCES
[Customers]([CustomerID])
To populate the tables with data
1. In Server Explorer/Database Explorer, expand the node for the sample database, and
then expand the Tables node.
2. Open the shortcut menu for the Customers table, and then choose Show Table Data.
3. Add whatever data you want for at least three customers.
4. Open the shortcut menu for the Orders table, and then choose Show Table Data.
5. Add data for at least three orders.
6. On the menu bar, choose File, Save All.
7. On the menu bar, choose File, Close Solution.

CONNECT TO THE DATABASE
You create the dataset by running the Data Source Configuration Wizard.
To create the dataset
1. On the Data menu, click Show Data Sources.
2. In the Data Sources window, click Add New Data Source.
3. Select Database on the Choose a Data Source Type page. Click Next.
4. Select Dataset on the Choose a Database Model page. Click Next.
5. On the Choose your Data Connection page, select New Connection to configure a new data
connection.
6. In the Add Connection dialog box, enter the path to the Northwind.mdb database file, or click
the Browse button to locate the Northwind.mdb file. Click OK.
7. Click Next on the Choose your Data Connection page.
8. Click Next on the Save connection string to the Application Configuration file page.
9. Expand the Tables node on the Choose your Database Objects page.
10. Select the Customers and Orders tables, and then click Finish.
The NorthwindDataSet is added to your project and the Customers and Orders tables appear
in the Data Sources window.
Security
Storing sensitive information (such as a password) can affect the security of your application. Using Windows
Authentication (also known as integrated security) is a more secure way to control access to a database.
FURTHER STEPS TO BE TAKEN:
 CONNECT TO THE DATABASE FROM THE SERVER EXPLORER.
 FETCH DATA FROM THE DATABASE.
 LOOP THROUGH THE DATA TABLE ELEMENTS AND APPEND IT INTO THE
STRING.
 STORE THE STRING IN TEXT FIELD OF THE HIDDEN ELEMENT
 EXECUTE SCRIPT TO TAKE THAT VALUE AS XML DATA
 FINALLY, RENDER CHART
 Place Hiddenfield control anywhere in your page
<asp:HiddenField ID="hdnTataAttend" runat="server" Value=""/>
Function to create the XML data
private string CreateXMLForBarGraph(DataTable dtGraph, string strGraph_Caption)
{

string strXML = string.Empty;
try
{
strXML = "<chart caption=' " + strGraph_Caption + "' borderalpha='20' palettecolors='#4F81BD'
bgcolor='#ffffff' showcanvasborder='0'useplotgradientcolor='0' plotborderalpha='10' placevaluesinside='1'
valuefontcolor='#ffffff' showaxislines='1' axislinealpha='25' divlinealpha='10' aligncaptionwithcanvas='0'
showalternatevgridcolor='0' captionfontsize='14' tooltipcolor='#ffffff' tooltipborderthickness='0' tooltipbgcolor='#000000'
tooltipbgalpha='80' tooltipborderradius='2' tooltippadding='5'>";
for (count = 0; count <= dtGraph.Rows.Count - 1; count++)
{
strXML += "<set label= '" + dtGraph.Rows[count]["DESC_NAME"].ToString + "' value = '" +
dtGraph.Rows[count]["CNT"].ToString + "'/>";
}
strXML += " </chart> ";
}
catch (Exception ex)
{
throw ex;
//throw exception
//final block
}
finally
{
System.GC.Collect();
//garbage collector
}
return strXML;
}
Store it in hiddenfield
hdnGrph5.Value = strXML;
To call the function in aspx page
Put this snippet in aspx.cs page after you have put the xml string in hiddenfield
ScriptManager.RegisterStartupScript(this, this.GetType, "genGraph", "genGraph();", true)
Add this script in the aspx page:
function genGraph() {
renderChart($('#<%=hfCustomerXML.ClientID%>').val(), 'div_CustomerChart')
renderChart($('#<%=hfEmployeeXML.ClientID%>').val(), 'div_EmployeeChart')
}
function bar2dxml(xmldata,divId) {
function renderChart() {
var mychart = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '100%',
height: '400px',
dataFormat: 'xml',
dataSource: xmldata
});
mychart.render(divId);
}
renderChart();
}

CONCLUSION
Creating a dashboard application using Bootstrap on the Visual
Studio platform proved to be highly effective.
Professional software development is an engineering process
that involves not just developers, but also the whole range of
planning, testing, management, and operations staff, together
with the end users for whom the software is being developed.
THANK YOU!

REPORT

More Related Content

What's hot

Similar to REPORT

REPORT