Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Stack 100% show 120%

7 Answers 119 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
marco
Top achievements
Rank 2
marco asked on 19 Mar 2015, 12:02 AM
chart.png
Why sometimes the chart shows 120% instead of stopping at 100%? (see attached image)

is there a way to force to not show anything over 100?


7 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 19 Mar 2015, 12:08 PM
Hi Marco,

Could you please provide us with the markup that reproduces the issue? You can hard code some values to the chart in order to make it runnable.

Could you also tell us which Telerik UI version you are using as well as whether there are any existing JavaScript errors on your page?

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
marco
Top achievements
Rank 2
answered on 19 Mar 2015, 01:31 PM
Hi Danail,

I don't have markup as the datasource is built client side.
Please find below a code to generate the series that are causing problems.

the datasource is a list
List<IncomeChartItem> incomeChartItems = new List<IncomeChartItem>();

where the object IncomeChartItem is defined like below:
01.public class IncomeChartItem
02.{
03.    public string Adm1Name { get; set; }
04. 
05.    public string cat1Name { get; set; }
06.    public string cat2Name { get; set; }
07.    public string cat3Name { get; set; }
08.    public string cat4Name { get; set; }
09.    public string cat5Name { get; set; }
10.    public string cat6Name { get; set; }
11.    public double cat1Val { get; set; }
12.    public double cat2Val { get; set; }
13.    public double cat3Val { get; set; }
14.    public double cat4Val { get; set; }
15.    public double cat5Val { get; set; }
16.    public double cat6Val { get; set; }
17. 
18.}

Here is a code to put values in the list (declare first the IncomeChartItem ici variable)

001.ici = new IncomeChartItem();
002.ici.Adm1Name="Alibori";
003.ici.cat1Val=2.21;
004.ici.cat2Val=0.23;
005.ici.cat3Val=59.88;
006.ici.cat4Val=10.93;
007.ici.cat5Val=0.23;
008.ici.cat6Val=0;
009.ici.cat1Name="Agro - Cash Crops";
010.ici.cat2Name="Agro - Fishing";
011.ici.cat3Name="Agro - Food Crops";
012.ici.cat4Name="Commerce - Business/Trading";
013.ici.cat5Name="Commerce - Rents/Investment";
014.ici.cat6Name="";
015.incomeChartItems.Add(ici);
016. 
017.ici = new IncomeChartItem();
018.ici.Adm1Name="Atakora";
019.ici.cat1Val=13.13;
020.ici.cat2Val=0;
021.ici.cat3Val=60.28;
022.ici.cat4Val=7.6;
023.ici.cat5Val=0.35;
024.ici.cat6Val=0;
025.ici.cat1Name="Agro - Cash Crops";
026.ici.cat2Name="Agro - Fishing";
027.ici.cat3Name="Agro - Food Crops";
028.ici.cat4Name="Commerce - Business/Trading";
029.ici.cat5Name="Commerce - Rents/Investment";
030.ici.cat6Name="";
031.incomeChartItems.Add(ici);
032. 
033.ici = new IncomeChartItem();
034.ici.Adm1Name="Atlantique";
035.ici.cat1Val=3.64;
036.ici.cat2Val=8.48;
037.ici.cat3Val=19.55;
038.ici.cat4Val=14.38;
039.ici.cat5Val=0.84;
040.ici.cat6Val=0;
041.ici.cat1Name="Agro - Cash Crops";
042.ici.cat2Name="Agro - Fishing";
043.ici.cat3Name="Agro - Food Crops";
044.ici.cat4Name="Commerce - Business/Trading";
045.ici.cat5Name="Commerce - Rents/Investment";
046.ici.cat6Name="";
047.incomeChartItems.Add(ici);
048. 
049.ici = new IncomeChartItem();
050.ici.Adm1Name="Borgou";
051.ici.cat1Val=4.92;
052.ici.cat2Val=0.08;
053.ici.cat3Val=43.52;
054.ici.cat4Val=9.51;
055.ici.cat5Val=0.49;
056.ici.cat6Val=0;
057.ici.cat1Name="Agro - Cash Crops";
058.ici.cat2Name="Agro - Fishing";
059.ici.cat3Name="Agro - Food Crops";
060.ici.cat4Name="Commerce - Business/Trading";
061.ici.cat5Name="Commerce - Rents/Investment";
062.ici.cat6Name="";
063.incomeChartItems.Add(ici);
064. 
065.ici = new IncomeChartItem();
066.ici.Adm1Name="Collines";
067.ici.cat1Val=5;
068.ici.cat2Val=0;
069.ici.cat3Val=46.17;
070.ici.cat4Val=13.17;
071.ici.cat5Val=0;
072.ici.cat6Val=0;
073.ici.cat1Name="Agro - Cash Crops";
074.ici.cat2Name="Agro - Fishing";
075.ici.cat3Name="Agro - Food Crops";
076.ici.cat4Name="Commerce - Business/Trading";
077.ici.cat5Name="Commerce - Rents/Investment";
078.ici.cat6Name="";
079.incomeChartItems.Add(ici);
080. 
081.ici = new IncomeChartItem();
082.ici.Adm1Name="Couffo";
083.ici.cat1Val=4.07;
084.ici.cat2Val=0;
085.ici.cat3Val=37.59;
086.ici.cat4Val=14.81;
087.ici.cat5Val=0.09;
088.ici.cat6Val=0;
089.ici.cat1Name="Agro - Cash Crops";
090.ici.cat2Name="Agro - Fishing";
091.ici.cat3Name="Agro - Food Crops";
092.ici.cat4Name="Commerce - Business/Trading";
093.ici.cat5Name="Commerce - Rents/Investment";
094.ici.cat6Name="";
095.incomeChartItems.Add(ici);
096. 
097.ici = new IncomeChartItem();
098.ici.Adm1Name="Donga";
099.ici.cat1Val=1.87;
100.ici.cat2Val=0;
101.ici.cat3Val=54.38;
102.ici.cat4Val=10.47;
103.ici.cat5Val=0.29;
104.ici.cat6Val=0;
105.ici.cat1Name="Agro - Cash Crops";
106.ici.cat2Name="Agro - Fishing";
107.ici.cat3Name="Agro - Food Crops";
108.ici.cat4Name="Commerce - Business/Trading";
109.ici.cat5Name="Commerce - Rents/Investment";
110.ici.cat6Name="";
111.incomeChartItems.Add(ici);
112. 
113.ici = new IncomeChartItem();
114.ici.Adm1Name="Littoral";
115.ici.cat1Val=2.56;
116.ici.cat2Val=0.24;
117.ici.cat3Val=0.12;
118.ici.cat4Val=28.87;
119.ici.cat5Val=3.93;
120.ici.cat6Val=0;
121.ici.cat1Name="Agro - Cash Crops";
122.ici.cat2Name="Agro - Fishing";
123.ici.cat3Name="Agro - Food Crops";
124.ici.cat4Name="Commerce - Business/Trading";
125.ici.cat5Name="Commerce - Rents/Investment";
126.ici.cat6Name="";
127.incomeChartItems.Add(ici);
128. 
129.ici = new IncomeChartItem();
130.ici.Adm1Name="Mono";
131.ici.cat1Val=1.9;
132.ici.cat2Val=5.2;
133.ici.cat3Val=14.6;
134.ici.cat4Val=20.4;
135.ici.cat5Val=0.4;
136.ici.cat6Val=0;
137.ici.cat1Name="Agro - Cash Crops";
138.ici.cat2Name="Agro - Fishing";
139.ici.cat3Name="Agro - Food Crops";
140.ici.cat4Name="Commerce - Business/Trading";
141.ici.cat5Name="Commerce - Rents/Investment";
142.ici.cat6Name="";
143.incomeChartItems.Add(ici);
144. 
145.ici = new IncomeChartItem();
146.ici.Adm1Name="Oueme";
147.ici.cat1Val=13.59;
148.ici.cat2Val=4.59;
149.ici.cat3Val=3.75;
150.ici.cat4Val=18.24;
151.ici.cat5Val=0.83;
152.ici.cat6Val=0;
153.ici.cat1Name="Agro - Cash Crops";
154.ici.cat2Name="Agro - Fishing";
155.ici.cat3Name="Agro - Food Crops";
156.ici.cat4Name="Commerce - Business/Trading";
157.ici.cat5Name="Commerce - Rents/Investment";
158.ici.cat6Name="";
159.incomeChartItems.Add(ici);
160. 
161.ici = new IncomeChartItem();
162.ici.Adm1Name="Plateau";
163.ici.cat1Val=5.04;
164.ici.cat2Val=0.22;
165.ici.cat3Val=33.48;
166.ici.cat4Val=11.98;
167.ici.cat5Val=0.45;
168.ici.cat6Val=0;
169.ici.cat1Name="Agro - Cash Crops";
170.ici.cat2Name="Agro - Fishing";
171.ici.cat3Name="Agro - Food Crops";
172.ici.cat4Name="Commerce - Business/Trading";
173.ici.cat5Name="Commerce - Rents/Investment";
174.ici.cat6Name="";
175.incomeChartItems.Add(ici);
176. 
177.ici = new IncomeChartItem();
178.ici.Adm1Name="Zou";
179.ici.cat1Val=7.43;
180.ici.cat2Val=0.68;
181.ici.cat3Val=23.67;
182.ici.cat4Val=19.02;
183.ici.cat5Val=0.19;
184.ici.cat6Val=0;
185.ici.cat1Name="Agro - Cash Crops";
186.ici.cat2Name="Agro - Fishing";
187.ici.cat3Name="Agro - Food Crops";
188.ici.cat4Name="Commerce - Business/Trading";
189.ici.cat5Name="Commerce - Rents/Investment";
190.ici.cat6Name="";
191.incomeChartItems.Add(ici);


The code I'm using to built the chart (id=CrtCols) is:

01.CrtCols.PlotArea.Series.Clear();
02.CrtCols.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Bottom;
03. 
04.//Add only the categories selected by the user through a checkboxlist
05.for(int i = 0; i < numberOfSelectedCategories; i++)
06.{
07.    ColumnSeries ps = new ColumnSeries();
08.    ps.DataFieldY = "cat" + (i+1) + "Val";
09.    ps.LabelsAppearance.DataField = "cat" + (i+1) + "Name";
10.    ps.LabelsAppearance.Visible = false;
11.    ps.TooltipsAppearance.ClientTemplate = "Category: #= dataItem.cat" + (i + 1) + "Name#<br/>Value: #= dataItem.cat" + (i + 1) + "Val.format(\"N2\")#<br/>#=(percentage*100).format(\"N2\")#%";
12.     ps.Stacked = true;
13.     ps.StackType = Telerik.Web.UI.HtmlChart.Enums.HtmlChartStackType.Stack100;
14.     CrtCols.PlotArea.Series.Add(ps);
15.}
16. 
17.CrtCols.PlotArea.XAxis.DataLabelsField = "Adm1Name";
18. 
19.incomeChartItems = incomeChartItems.OrderBy(i => i.Adm1Name).ToList(); //Sort admin units by alpha
20.CrtCols.DataSource = incomeChartItems;
21.CrtCols.DataBind();

you can set to numberOfSelectedCategories to 5 as in the code I've provided you I've filled in only 5 stacked series

regarding the version, I'm using the latest one, I've upgraded it two days ago.

Many thanks 
Marco




Agro - Cash Crops Agro - Fishing Agro - Food Crops Commerce - Business/Trading Commerce - Rents/Investment Sum
Alibori 2.21 0.23 59.88 10.93 0.23 0 73.48
Atakora 13.13 0.00 60.28 7.60 0.35 0 81.36
Atlantique 3.64 8.48 19.55 14.38 0.84 0 46.89
Borgou 4.92 0.08 43.52 9.51 0.49 0 58.52
Collines 5 0.00 46.17 13.17 0.00 0 64.34
Couffo 4.07 0.00 37.59 14.81 0.09 0 56.56
Donga 1.87 0.00 54.38 10.47 0.29 0 67.01
Littoral 2.56 0.24 0.12 28.87 3.93 0 35.72
Mono 1.9 5.20 14.60 20.40 0.40 0 42.5
Oueme 13.59 4.59 3.75 18.24 0.83 0 41
Plateau 5.04 0.22 33.48 11.98 0.45 0 51.17
Zou 7.43 0.68 23.67 19.02 0.19 0 50.99
Agro - Cash Crops Agro - Fishing Agro - Food Crops Commerce - Business/Trading Commerce - Rents/Investment Sum
Alibori 2.21 0.23 59.88 10.93 0.23 0 73.48
Atakora 13.13 0.00 60.28 7.60 0.35 0 81.36
Atlantique 3.64 8.48 19.55 14.38 0.84 0 46.89
Borgou 4.92 0.08 43.52 9.51 0.49 0 58.52
Collines 5 0.00 46.17 13.17 0.00 0 64.34
Couffo 4.07 0.00 37.59 14.81 0.09 0 56.56
Donga 1.87 0.00 54.38 10.47 0.29 0 67.01
Littoral 2.56 0.24 0.12 28.87 3.93 0 35.72
Mono 1.9 5.20 14.60 20.40 0.40 0 42.5
Oueme 13.59 4.59 3.75 18.24 0.83 0 41
Plateau 5.04 0.22 33.48 11.98 0.45 0 51.17
Zou 7.43 0.68 23.67 19.02 0.19 0 50.99
0
marco
Top achievements
Rank 2
answered on 19 Mar 2015, 01:51 PM
Sorry danail, I post the code without formatting it so you can easily copy and paste:
(answer to your previous question: there is no error in js console)


ici = new IncomeChartItem();
ici.Adm1Name="Alibori";
ici.cat1Val=2.21;
ici.cat2Val=0.23;
ici.cat3Val=59.88;
ici.cat4Val=10.93;
ici.cat5Val=0.23;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Atakora";
ici.cat1Val=13.13;
ici.cat2Val=0;
ici.cat3Val=60.28;
ici.cat4Val=7.6;
ici.cat5Val=0.35;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Atlantique";
ici.cat1Val=3.64;
ici.cat2Val=8.48;
ici.cat3Val=19.55;
ici.cat4Val=14.38;
ici.cat5Val=0.84;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Borgou";
ici.cat1Val=4.92;
ici.cat2Val=0.08;
ici.cat3Val=43.52;
ici.cat4Val=9.51;
ici.cat5Val=0.49;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Collines";
ici.cat1Val=5;
ici.cat2Val=0;
ici.cat3Val=46.17;
ici.cat4Val=13.17;
ici.cat5Val=0;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Couffo";
ici.cat1Val=4.07;
ici.cat2Val=0;
ici.cat3Val=37.59;
ici.cat4Val=14.81;
ici.cat5Val=0.09;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Donga";
ici.cat1Val=1.87;
ici.cat2Val=0;
ici.cat3Val=54.38;
ici.cat4Val=10.47;
ici.cat5Val=0.29;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Littoral";
ici.cat1Val=2.56;
ici.cat2Val=0.24;
ici.cat3Val=0.12;
ici.cat4Val=28.87;
ici.cat5Val=3.93;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Mono";
ici.cat1Val=1.9;
ici.cat2Val=5.2;
ici.cat3Val=14.6;
ici.cat4Val=20.4;
ici.cat5Val=0.4;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Oueme";
ici.cat1Val=13.59;
ici.cat2Val=4.59;
ici.cat3Val=3.75;
ici.cat4Val=18.24;
ici.cat5Val=0.83;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Plateau";
ici.cat1Val=5.04;
ici.cat2Val=0.22;
ici.cat3Val=33.48;
ici.cat4Val=11.98;
ici.cat5Val=0.45;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);
 
ici = new IncomeChartItem();
ici.Adm1Name="Zou";
ici.cat1Val=7.43;
ici.cat2Val=0.68;
ici.cat3Val=23.67;
ici.cat4Val=19.02;
ici.cat5Val=0.19;
ici.cat6Val=0;
ici.cat1Name="Agro - Cash Crops";
ici.cat2Name="Agro - Fishing";
ici.cat3Name="Agro - Food Crops";
ici.cat4Name="Commerce - Business/Trading";
ici.cat5Name="Commerce - Rents/Investment";
ici.cat6Name="";
incomeChartItems.Add(ici);


the IncomeChartItem class:
public class IncomeChartItem
{
    public int Adm1Code { get; set; }
 
    public string cat1Name { get; set; }
    public string cat2Name { get; set; }
    public string cat3Name { get; set; }
    public string cat4Name { get; set; }
    public string cat5Name { get; set; }
    public string cat6Name { get; set; }
    public double cat1Val { get; set; }
    public double cat2Val { get; set; }
    public double cat3Val { get; set; }
    public double cat4Val { get; set; }
    public double cat5Val { get; set; }
    public double cat6Val { get; set; }
 
}


the chart
for(int i = 0; i < numberOfSelectedCategories; i++)
{
        ColumnSeries ps = new ColumnSeries();
        ps.DataFieldY = "cat" + (i + 1) + "Val";
        ps.LabelsAppearance.DataField = "cat" + (i + 1) + "Name";
        ps.LabelsAppearance.Visible = false;
        ps.TooltipsAppearance.ClientTemplate = "Category: #= dataItem.cat" + (i + 1) + "Name#<br/>Value: #= dataItem.cat" + (i + 1) + "Val.format(\"N2\")#<br/>#=(percentage*100).format(\"N2\")#%";
        ps.Stacked = true;
        ps.StackType = Telerik.Web.UI.HtmlChart.Enums.HtmlChartStackType.Stack100;
 
        CrtCols.PlotArea.Series.Add(ps);
}
 
CrtCols.PlotArea.XAxis.DataLabelsField = "Adm1Name";
 
incomeChartItems = incomeChartItems.OrderBy(i => i.Adm1Name).ToList();
CrtCols.DataSource = incomeChartItems;
CrtCols.DataBind();




0
Accepted
Danail Vasilev
Telerik team
answered on 20 Mar 2015, 02:27 PM
Hello Ðœarco,

Thank you for providing us with a runnable sample that reproduces the unexpected behavior.

I have reported the issue to our development team, so that if everything is fine it will be fixed for the upcoming Q1 2015 SP1, scheduled for the beginning of next month.

I have also updated your Telerik points for reporting this issue to us.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
marco
Top achievements
Rank 2
answered on 20 Mar 2015, 02:32 PM
Many thanks Danail.

In the meantime, as the client is waiting to publish the chart page, is there a way that I can force the chart to not show more than 100 on Y-axis, somthing like a max-value?

Thanks
Marco
0
marco
Top achievements
Rank 2
answered on 22 Mar 2015, 10:55 AM
Here is the temporary workaround:

setting
myRadHtmlChart.PlotArea.YAxis.MaxValue = 1;

the Y-axis doesn't go over 100%

Regards,
Marco
0
kevin
Top achievements
Rank 1
answered on 29 Apr 2015, 01:17 AM
I am getting this problem as well, sometimes, the chart show percentage up to 120% rather than 100%, I can not tell what data causing this, hard to debug, waiting on update for this
Tags
Chart (HTML5)
Asked by
marco
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
marco
Top achievements
Rank 2
kevin
Top achievements
Rank 1
Share this question
or