Bar Chart

Home >Shield UI Documentation >Chart >ASP.NET >Chart Types >Bar Chart

Bar chart display the data using a number of bars of the same width, each of which representing a particular category. Bar charts are also great at showing trend data. They help in bringing out the highs and lows of the data set very easily.

bar

The chart from the image above is created with the following code:

<shield:ShieldChart ID="ShieldChart1" Width="590px" Height="400px" runat="server" 
    OnTakeDataSource="ShieldChart1_TakeDataSource"
    CssClass="chart">
    <PrimaryHeader Text="Internet usage statistics"></PrimaryHeader>
    <ExportOptions AllowExportToImage="false" AllowPrint="false" />
    <Axes>
        <shield:ChartAxisX 
            CategoricalValues="Jan, Feb, Mar, Apr, May, Jun"></shield:ChartAxisX>
        <shield:ChartAxisY>
            <Title Text="Visitor statistics"></Title>
        </shield:ChartAxisY>
    </Axes>
    <DataSeries>
        <shield:ChartBarSeries DataFieldY="Total" CollectionAlias="Total Visits">
        </shield:ChartBarSeries>
        <shield:ChartBarSeries DataFieldY="Unique" CollectionAlias="Unique Visits">
        </shield:ChartBarSeries>
    </DataSeries>
</shield:ShieldChart>

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    List datasource = new List() 
    { 
        new VisitorStatistic() { Total = 565000, Unique = 152000 },
        new VisitorStatistic() { Total = 630400, Unique = 234000 },
        new VisitorStatistic() { Total = 743000, Unique = 123000 },
        new VisitorStatistic() { Total = 910200, Unique = 348000 },
        new VisitorStatistic() { Total = 1170200, Unique = 167000 },
        new VisitorStatistic() { Total = 1383000, Unique = 283000 }
    };

    ShieldChart1.DataSource = datasource;
}

private class VisitorStatistic
{
    public double Unique { get; set; }
    public double Total { get; set; }
}

The bar chart can be also configured as stacked:

bar stacked

The chart from the image above is created with the following code:

<shield:ShieldChart ID="ShieldChart1" Width="590px" Height="400px" runat="server"
    OnTakeDataSource="ShieldChart1_TakeDataSource"
    CssClass="chart">
    <PrimaryHeader Text="Olympic Medals won by USA"></PrimaryHeader>
    <ExportOptions AllowExportToImage="false" AllowPrint="false" />
    <Axes>
        <shield:ChartAxisX
            CategoricalValues="1952, 1956, 1960, 1964, 1968, 1972, 1976,
    1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012">
        </shield:ChartAxisX>
    </Axes>
    <DataSeries>
        <shield:ChartBarSeries DataFieldY="Gold" CollectionAlias="Gold Medals">
            <Settings StackMode="Normal"></Settings>
        </shield:ChartBarSeries>
        <shield:ChartBarSeries DataFieldY="Silver" CollectionAlias="Silver Medals">
            <Settings StackMode="Normal"></Settings>
        </shield:ChartBarSeries>
        <shield:ChartBarSeries DataFieldY="Bronze" CollectionAlias="Bronze Medals">
            <Settings StackMode="Normal"></Settings>
        </shield:ChartBarSeries>
    </DataSeries>
</shield:ShieldChart>

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    List datasource = new List() 
    { 
        new Medals() { Gold = 40, Silver = 19, Bronze = 17 },
        new Medals() { Gold = 32, Silver = 25, Bronze = 17 },
        new Medals() { Gold = 34, Silver = 21, Bronze = 16 },
        new Medals() { Gold = 36, Silver = 26, Bronze = 28 },
        new Medals() { Gold = 45, Silver = 28, Bronze = 34 },
        new Medals() { Gold = 33, Silver = 31, Bronze = 30 },
        new Medals() { Gold = 34, Silver = 35, Bronze = 25 },
        new Medals() { Gold = 83, Silver = 60, Bronze = 30 },
        new Medals() { Gold = 36, Silver = 31, Bronze = 27 },
        new Medals() { Gold = 37, Silver = 34, Bronze = 37 },
        new Medals() { Gold = 44, Silver = 32, Bronze = 25 },
        new Medals() { Gold = 37, Silver = 24, Bronze = 33 },
        new Medals() { Gold = 35, Silver = 40, Bronze = 26 },
        new Medals() { Gold = 36, Silver = 38, Bronze = 36 },
        new Medals() { Gold = 46, Silver = 29, Bronze = 29 }
    };

    ShieldChart1.DataSource = datasource;
}

private class Medals
{
    public int Gold { get; set; }
    public int Silver { get; set; }
    public int Bronze { get; set; }
}

The bar chart series can be also inversed:

bar inversed

The chart from the image above is created with the following code:

<shield:ShieldChart ID="ShieldChart1" Width="590px" Height="400px" runat="server" 
    OnTakeDataSource="ShieldChart1_TakeDataSource" IsInverted="true"
    CssClass="chart">
    <PrimaryHeader Text="Internet usage statistics"></PrimaryHeader>
    <Axes>
        <shield:ChartAxisX 
            CategoricalValues="Jan, Feb, Mar, Apr, May, Jun"></shield:ChartAxisX>
        <shield:ChartAxisY>
            <Title Text="Visitor statistics"></Title>
        </shield:ChartAxisY>
    </Axes>
    <DataSeries>
        <shield:ChartBarSeries DataFieldY="Total" CollectionAlias="Total Visits">
        </shield:ChartBarSeries>
        <shield:ChartBarSeries DataFieldY="Unique" CollectionAlias="Unique Visits">
        </shield:ChartBarSeries>
    </DataSeries>
</shield:ShieldChart>

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    List datasource = new List() 
    { 
        new VisitorStatistic() { Total = 565000, Unique = 152000 },
        new VisitorStatistic() { Total = 630400, Unique = 234000 },
        new VisitorStatistic() { Total = 743000, Unique = 123000 },
        new VisitorStatistic() { Total = 910200, Unique = 348000 },
        new VisitorStatistic() { Total = 1170200, Unique = 167000 },
        new VisitorStatistic() { Total = 1383000, Unique = 283000 }
    };

    ShieldChart1.DataSource = datasource;
}

private class VisitorStatistic
{
    public double Unique { get; set; }
    public double Total { get; set; }
}
  • When the chart is bound to collection of objects the X values are got by the field which name is set into the DataFieldX property of the ChartBarSeries. The Y values are got by the field which name is set into the DataFieldY property.
  • The name that is shown in the legend is chosen via the CollectionAlias property of the ChartBarSeries.
  • By default all X values are sorted in order bar chart to be shown appropriately, however this behavior is controlled by the EnableValueXSorting property of the ChartBarSeries.
  • DataStart and DataStep properties control the start value of the x axis and explicit value for the interval between a data series member values.
  • All points from the ChartBarSeries are represented with ChartSeriesItem which belongs to the ChartBarSeries.Items collection.
    • The ChartBarSeries.Items can be added declarative without data binding.
    • The data binding and declarative approach can be mixed. However in order declarative items to be appended to the items created from the datasource the ShieldChart.AppendDataBoundItems property need to be set to "true".
  • All setting related to ChartBarSeries are contained into the ChartBarSeries.Settings object.
    • The background and border color can be set via Color and BorderColor properties.
    • If the AddToLegend is set to false the series is not added into the legend.
    • The animation of the series can be controlled by ChartBarSeries.Settings.EnableAnimation and ChartBarSeries.Settings.AnimationDuration properties.
    • If some values are missing (i.e. they are null/Nothing) from the series data you can have the chart work around this by setting the DrawNullValues property.
    • The series of multiline bar chart can be stacked by setting the StackMode property to Normal or Percent.
    • Each point from the series can be selected if the EnablePointSelection property is set to true.
    • All selected points can be customized by Settings.PointMark.ActiveSettings.PointSelectedState object properties.
    • From the Settings.PointMark.ActiveSettings.PointHoveredState object properties you can change the appearance of each bar when the user hovers it.
    • Each series has related tooltip which can be customized via the Settings.Tooltip object.
    • Each point from the series can have related text, which appearance is controlled by Settings.DataPointText property. You can changeBackgroundColor, BorderColor, Color, Padding, and TextAngle of the corresponding data point text.