May 4, 2010

Create Devexpress Bar chart - Webchartcontrol - Xtracharts

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

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>

2 comments:

  1. thankx for the blogg, you having a very creative blog on many topics of software, useful to me for references sometimes, and so I just wanting to thank you for your work and codings.

    good luck with the future! :)

    ReplyDelete
  2. Thanks leetest.. Hope it helps you a lot more ahead!!

    ReplyDelete