Create Devexpress Bar chart - Webchartcontrol - Xtracharts


This code shows how its easy to use a Bar chart in your Web applications through Devexpress Webchartcontrol

This code shows how its easy to use a Bar chart in your Web applications.

To start with first of all download and install Devexpress controls from www.devexpress.com

Here I am going to make a bar chart with the use of WebchartControl (Xtracharts)

Note : I have used version 9.2.3 and also tried it with 9.3.3

Code .cs Page


using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using DevExpress.XtraCharts;
using System.Drawing;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindChart();
}

private void BindChart()
{
SqlConnection conn = new SqlConnection("Connection string here");
try
{
conn.Open();
SqlCommand cmd;
cmd = new SqlCommand("select * from Transactions"); // my sample query
cmd.Connection = conn;
DataSet dsClaimCat = new DataSet();

SqlDataAdapter dapt = new SqlDataAdapter(cmd);
dapt.Fill(dsClaimCat);
WebChartControl1.DataSource = dsClaimCat.Tables[0];
//Values for X-axis
WebChartControl1.SeriesDataMember = dsClaimCat.Tables[0].Columns["percentage"].ToString();
//Values for Y-axis
WebChartControl1.SeriesTemplate.ArgumentDataMember = dsClaimCat.Tables[0].Columns["paymentDays"].ToString();
WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] { dsClaimCat.Tables[0].Columns["percentage"].ToString() });
string paletteName = "MyPalette";
PaletteEntry entry1 = new PaletteEntry(Color.Green, Color.LightGreen);
Palette palette = new Palette(paletteName, new PaletteEntry[] { entry1 });
WebChartControl1.PaletteRepository.Add(paletteName, palette);
WebChartControl1.PaletteName = paletteName;
SideBySideBarSeriesView v = new SideBySideBarSeriesView();
v.BarWidth = 0.4;

WebChartControl1.SeriesTemplate.View = v;
WebChartControl1.DataBind();

conn.Close();
}
catch
{
Response.Write("Error");
}
}
}


Design Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="DevExpress.XtraCharts.v9.2.Web, Version=9.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v9.2, Version=9.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts.Web" TagPrefix="cci" %>
<%@ Register Assembly="DevExpress.XtraCharts.v9.2, Version=9.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="200px" Width="300px"
PaletteName="The Trees">
<SeriesTemplate LabelTypeName="SideBySideBarSeriesLabel" PointOptionsTypeName="PointOptions"
SeriesViewTypeName="SideBySideBarSeriesView">

<View HiddenSerializableString="to be serialized">
</View>
<Label HiddenSerializableString="to be serialized" LineVisible="True">
<FillStyle FillOptionsTypeName="SolidFillOptions">
<Options HiddenSerializableString="to be serialized"></Options>
</FillStyle>
</Label>
<PointOptions HiddenSerializableString="to be serialized">
</PointOptions>
<LegendPointOptions HiddenSerializableString="to be serialized">
</LegendPointOptions>
</SeriesTemplate>
<FillStyle FillOptionsTypeName="SolidFillOptions">
<Options HiddenSerializableString="to be serialized"></Options>
</FillStyle>
</dxchartsui:WebChartControl>
</div>
</form>
</body>
</html>


Reference: http://angeldeeps.blogspot.com/2010/05/create-devexpress-bar-chart.html


Related Articles

More articles: Devexpress Webchart control Xtracharts Webchartcontrol Bar chart ASP.Net

Comments

Author: asdfg04 May 2010 Member Level: Gold   Points : 0

Thanks dude for sharing with us

Author: Devendra Singh Rathore05 May 2010 Member Level: Silver   Points : 1

its great


but we can draw charts without using any third party control.

Author: Deepika Haridas05 May 2010 Member Level: Gold   Points : 1

Yes Devendra, we can do it without using third party control.

But it sometimes depends on the requirements too, when you are asked to do it using with third party control and they do provide easier way to achieve it.

--
Thanks & regards,
Deepika

Author: shubhang sahai mathur05 May 2010 Member Level: Silver   Points : 1

hi deepika,

nice code but you can use this code only in specific area ,
i am generating a crystal report ,

does your code is attached with crystal report

Author: Deepika Haridas19 May 2010 Member Level: Gold   Points : 1

Hello shubhang ,

Yes you can have it in crystal reports too.

--
Thanks & regards,
Deepika

Guest Author: suresh17 Jul 2012

Thanks a lot Its very useful.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: