Stacked Bar 100 Data Binding

Thread is closed for posting
2 posts, 0 answers
  1. Ed
    Ed avatar
    33 posts
    Member since:
    Sep 2012

    Posted 04 Feb 2014 Link to this post

    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>












  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 07 Feb 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top