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

Odd behavior with stacked column series with data binding

3 Answers 180 Views

Chart (HTML5)

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

Tomica asked on 01 Oct 2015, 10:25 PM

html-chart-before-stack-series.jpg

html-chart-after-stack-series.jpg

I am attempting to create a stacked bar chart based on a SQL data source.

The first attachment (before) shows the basic chart, with the values also show on the left for reference. (in a RadGrid)

I then add the second series to the chart definition and get what you see in the second attachment (after)

Note that the scale has changed significantly and it no longer matches the range of values. In this case "future shows" is a fixed value of 5, so the maximum series value for year 2010 would be 33 (28 + 5). As you can see, the scale numbers have no relation to the actual stacked values.

Also note in the code to follow, the two series are presented in the wrong order. For the year 2010, available shows = 28 and future shows = 5 (per the data source) But what is presented on the chart is a short blue bar and a taller green bar (value 28) is exactly the opposite of what the legend indicates.

<telerik:RadHtmlChart runat="server" ID="Year_Chart" DataSourceID="Year_Summary_Data" Width="452px" Height="400px" OnClientSeriesClicked="OnYearSeriesClick" Skin="BlackMetroTouch">

<ChartTitle Text="Shows by Year">

<Appearance Visible="True"></Appearance>

</ChartTitle>

<Legend>

<Appearance Position="Bottom" Visible="True"></Appearance>

</Legend>

<PlotArea>

<CommonTooltipsAppearance Shared="true" Visible="false">

<SharedTemplate>

<div>#= year #</div>

</SharedTemplate>

</CommonTooltipsAppearance>

<XAxis DataLabelsField="year">

<TitleAppearance Text="Year" Visible="false"></TitleAppearance>

<LabelsAppearance RotationAngle="75" />

<MajorGridLines Visible="false"></MajorGridLines>

<MinorGridLines Visible="false"></MinorGridLines>

</XAxis>

<YAxis>

<MajorGridLines Visible="true" Color="#ffc5bf" Width="1"></MajorGridLines>

<MinorGridLines Visible="false"></MinorGridLines>

</YAxis>

<Series>

<telerik:ColumnSeries Stacked="True" Name="Available Shows" DataFieldY="shows">

<LabelsAppearance Visible="True"></LabelsAppearance>

</telerik:ColumnSeries>

<telerik:ColumnSeries Stacked="True" Name="Future Shows" DataFieldY="future">

<LabelsAppearance Visible="False"></LabelsAppearance>

</telerik:ColumnSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

3 Answers, 1 is accepted

answered on 01 Oct 2015, 11:01 PM

html-chart-de-stacked-series.jpg

*** additional information added to preceding post ***

I used the same chart definition and changed both series to "stacked=false".

The attachment shows (1) proper scaling of the Y axis and (2) proper assignment of the series values and legend.

Obviously something happens when stacking that is either (1) a bug, or (2) a serious misunderstanding on my part on how to make the stacking work with HTML chart. (most likely #2 since this is my Very First Stacking Adventure)

Using UI for ASP.NET AJAX v.2015.3.930.45.

answered on 08 Oct 2015, 03:48 PM

telerik_stacking_resolution.jpg

I the problem was due to defining both column series as "stacked". For the second column I changed to "stacked=false" (see attachment) and the problems went away. Since this is my very first attempt at stacking, and I'm also only two weeks into Telerik charting, let's call this "user confusion" for the time being and close the thread as "resolved".

Also note that I installed the latest update to UI / AJAX while debugging my chart,. It works, so that's all I need at this time <g>