Generate Graph Using Chartlet
How to create some good looking Line, Bar, Pie charts for your ASP.NET application.
Introduction
In this article, I would like to show you how to create some good looking Line, Bar, Pie charts for your ASP.NET application.
Background
I assume you have a basic knowledge of ASP.NET and C#.NET, and so on.
Chartlet is a free chart control for ASP.NET. It's so easy to use, you only need two statements to generate a pretty chart, and we have to choose three groups of pretty colors for you to use. Of course you can set all attributes by yourself. Now only 2D chart is available, you can get a solid color style chart, flat crystal style chart, and glass crystal style chart. We are working on 3D charts and will keep updating, will give you more choices and more pretty charts....
To prepare a chart, use the steps given below.
How to configure
Step 1:
Download from http://www.chartlet.cn/En/Download.aspx.
Step 2:
Start a new web-site; give the name as chartletGraph. It will give you a Default.aspx and .cs file.
Step 3:
Download source code and copy the chartlet.dll file from the bin directory to some location. Now add a reference to this chartlet.dll file.
Using the code
Load initial data
DataTable dt = new DataTable("Chart");
private void LoadGraphData()
{
// Preparing Data Source For Chart Control
DataColumn dc = new DataColumn("Month", typeof(string ));
DataColumn dc1 = new DataColumn("Qnty", typeof(int ));
dt.Columns.Add(dc);
dt.Columns.Add(dc1);
DataRow dr1 = dt.NewRow();
dr1[0] = "January";
dr1[1] = 8465;
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2[0] = "February";
dr2[1] = 9113;
dt.Rows.Add(dr2);
DataRow dr3 = dt.NewRow();
dr3[0] = "March";
dr3[1] = 18305;
dt.Rows.Add(dr3);
DataRow dr4 = dt.NewRow();
dr4[0] = "April";
dr4[1] = 23839;
dt.Rows.Add(dr4);
DataRow dr5 = dt.NewRow();
dr5[0] = "May";
dr5[1] = 11167;
dt.Rows.Add(dr5);
DataRow dr6 = dt.NewRow();
dr6[0] = "June";
dr6[1] = 8838;
dt.Rows.Add(dr6);
DataRow dr7 = dt.NewRow();
dr7[0] = "July";
dr7[1] = 10800;
dt.Rows.Add(dr7);
DataRow dr8 = dt.NewRow();
dr8[0] = "August";
dr8[1] = 12115;
dt.Rows.Add(dr8);
DataRow dr9 = dt.NewRow();
dr9[0] = "September";
dr9[1] = 7298;
dt.Rows.Add(dr9);
DataRow dr10 = dt.NewRow();
dr10[0] = "October";
dr10[1] = 13186;
dt.Rows.Add(dr10);
DataRow dr11 = dt.NewRow();
dr11[0] = "November";
dr11[1] = 10460;
dt.Rows.Add(dr11);
DataRow dr12 = dt.NewRow();
dr12[0] = "December";
dr12[1] = 9964;
dt.Rows.Add(dr12);
}
Load all graph type
/* Load All Appearance Styles */
foreach (string es in System.Enum.GetNames(typeof(FanG.Chartlet.AppearanceStyles)))
{
// Add item in Dropdownlist
DropDownList1.Items.Add(new ListItem(es));
}
Generate graph
// Select Graph type from Dropdownlist
Chartlet1.AppearanceStyle = (FanG.Chartlet.AppearanceStyles)System.Enum.Parse(
typeof(FanG.Chartlet.AppearanceStyles), DropDownList1.Text, true);
// Populate data
foreach (DataRow dr in dt.Rows)
{
XLabel.Add(dr["Month"].ToString().Trim());
DataArray[0].Add(Convert.ToInt16( dr["Qnty"].ToString().Trim()));
}
Chartlet1.ChartTitle.Text = "Month wise Product Distribution";
Chartlet1.XLabels.UnitText = "Month";
Chartlet1.YLabels.UnitText = "Qnty";
Chartlet1.InitializeData(DataArray, XLabel, ColorGuider);
List of available graphs
<table border=1><tr><td>Bar_2D_Breeze_NoCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Bar_2D_Breeze_NoCrystal_Glow_NoBorder</td></tr><tr>
<td>Bar_2D_Breeze_NoCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Bar_2D_Breeze_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_2D_Breeze_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>Bar_2D_Breeze_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Bar_2D_Breeze_FlatCrystal_Glow_TextureBorder</td></tr><tr>
<td>Bar_2D_Aurora_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_2D_Aurora_NoCrystal_Glow_NoBorder</td></tr><tr>
<td>Bar_2D_Aurora_NoCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Bar_2D_Aurora_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_2D_Aurora_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>Bar_2D_Aurora_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Bar_2D_Aurora_FlatCrystal_Glow_TextureBorder</td></tr><tr>
<td>Bar_2D_Aurora_GlassCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_2D_Aurora_GlassCrystal_Glow_NoBorder</td></tr><tr>
<td>Bar_2D_Aurora_GlassCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Bar_2D_StarryNight_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>Bar_2D_StarryNight_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Bar_2D_StarryNight_FlatCrystal_Glow_TextureBorder</td></tr><tr>
<td>Bar_2D_StarryNight_GlassCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_3D_Breeze_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_3D_Breeze_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_3D_Aurora_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_3D_Aurora_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_3D_StarryNight_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Bar_3D_StarryNight_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThickRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThickRound_Glow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThickSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThickSquare_Glow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThinRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThinRound_Glow_NoBorder</td></tr><tr>
<td>Line_2D_Aurora_ThinSquare_NoGlow_NoBorder</td></tr>
<tr><td>Line_2D_Aurora_ThinSquare_Glow_NoBorder</td></tr>
<tr><td>Line_2D_StarryNight_ThickRound_NoGlow_NoBorder</td></tr>
<tr><td>Line_2D_StarryNight_ThickRound_Glow_NoBorder</td></tr><tr>
<td>Line_2D_StarryNight_ThickSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_StarryNight_ThickSquare_Glow_NoBorder</td></tr><tr>
<td>Line_2D_StarryNight_ThinRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_StarryNight_ThinRound_Glow_NoBorder</td></tr><tr>
<td>Line_2D_StarryNight_ThinSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_2D_StarryNight_ThinSquare_Glow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_NoCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_NoCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_NoCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_FlatCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_FlatCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_FlatCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_GlassCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_GlassCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Breeze_GlassCrystalSquare_NoGlow_NoBorder</td></tr>
<tr><td>Line_3D_Aurora_NoCrystalNone_NoGlow_NoBorder</td>
</tr><tr><td>Line_3D_Aurora_NoCrystalRound_NoGlow_NoBorder</td></tr>
<tr><td>Line_3D_Aurora_NoCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Aurora_FlatCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Aurora_FlatCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Aurora_FlatCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Aurora_GlassCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Aurora_GlassCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_Aurora_GlassCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_NoCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_NoCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_NoCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_FlatCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_FlatCrystalRound_NoGlow_NoBorder</td></tr>
<tr><td>Line_3D_StarryNight_FlatCrystalSquare_NoGlow_NoBorder</td></tr>
<tr><td>Line_3D_StarryNight_GlassCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_GlassCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Line_3D_StarryNight_GlassCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Pie_2D_Breeze_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Pie_2D_Breeze_NoCrystal_NoGlow_WhiteBorder</td></tr><tr>
<td>Pie_2D_Breeze_NoCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Pie_2D_Breeze_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Pie_2D_Breeze_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Pie_2D_Breeze_GlassCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Pie_2D_Breeze_GlassCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Pie_2D_Aurora_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Pie_2D_Aurora_NoCrystal_NoGlow_WhiteBorder</td></tr><tr>
<td>Pie_2D_Aurora_NoCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Pie_2D_Aurora_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Pie_2D_Aurora_FlatCrystal_Glow_WhiteBorder</td></tr>
<tr><td>Pie_2D_Aurora_GlassCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Pie_2D_Aurora_GlassCrystal_Glow_WhiteBorder</td>
</tr><tr><td>Pie_2D_StarryNight_NoCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Pie_2D_StarryNight_NoCrystal_NoGlow_WhiteBorder</td>
</tr><tr><td>Pie_2D_StarryNight_NoCrystal_Glow_WhiteBorder</td>
</tr><tr><td>Pie_2D_StarryNight_FlatCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Pie_2D_StarryNight_FlatCrystal_Glow_WhiteBorder</td>
</tr><tr><td>Pie_2D_StarryNight_GlassCrystal_NoGlow_NoBorder
</td></tr><tr><td>Pie_2D_StarryNight_GlassCrystal_Glow_WhiteBorder
</td></tr><tr><td>Pie_3D_Aurora_NoCrystal_NoGlow_NoBorder
</td></tr><tr><td>Pie_3D_Aurora_FlatCrystal_NoGlow_NoBorder
</td></tr><tr><td>Pie_3D_Breeze_NoCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Pie_3D_Breeze_FlatCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Pie_3D_StarryNight_NoCrystal_NoGlow_NoBorder
</td></tr><tr><td>Pie_3D_StarryNight_FlatCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Stack_2D_Breeze_NoCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Stack_2D_Breeze_NoCrystal_Glow_NoBorder</td></tr>
<tr><td>Stack_2D_Breeze_NoCrystal_Glow_WhiteBorder</td></tr>
<tr><td>Stack_2D_Breeze_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Stack_2D_Breeze_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>Stack_2D_Breeze_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>Stack_2D_Breeze_FlatCrystal_Glow_TextureBorder</td></tr>
<tr><td>Stack_2D_Aurora_NoCrystal_Glow_WhiteBorder</td></tr>
<tr><td>Stack_2D_Aurora_FlatCrystal_NoGlow_NoBorder</td></tr>
<tr><td>Stack_2D_Aurora_FlatCrystal_Glow_NoBorder</td></tr>
<tr><td>Stack_2D_Aurora_FlatCrystal_Glow_WhiteBorder</td>
</tr><tr><td>Stack_2D_Aurora_FlatCrystal_Glow_TextureBorder</td>
</tr><tr><td>Stack_2D_Aurora_GlassCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Stack_2D_Aurora_GlassCrystal_Glow_NoBorder</td>
</tr><tr><td>Stack_2D_Aurora_GlassCrystal_Glow_WhiteBorder</td></tr>
<tr><td>Stack_2D_StarryNight_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>Stack_2D_StarryNight_FlatCrystal_Glow_WhiteBorder</td></tr>
<tr><td>Stack_2D_StarryNight_FlatCrystal_Glow_TextureBorder</td>
</tr><tr><td>Stack_2D_StarryNight_GlassCrystal_NoGlow_NoBorder
</td></tr><tr><td>Stack_3D_Breeze_NoCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Stack_3D_Breeze_FlatCrystal_NoGlow_NoBorder</td>
</tr><tr><td>Stack_3D_Aurora_NoCrystal_NoGlow_NoBorder</td></tr>
<tr><td>Stack_3D_Aurora_FlatCrystal_NoGlow_NoBorder</td></tr>
<tr><td>Stack_3D_StarryNight_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Stack_3D_StarryNight_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>HBar_2D_Breeze_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>HBar_2D_Breeze_NoCrystal_Glow_NoBorder</td></tr><tr>
<td>HBar_2D_Breeze_NoCrystal_Glow_WhiteBorder</td></tr><tr>
<td>HBar_2D_Breeze_FlatCrystal_NoGlow_NoBorder</td></tr><tr>
<td>HBar_2D_Breeze_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>HBar_2D_Breeze_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>HBar_2D_Breeze_FlatCrystal_Glow_TextureBorder</td></tr><tr>
<td>HBar_2D_Aurora_NoCrystal_NoGlow_NoBorder</td></tr><tr>
<td>HBar_2D_Aurora_NoCrystal_Glow_NoBorder</td></tr><tr>
<td>HBar_2D_Aurora_NoCrystal_Glow_WhiteBorder</td></tr><tr><td>HBar_2D_Aurora_FlatCrystal_NoGlow_NoBorder</td>
</tr><tr><td>HBar_2D_Aurora_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>HBar_2D_Aurora_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>HBar_2D_Aurora_FlatCrystal_Glow_TextureBorder</td></tr><tr>
<td>HBar_2D_Aurora_GlassCrystal_NoGlow_NoBorder</td></tr><tr>
<td>HBar_2D_Aurora_GlassCrystal_Glow_NoBorder</td></tr><tr>
<td>HBar_2D_Aurora_GlassCrystal_Glow_WhiteBorder</td></tr><tr>
<td>HBar_2D_StarryNight_FlatCrystal_Glow_NoBorder</td></tr><tr>
<td>HBar_2D_StarryNight_FlatCrystal_Glow_WhiteBorder</td></tr><tr>
<td>HBar_2D_StarryNight_FlatCrystal_Glow_TextureBorder</td></tr><tr>
<td>HBar_2D_StarryNight_GlassCrystal_NoGlow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThickRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThickRound_Glow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThickSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThickSquare_Glow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThinRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThinRound_Glow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThinSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_2D_Aurora_ThinSquare_Glow_NoBorder</td></tr><tr>
<td>Trend_2D_StarryNight_ThickRound_NoGlow_NoBorder</td></tr>
<tr><td>Trend_2D_StarryNight_ThickRound_Glow_NoBorder</td>
</tr><tr><td>Trend_2D_StarryNight_ThickSquare_NoGlow_NoBorder
</td></tr><tr><td>Trend_2D_StarryNight_ThickSquare_Glow_NoBorder
</td></tr><tr><td>Trend_2D_StarryNight_ThinRound_NoGlow_NoBorder
</td></tr><tr><td>Trend_2D_StarryNight_ThinRound_Glow_NoBorder
</td></tr><tr><td>Trend_2D_StarryNight_ThinSquare_NoGlow_NoBorder</td>
</tr><tr><td>Trend_2D_StarryNight_ThinSquare_Glow_NoBorder</td></tr>
<tr><td>Trend_3D_Breeze_NoCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_NoCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_NoCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_FlatCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_FlatCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_FlatCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_GlassCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_GlassCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Breeze_GlassCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_NoCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_NoCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_NoCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_FlatCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_FlatCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_FlatCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_GlassCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_GlassCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_Aurora_GlassCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_NoCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_NoCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_NoCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_FlatCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_FlatCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_FlatCrystalSquare_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_GlassCrystalNone_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_GlassCrystalRound_NoGlow_NoBorder</td></tr><tr>
<td>Trend_3D_StarryNight_GlassCrystalSquare_NoGlow_NoBorder</td></tr></table>
References
- Document: http://www.chartlet.cn/En/Help.aspx
Conclusion
This is a very easy to use and ready to go type library for your application.
History
None so far.