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

Odd behavior with stacked column series with data binding

3 Answers 70 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 01 Oct 2015, 10:25 PM

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

Sort by
0
Tomica
Top achievements
Rank 2
answered on 01 Oct 2015, 11:01 PM

*** 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.

 

0
Danail Vasilev
Telerik team
answered on 05 Oct 2015, 03:23 PM
Hi Tomica,

I am not able to open the first two images attached. Could you please provide them again? Also can you send us the problematic data source, so that we can run the code, reproduce the issue and provide a solution if possible?

Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Tomica
Top achievements
Rank 2
answered on 08 Oct 2015, 03:48 PM

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>
Tags
Chart (HTML5)
Asked by
Tomica
Top achievements
Rank 2
Answers by
Tomica
Top achievements
Rank 2
Danail Vasilev
Telerik team
Share this question
or