This is a migrated thread and some comments may be shown as answers.

Stacked Bar 100 Data Binding

1 Answer 46 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 04 Feb 2014, 06:07 PM
I have a linq data source returning rows. Each row contains a date and 8 counters. I want the date to appear in the X-Axis labels and the 8 counters to form the stacked bar. I am using the DataBound event of the chart to set the colors to use. I can't seem to get the XD-Axis labels to appear and I am getting 3 bars per date.

The chart is defined as:
<telerik:RadChart runat="server" DefaultType="StackedBar100"
Width="1100px" ID="ReportChart" Height="450px" DataSourceID="ChartDataSource" OnDataBound="ReportChart_DataBound">
<Appearance>
<Border Visible="False" />
</Appearance>
<Series>
<telerik:ChartSeries Name="Normal" Type="StackedBar100" DataYColumn="Normal">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False">
</LabelAppearance>
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Warnings" Type="StackedBar100" DataYColumn="Warnings">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False"/>
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Fixture_Malfunction" Type="StackedBar100" DataYColumn="Fixture_Malfunction">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="No_Comm" Type="StackedBar100" DataYColumn="No_Comm">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Extended_No_Comm" Type="StackedBar100" DataYColumn="Extended_No_Comm">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Partial_Report" Type="StackedBar100" DataYColumn="Partial_Report">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Unregistered" Type="StackedBar100" DataYColumn="Unregistered">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="No_Power" Type="StackedBar100" DataYColumn="No_Power">
<Appearance ShowLabels="False">
<LabelAppearance Visible="False" />
</Appearance>
</telerik:ChartSeries>
</Series>
<PlotArea>
<Appearance>
<Border Visible="False" />
</Appearance>
</PlotArea>
</telerik:RadChart>












1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 07 Feb 2014, 10:42 AM
Hi Ed,

RadChart doesn't support date axis out of the box, and therefore in order to display dates additional configuration is required:
  • Convert the DateTime objects to ODate format.
  • Set an appropriate DateTime value format for the x-axis.
  • If you want to display continuous data you must set the isZeroBased property of the x-axis to false.

Please find an example on how to display discrete data with a data axis in RadChart below:
ASPX:

<telerik:RadChart runat="server" DefaultType="StackedBar100"
            Width="1100px" ID="ReportChart" Height="450px" DataSourceID="ChartDataSource" OnDataBound="ReportChart_DataBound">
            <Appearance>
                <Border Visible="False" />
            </Appearance>
            <PlotArea>
                <XAxis DataLabelsColumn="myXValues" Appearance-ValueFormat="ShortDate"></XAxis>
                <Appearance>
                    <Border Visible="False" />
                </Appearance>
            </PlotArea>
            <Series>
                <telerik:ChartSeries Name="Normal" Type="StackedBar100" DataYColumn="Normal">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False">
                        </LabelAppearance>
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="Warnings" Type="StackedBar100" DataYColumn="Warnings">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="Fixture_Malfunction" Type="StackedBar100" DataYColumn="Fixture_Malfunction">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="No_Comm" Type="StackedBar100" DataYColumn="No_Comm">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="Extended_No_Comm" Type="StackedBar100" DataYColumn="Extended_No_Comm">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="Partial_Report" Type="StackedBar100" DataYColumn="Partial_Report">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="Unregistered" Type="StackedBar100" DataYColumn="Unregistered">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
                <telerik:ChartSeries Name="No_Power" Type="StackedBar100" DataYColumn="No_Power">
                    <Appearance ShowLabels="False">
                        <LabelAppearance Visible="False" />
                    </Appearance>
                </telerik:ChartSeries>
            </Series>
        </telerik:RadChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
    ReportChart.DataSource = ConvertColumnToODate(GetData(), "myXvalues");
    ReportChart.DataBind();
}
protected DataTable GetData()
{
    DataTable dt = new DataTable();
 
    dt.Columns.Add("ID");
    dt.Columns.Add("Normal");
    dt.Columns.Add("Warnings");
    dt.Columns.Add("Fixture_Malfunction");
    dt.Columns.Add("No_Comm");
    dt.Columns.Add("Extended_No_Comm");
    dt.Columns.Add("Partial_Report");
    dt.Columns.Add("Unregistered");
    dt.Columns.Add("No_Power");
    dt.Columns.Add("myXValues");
 
    dt.Rows.Add(1, 31, 32, 33, 34, 35, 36, 37, 38, new DateTime(2012, 05, 10));
    dt.Rows.Add(2, 11, 12, 13, 14, 15, 16, 17, 18, new DateTime(2012, 05, 13));
    dt.Rows.Add(3, 21, 22, 23, 24, 25, 26, 27, 28, new DateTime(2012, 05, 15));
 
    return dt;
}
 
protected DataTable ConvertColumnToODate(DataTable dt, string columnName)
{
    for (int i = 0; i < dt.Rows.Count; i++)
    {
 
        dt.Rows[i][columnName] = (DateTime.Parse(dt.Rows[i][columnName].ToString())).ToOADate();
    }
    return dt;
}
 
protected void ReportChart_DataBound(object sender, EventArgs e)
{
 
}

You can find the full VS example in the attached archive.

I can also suggest that you try the newer HtmlChart control that render entirely on the client as SVG and handles dates out of the box (see HtmlChart - Date Axis online demo). More information on the pros and cons of both charts can be found in RadHtmlChart vs. RadChart, round 2. Which one is right for me? blog post. You may also useful Migrating from RadChart to RadHtmlChart
set of articles
that sheds more light on how to migrate the basic chart setup from RadChart to RadHtmlChart.

Note also that in Q1 2014 the RadChart controls is going obsolete. More information on the matter is available in RadHtmlChart vs RadChart, round 3 – RadChart is down blog post.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (Obsolete)
Asked by
Ed
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or