Stunning charts on the web page makes the user to stare on the screen for long time and use it more often. Yes charts really convey many messages in one shot.
To implement charts in Asp.net we have 2 best options.
1. Microsoft Charts
2. Google Chart API.
Microsoft Charts :
* Advantages:
1. Easy to use.
2. No third party components.
3. Attractive and pleasing.
4. Quality of charts are superb.
5. Offcourse it is free. :-) and no lic prob for this chart controls.
6. Supports complex charting and drill down charts and reports.
* Disadvantages
1. For more complex charts Server side code is complex and difficult.
2. Comparatively slow but the slowness is worth for the information and UI.
You can have more info from here on MS Charts
Installing MS chart adding into vs 2008 toolbox and using MS chart with sample code
Google Charts :
Reference links :
Google Chart Reference
*Advantages:
1. Very simple to design for simple charts
2. Light weighted and faster
3. Code is easy to understand and attributes are less to customize.
4. No installation setup is required works on javascript.
5. It is free.
* Disadvantages:
1. Since api works on online javascript so browser should be javascript enabled.
2. Presence of internet is a must.
Both has its own advantages and shortcomings but as a developer we must know what is required for us is the best.
Before generating a chart and displaying it was a nightmare and those who like to choose to develop or spend time on charts was used to called a "Hero of Developers" no matter whether it is a 3rd party component or develop by using HTML, tr, td, images, div and css combinations.
Google Chart Api like Google map api has a made a chart development tremendously easier and faster which almost a fresh student also can make it.
Here I am showing a simple Area graph using Google Chart API. It is so easy that anybody will feel no need of explanation on the html. It requires no serverside code only javascript.
Happy coding "Hero of Developers".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["areachart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Actual Targets achieved');
data.addColumn('number', 'Projected Targets');
data.addRows(9);
data.setValue(0, 0, '2000');
data.setValue(0, 1, 2);
data.setValue(0, 2, 0);
data.setValue(1, 0, '2001');
data.setValue(1, 1, 30);
data.setValue(1, 2, 25);
data.setValue(2, 0, '2002');
data.setValue(2, 1, 45);
data.setValue(2, 2, 70);
data.setValue(3, 0, '2003');
data.setValue(3, 1, 85);
data.setValue(3, 2, 80);
data.setValue(4, 0, '2004');
data.setValue(4, 1, 100);
data.setValue(4, 2, 0);
data.setValue(5, 0, '2005');
data.setValue(5, 1, 20);
data.setValue(5, 2, 0);
data.setValue(6, 0, '');
data.setValue(6, 1, 20);
data.setValue(6, 2, 0);
data.setValue(7, 0, '');
data.setValue(7, 1, 20);
data.setValue(7, 2, 0);
data.setValue(8, 0, '');
data.setValue(8, 1, 20);
data.setValue(8, 2, 0);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, { width: 600, height: 340, legend: 'bottom', title: ' Performance ' });
}
</script>
</head>
<body style="font-family:Calibri;">
<div id="chart_div"></div>
</body>
</html>