65.9K
CodeProject is changing. Read more.
Home

Generate Graph Using Chartlet

starIconstarIconstarIconstarIconstarIcon

5.00/5 (2 votes)

Sep 18, 2012

BSD

1 min read

viewsIcon

13250

downloadIcon

376

How to create some good looking Line, Bar, Pie charts for your ASP.NET application.

Sample Image

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

Conclusion

This is a very easy to use and ready to go type library for your application.

History

None so far.