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()
{
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
foreach (string es in System.Enum.GetNames(typeof(FanG.Chartlet.AppearanceStyles)))
{
DropDownList1.Items.Add(new ListItem(es));
}
Generate graph
Chartlet1.AppearanceStyle = (FanG.Chartlet.AppearanceStyles)System.Enum.Parse(
typeof(FanG.Chartlet.AppearanceStyles), DropDownList1.Text, true);
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
Conclusion
This is a very easy to use and ready to go type library for your application.
History
None so far.
