in bar chart - how to adjust bar spacing?

170

r posted over 15 years ago

How to adjust the bar spacing in ultrachart (barchart)? there is a big space between each bar.

bars are horizontal (not vertical) in this chart. thanks.

also i'm using ultra chart version: 8.3, charttype=bar chart

28407

[Infragistics] Matt Traynor posted over 15 years ago in reply to r

HI,

I ran you code and its actually increasing the space between bars.

Once possible cause for large space between bars - is that the chart will decide the range of the X-axis by selecting the minum and maximum values of your data and you won't see the minimum bar. So it looks like there is a large gap between bars but there really isn't.

You can create your own range for the X-axis. I create a sample project for you - my data range goes from 1 to 5. I did'nt see my bar for value 1. So I adjust the X-axis range to go from 0 - 6.

here is a code snippet -

UltraChart1.Axis.X.RangeType = AxisRangeType.Custom;
        UltraChart1.Axis.X.RangeMin = 0;
        UltraChart1.Axis.X.RangeMax = 6;

Here is my aspx page

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

<%@ Register assembly="Infragistics2.WebUI.UltraWebChart.v8.3, Version=8.3.20083.2059, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.WebUI.UltraWebChart" tagprefix="igchart" %>
<%@ Register assembly="Infragistics2.WebUI.UltraWebChart.v8.3, Version=8.3.20083.2059, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.UltraChart.Resources.Appearance" tagprefix="igchartprop" %>
<%@ Register assembly="Infragistics2.WebUI.UltraWebChart.v8.3, Version=8.3.20083.2059, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.UltraChart.Data" tagprefix="igchartdata" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <igchart:UltraChart ID="UltraChart1" runat="server" BackgroundImageFileName=""
            BorderColor="Black" BorderWidth="0px" ChartType="BarChart"
            EmptyChartText="Data Not Available. Please call UltraChart.Data.DataBind() after setting valid Data.DataSource"
            Version="8.3">
            <axis>
                <pe elementtype="None" fill="Cornsilk" />
                <x linethickness="1" tickmarkinterval="10" tickmarkstyle="Smart" visible="True">
                    <majorgridlines alphalevel="255" color="Gainsboro" drawstyle="Dot"
                        thickness="1" visible="True" />
                    <minorgridlines alphalevel="255" color="LightGray" drawstyle="Dot"
                        thickness="1" visible="False" />
                    <labels font="Verdana, 7pt" fontcolor="DimGray" horizontalalign="Far"
                        itemformatstring="<DATA_VALUE:00.##>" orientation="VerticalLeftFacing"
                        verticalalign="Center">
                        <serieslabels font="Verdana, 7pt" fontcolor="DimGray" formatstring=""
                            horizontalalign="Far" orientation="VerticalLeftFacing" verticalalign="Center">
                            <layout behavior="Auto">
                            </layout>
                        </serieslabels>
                        <layout behavior="Auto">
                        </layout>
                    </labels>
                </x>
                <y linethickness="1" tickmarkinterval="0" tickmarkstyle="Smart" visible="True">
                    <majorgridlines alphalevel="255" color="Gainsboro" drawstyle="Dot"
                        thickness="1" visible="True" />
                    <minorgridlines alphalevel="255" color="LightGray" drawstyle="Dot"
                        thickness="1" visible="False" />
                    <labels font="Verdana, 7pt" fontcolor="DimGray" horizontalalign="Far"
                        itemformatstring="<ITEM_LABEL>" orientation="Horizontal"
                        verticalalign="Center">
                        <serieslabels font="Verdana, 7pt" fontcolor="DimGray" horizontalalign="Center"
                            orientation="VerticalLeftFacing" verticalalign="Center">
                            <layout behavior="Auto">
                            </layout>
                        </serieslabels>
                        <layout behavior="Auto">
                        </layout>
                    </labels>
                </y>
                <y2 linethickness="1" tickmarkinterval="0" tickmarkstyle="Smart"
                    visible="False">
                    <majorgridlines alphalevel="255" color="Gainsboro" drawstyle="Dot"
                        thickness="1" visible="True" />
                    <minorgridlines alphalevel="255" color="LightGray" drawstyle="Dot"
                        thickness="1" visible="False" />
                    <labels font="Verdana, 7pt" fontcolor="Gray" horizontalalign="Near"
                        itemformatstring="<ITEM_LABEL>" orientation="Horizontal"
                        verticalalign="Center" visible="False">
                        <serieslabels font="Verdana, 7pt" fontcolor="Gray" horizontalalign="Center"
                            orientation="VerticalLeftFacing" verticalalign="Center">
                            <layout behavior="Auto">
                            </layout>
                        </serieslabels>
                        <layout behavior="Auto">
                        </layout>
                    </labels>
                </y2>
                <x2 linethickness="1" tickmarkinterval="10" tickmarkstyle="Smart"
                    visible="False">
                    <majorgridlines alphalevel="255" color="Gainsboro" drawstyle="Dot"
                        thickness="1" visible="True" />
                    <minorgridlines alphalevel="255" color="LightGray" drawstyle="Dot"
                        thickness="1" visible="False" />
                    <labels font="Verdana, 7pt" fontcolor="Gray" horizontalalign="Far"
                        itemformatstring="<DATA_VALUE:00.##>" orientation="VerticalLeftFacing"
                        verticalalign="Center" visible="False">
                        <serieslabels font="Verdana, 7pt" fontcolor="Gray" formatstring=""
                            horizontalalign="Far" orientation="VerticalLeftFacing" verticalalign="Center">
                            <layout behavior="Auto">
                            </layout>
                        </serieslabels>
                        <layout behavior="Auto">
                        </layout>
                    </labels>
                </x2>
                <z linethickness="1" tickmarkinterval="0" tickmarkstyle="Smart" visible="False">
                    <majorgridlines alphalevel="255" color="Gainsboro" drawstyle="Dot"
                        thickness="1" visible="True" />
                    <minorgridlines alphalevel="255" color="LightGray" drawstyle="Dot"
                        thickness="1" visible="False" />
                    <labels font="Verdana, 7pt" fontcolor="DimGray" horizontalalign="Near"
                        itemformatstring="" orientation="Horizontal" verticalalign="Center"
                        visible="False">
                        <serieslabels font="Verdana, 7pt" fontcolor="DimGray" horizontalalign="Near"
                            orientation="Horizontal" verticalalign="Center">
                            <layout behavior="Auto">
                            </layout>
                        </serieslabels>
                        <layout behavior="Auto">
                        </layout>
                    </labels>
                </z>
                <z2 linethickness="1" tickmarkinterval="0" tickmarkstyle="Smart"
                    visible="False">
                    <majorgridlines alphalevel="255" color="Gainsboro" drawstyle="Dot"
                        thickness="1" visible="True" />
                    <minorgridlines alphalevel="255" color="LightGray" drawstyle="Dot"
                        thickness="1" visible="False" />
                    <labels font="Verdana, 7pt" fontcolor="Gray" horizontalalign="Near"
                        itemformatstring="" orientation="Horizontal" verticalalign="Center"
                        visible="False">
                        <serieslabels font="Verdana, 7pt" fontcolor="Gray" horizontalalign="Near"
                            orientation="VerticalLeftFacing" verticalalign="Center">
                            <layout behavior="Auto">
                            </layout>
                        </serieslabels>
                        <layout behavior="Auto">
                        </layout>
                    </labels>
                </z2>
            </axis>
            <effects>
                <effects>
                    <igchartprop:GradientEffect />
                </effects>
            </effects>
            <colormodel alphalevel="150" colorbegin="Pink" colorend="DarkRed"
                modelstyle="CustomLinear">
            </colormodel>
            <Border Thickness="0" />
            <tooltips font-bold="False" font-italic="False" font-overline="False"
                font-strikeout="False" font-underline="False" />
        </igchart:UltraChart>

    </div>
    </form>
</body>
</html>

Here is my code behind

using System;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Infragistics.UltraChart.Shared.Styles;
using Infragistics.UltraChart.Resources.Appearance;
using Infragistics.UltraChart.Core.Layers;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        UltraChart1.DataSource = GetData();
        UltraChart1.DataBind();
        UltraChart1.Axis.X.RangeType = AxisRangeType.Custom;
        UltraChart1.Axis.X.RangeMin = 0;
        UltraChart1.Axis.X.RangeMax = 6;

        UltraChart1.BarChart.BarSpacing = 0;
        UltraChart1.BarChart.SeriesSpacing = 0;

    }

    private static DataTable GetData()
    {
        DataTable table = new DataTable();
        table.Columns.Add("Label", typeof(string));
        table.Columns.Add("Sales", typeof(double));
        table.Columns.Add("PreSales", typeof(double));
        table.Rows.Add(new object[] { "Point A", 1.0, 3.0 });
        table.Rows.Add(new object[] { "Point B", 2.0, 2.0 });
        table.Rows.Add(new object[] { "Point C", 3.0, 1.0 });
        table.Rows.Add(new object[] { "Point D", 4.0, 2.0 });
        table.Rows.Add(new object[] { "Point E", 5.0, 3.0 });
        return table;
    }
    protected void UltraChart1_ChartDrawItem(object sender, Infragistics.UltraChart.Shared.Events.ChartDrawItemEventArgs e)
    {

        //{
        //    int columnWidth = 15;
        //    Infragistics.UltraChart.Core.Primitives.Box box = e.Primitive as Infragistics.UltraChart.Core.Primitives.Box;
        //    if (box == null)
        //    {
        //        return;
        //    }
        //    if (box.DataPoint == null)
        //    {
        //        return;
        //    }
        //    int dWidth = box.rect.Height - columnWidth;
        //    if (dWidth <= 0)
        //    {
        //        return;
        //    }
        //    box.rect.Height = columnWidth;
        //    box.rect.Y += dWidth / 2;
        //}
    }
}
Cancel
Reply

Cancel
170

r posted over 15 years ago in reply to [Infragistics] Matt Traynor

still not working, I have these 2 lines and also UltraChart1_ChartDrawItem (to narrow the bar height), nt sure that is causing this problem. still the barspacing is big eventhough the bars are narrow. is it possible to narrow the bar as well as reduce the barspacing (even less than 1).

UltraChart1.BarChart.BarSpacing = 1
'2D only
UltraChart1.BarChart.SeriesSpacing = 2

Protected Sub UltraChart1_ChartDrawItem(ByVal sender As Object, ByVal e As Infragistics.UltraChart.Shared.Events.ChartDrawItemEventArgs) andles UltraChart1.ChartDrawItem

    Dim columnWidth As Integer = 15

    Dim box As Infragistics.UltraChart.Core.Primitives.Box = TryCast(e.Primitive,         Infragistics.UltraChart.Core.Primitives.Box)

    If box Is Nothing Then
       Exit Sub
    End If

    If box.DataPoint Is Nothing Then
       Exit Sub
    End If

    Dim dWidth As Integer = box.rect.Height - columnWidth

    If dWidth <= 0 Then
      Exit Sub
    End If

    box.rect.Height = columnWidth
    box.rect.Y += dWidth / 2

End Sub
Cancel
Reply

Cancel
28407

[Infragistics] Matt Traynor posted over 15 years ago

HI,

Here is a code snippet:

UltraChart1.BarChart.BarSpacing = 1
'2D only
UltraChart1.BarChart.SeriesSpacing = 2

Here is a help link ot Bar Chart Bar spacing

http://help.infragistics.com/Help/NetAdvantage/NET/2008.3/CLR2.0/html/Infragistics2.WebUI.UltraWebChart.v8.3~Infragistics.WebUI.UltraWebChart.UltraChart~BarChart.html
Cancel
Reply

Cancel